Introduction
Accessible Svelte 5 components that you copy into your project and style with plain CSS.
distill-ui isn't a package you install and import. Each component is a few .svelte files that live in your own project, so you can read them and change them
like any other code you wrote. The styles are a normal <style> block in each file.
There's no Tailwind, no class strings and no build plugin.
Why this exists
Svelte gives every component scoped CSS for free. Most Svelte component libraries don't use it: they're styled with Tailwind, so the look lives in long class strings inside the markup. That works for a lot of people. distill-ui is for the people who would rather write CSS.
The headless libraries that skip Tailwind, like Bits UI, render their parts inside their own
components. Svelte only scopes your CSS to elements written in the same file, so a selector like .trigger never reaches the part and Svelte removes it as unused. The usual fixes
are bandaids: :global(), which gives up scoping, or wrapping every part in a
snippet.
distill-ui is built around four ideas:
- Use Svelte natively. Every element a component styles is written in that
component's own file, so a plain scoped selector reaches it. When you open
select-trigger.svelte, the CSS for the trigger is right there. - Keep concerns separate. The template says what something is. The
<style>block says how it looks. - Stay readable. Rules read as plain CSS, like
background: var(--dui-color-primary), so anyone who knows CSS can follow them. - You're in control. The files are yours. Change a token, set an option from a parent, or replace the whole style block.
How it fits together
- Tokens. Colors, spacing, radius, fonts and motion are CSS custom properties
in one set of files, all starting with
--dui-. Change them to restyle everything. See Theming. - Components. Each one reads the tokens and has its own options, like
--dui-button-bg, that you can set from any parent. See Customizing. - Behavior. Where the browser already does the job, components use native elements (Checkbox is a real checkbox). Dialogs, menus, selects and the like get their keyboard and screen reader support from Melt UI.
Contributing
Every component follows the same rules for tokens, options, state attributes and file layout. They're written down in CONVENTIONS.md.
Credits
The component structure follows shadcn/ui and shadcn-svelte, and the behavior comes from Melt UI. All are MIT licensed.