Distill UI is a component library for Svelte and Vue that I designed and built for developers who'd rather write plain CSS than Tailwind. Most popular component libraries today assume you're using utility classes. If you're not, you end up fighting the library every time you want to change how something looks.
Distill UI takes the other path. It has 20 accessible components, from buttons and forms to dialogs, menus and tabs, all styled with scoped, vanilla CSS. Like shadcn/ui, you copy the components into your own project and own the code, so changing a component is as simple as editing its stylesheet.
The code lives in your project
Like shadcn/ui, you copy components into your project, with the CLI or by hand, and the code is yours. No fighting a package you can't touch, no :global() hacks. Changing a component means editing its scoped style, and it just works.
Plain CSS you can actually read
Each component is one class name and a short block of CSS, with hover and disabled states written right where you'd expect them. No long strings of utility classes to decode, so anyone on the team who knows CSS can change it.
One library, two frameworks
Every component works the same way in Svelte and Vue. The names, the options and the look all match, so you can use one library across projects in either framework.
Accessible by default
Distill UI builds on proven headless primitives, Melt UI for Svelte and Reka UI for Vue, so keyboard support, focus handling and screen reader behaviour are taken care of. You get the hard parts done properly and keep full control of the styling.
Themed with CSS variables
Colours, spacing and corner radius all run on CSS variables, and dark mode follows the system setting. Change a handful of values and the whole library matches your brand.
Built with: Svelte, Vue, TypeScript, CSS, Melt UI, Reka UI
Docs for every component
Every component has its own page with a live preview, the code to copy and notes on customising it, so getting started takes minutes.
Thanks for scrolling!
Distill UI is my take on what a component library looks like when plain CSS comes first. I designed the components, wrote the docs and built both the Svelte and Vue versions. Add components with the CLI or copy them in by hand, and make them your own.
0 likes · 1 view · Nov 10, 2026
Distill UI is a Svelte and Vue component library I designed and built. Its 20 accessible components use plain CSS, and you copy them in and own the code.
