theui-svelte is a component library for Svelte 5, built on Tailwind CSS v4. It covers the pieces most applications need, with the accessibility and the theming already done.
Introduction
theui-svelte is TheUI's component library for Svelte, built on Tailwind CSS. The components carry their own ARIA wiring and keyboard behavior, read your brand colors from your CSS, and merge any class you pass with tailwind-merge, so overriding a default does not mean fighting it.
It needs Svelte 5.57.1 or newer, Tailwind CSS v4 and Node.js 22.12 or newer. The installation guide takes you from an empty project to your first component.
Features
The main features of the component library are:
- Written for Svelte 5 - components are built with runes, and take snippets wherever you need to pass markup rather than text.
- Accessible from the start - roles and names, keyboard support, focus handling and reduced motion are part of each component. The accessibility guide sets out what is handled and what is left to you.
- Yours to style - every component takes
class, merged with tailwind-merge, so your own classes win instead of fighting the defaults. - Your colors, not ours - components read the brand palette from your CSS, in light and dark mode alike.
- Dark mode with nothing to configure - the stylesheet brings its own dark variant, and the DarkMode component remembers the choice.
- Right to left - layouts use logical properties, so RTL works without a second stylesheet.
- Typed throughout - every prop has a type, listed on the types page.
- Safe to render on the server - nothing reaches for the browser while a page is being rendered.
Components
29 components, 18 form controls and 4 utilities, each with its own page of examples, a full list of props and an accessibility section.
UI COMPONENTS
- Accordion
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- Button group
- Quick action button (QAB)
- Card
- Chips
- Collapse
- Divider
- Drawer
- Dropdown
- List group
- Modal
- Navbar
- Notification
- Pagination
- Popover
- Popup
- Progress bar
- Rating
- Skeleton
- Slider
- Spinner
- Table
- Tabs
- Tooltip
FORM ELEMENTS
- Form
- Form wizard
- Checkbox
- Radio button
- Label
- File input
- File dropzone
- Text input
- OTP input
- Range
- Stepper
- Date picker
- Time picker
- Toggle
- Select
- Combobox
- Helper text
- Fieldset
UTILITIES
Where to Go Next
- Installation - the starter template, or a step by step setup of your own.
- Colors and branding - point the components at your palette.
- Accessibility - what the components handle, the keys they answer to, and what is left to you.
- Types - every exported type, in alphabetical order.
- Right to left and z-index - two things worth knowing before you build a layout.