OdJ Svelte UI

This is a fork from Flowbite for Svelte 5 with Runes. I just made some changes that fits better my taste.

• Original Docs

Differences to Flowbite

• Migration to Tailwind v4;
• You can choose the "background" color instead of using the hard-coded gray color. You have to choose your colors defining light-surface and dark-surface on app.css;
• Some components have the design slightly different:
  • All components: instead of using focus-within, uses focus-visible;
  • Forms: When focus, border slightly thicker;
  • Alert has new colors;
  • Button has a new design for some variations and a response when clicked;
  • Textarea is fixed;
  • Pagination respect max-width;
  • Modal title has a better size, improved default animations with control of backdrop's animations and removed the outdated divider;
  • Input:Search has a better X button for Chromium browsers;
  • Radio has a new design and it's animated;
  • Header has blur, some small design tweaks and a fixed design for the menu on mobile;
  • Dropdown is more modern;
  • Avatar has better borders;
  • Sidebar has better hover colors and some other design tweaks, like border radius;
• Tabs styles are fixed and introduced underline animations and a complete modern redesign for "Full" style;
• The Tooltip component received a rework;
• Modal has Esc to close again;
• Button has now a built-in loading state and can be controlled by the loading prop;
• Label now has space-y-1 by default, a new default color and the disabled prop;
• Textarea can autoexpand as user type, control this by autoexpand and maxRows props;
• Dropdown now locks the page scroll and you can enable this default behaviour setting lock to true. Also, it uses a new strategy instead of uiHelpers;
• Avatar supports a fallback snippet to show when the image is loading or can't be loaded;
• Sidebar can not be opened or closed anymore. If you want this behaviour, this component should be inside the Drawer component. On mobile, Sidebar will look like tabs;
• SidebarButton has been removed. Please use the Drawer component to maintain the old sidebar behaviour;

Installation

Install svelte, tailwindcss, and odj-svelte-ui, update dependencies and install the latest:

bunx sv create myapp // select to install tailwindcss
cd myapp
bun install
bun i -D odj-svelte-ui
bun dev

Add the following to app.css:

💡 TIP: Get colors' codes here.

@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary-50: #fff5f2;
  --color-primary-100: #fff1ee;
  --color-primary-200: #ffe4de;
  --color-primary-300: #ffd5cc;
  --color-primary-400: #ffbcad;
  --color-primary-500: #fe795d;
  --color-primary-600: #ef562f;
  --color-primary-700: #eb4f27;
  --color-primary-800: #cc4522;
  --color-primary-900: #a5371b;

  --color-secondary-50: #eff6ff;
  --color-secondary-100: #dbeafe;
  --color-secondary-200: #bfdbfe;
  --color-secondary-300: #93c5fd;
  --color-secondary-400: #60a5fa;
  --color-secondary-500: #3b82f6;
  --color-secondary-600: #2563eb;
  --color-secondary-700: #1d4ed8;
  --color-secondary-800: #1e40af;
  --color-secondary-900: #1e3a8a;
  --color-secondary-950: #172554;

  --color-light-surface-50: #f9fafb;
  --color-light-surface-100: #f3f4f6;
  --color-light-surface-200: #e5e7eb;
  --color-light-surface-300: #d1d5db;
  --color-light-surface-400: #9ca3af;
  --color-light-surface-500: #6b7280;
  --color-light-surface-600: #4b5563;
  --color-light-surface-700: #374151;
  --color-light-surface-800: #1f2937;
  --color-light-surface-900: #111827;
  --color-light-surface-950: #030712;

  --color-dark-surface-50: #f9fafb;
  --color-dark-surface-100: #f3f4f6;
  --color-dark-surface-200: #e5e7eb;
  --color-dark-surface-300: #d1d5db;
  --color-dark-surface-400: #9ca3af;
  --color-dark-surface-500: #6b7280;
  --color-dark-surface-600: #4b5563;
  --color-dark-surface-700: #374151;
  --color-dark-surface-800: #1f2937;
  --color-dark-surface-900: #111827;
  --color-dark-surface-950: #030712;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

License

MIT