Introduction

An open-source UI component library for building high-quality, accessible design systems and web apps using Destyler.

Destyler UI provides the same component catalog for Vue, React, Solid, and Svelte, plus framework-specific providers for common runtime concerns. Choose a framework from the header to switch every usage example, live preview, and API table on the page.

---

Features

Accessible

Components adhere to the WAI-ARIA design patterns where possible. We handle many of the difficult implementation details related to accessibility, including aria and role attributes, focus management, and keyboard navigation.

Composable

Destyler UI provides granular access to each component part, so you can wrap them and add your own event listeners, props, and refs. Build complex interfaces from simple, predictable primitives.

Unstyled

Components ship with zero styles, giving you complete control over the visual design. Bring your preferred styling solution — vanilla CSS, Tailwind, CSS-in-JS, or anything else.

Open Architecture

Our open component architecture provides granular access to each component part. Wrap them, extend them, and add your own event listeners and props to create exactly the experience you need.

Uncontrolled by Default

Where applicable, components are uncontrolled by default but can also be controlled. All behavior wiring is handled internally, so you can get up and running smoothly without creating local states.

Developer Experience

One of our main goals is to provide the best possible developer experience. All components provide a fully-typed API and share a similar, consistent interface — creating a predictable development workflow.

Incremental Adoption

Import only the component families you need and add more over time. Package builds remain tree-shakable, and Svelte also provides direct component entry points.