Skip to content
UI

Destyler UI

UNSTYLED · ACCESSIBLE · COMPOSABLE

Fully customizable
and accessible
UI components

Destyler UI provides 46 unstyled, accessible component families for Vue, React, Solid, and Svelte. You own every visual detail; the library supplies the behavior, accessibility, and TypeScript API.

Get Started View on GitHub
46 COMPONENTS
FRAMEWORKS

WHY DESTYLER

Components that
respect your craft

We handle the complex interaction patterns so you can focus on what matters — your product's unique experience.

01

State Machine Driven

Every component is powered by a deterministic state machine, ensuring predictable behavior and eliminating impossible states.

02

Framework Agnostic Core

Write your logic once. Ship to Vue, React, Solid, and Svelte with idiomatic bindings that feel native to each framework.

03

Fully Unstyled

Zero visual opinions. Every component is a behavioral primitive — bring your own design system, CSS framework, or hand-rolled styles.

04

Accessible by Default

WAI-ARIA patterns baked into every component. Keyboard navigation, focus management, and screen reader support out of the box.

05

Composable Architecture

Anatomy-based API design lets you compose complex interfaces from simple, predictable parts. Slot in, swap out, extend.

06

TypeScript Native

Full type coverage with discriminated unions and generics. Your editor knows every prop, event, and slot before you write it.

COMPONENT LIBRARY

Everything you need,
nothing you don't

GETTING STARTED

Three steps to
ship faster

01

Install the package

Add Destyler to your project with your preferred package manager. Zero config, no build plugins required.

pnpm add @destyler-ui/vue
pnpm add @destyler-ui/react
pnpm add @destyler-ui/solid
pnpm add @destyler-ui/svelte
02

Import components

Pull in exactly what you need. Every component is tree-shakable through namespace exports or direct imports.

import { Collapse } from '@destyler-ui/vue'
import { Collapse } from '@destyler-ui/react'
import { Collapse } from '@destyler-ui/solid'
import { Collapse } from '@destyler-ui/svelte'
03

Style your way

Apply your design tokens, Tailwind classes, or CSS-in-JS. The components provide behavior — you provide the look.

<Collapse.Root>
  <Collapse.Item value="a">
    ...
  </Collapse.Item>
</Collapse.Root>
<Collapse.Root>
  <Collapse.Item value="a">
    ...
  </Collapse.Item>
</Collapse.Root>
<Collapse.Root>
  <Collapse.Item value="a">
    ...
  </Collapse.Item>
</Collapse.Root>
<Collapse.Root>
  <Collapse.Item value="a">
    ...
  </Collapse.Item>
</Collapse.Root>

READY?

Start building
ToDay

Open-source, MIT licensed, and ready for production.

Read the Docs GitHub

UI

MIT License