Destyler UI v0.0.4 is comming!
A Build UI for
Your design system
Your design system
Destyler UI simplifies the creation of stunning and responsive web applications with its
comprehensive collection of fully styled and customizable UI components designed for You.
comprehensive collection of fully styled and customizable UI components designed for You.
Everything you expect from a
UI component library
Accessibility out of the box.
Supports assistive technology
WAI-ARIA compliant
Keyboard navigation
Focus management
Screen reader support
Developer Experience First.
Unstyled, Customizable, Familiar API
<script setup lang="ts">
const controlRef = ref('item-1')
</script>
<template>
<CollapseRoot v-model="controlRef">
<!-- css -->
<CollapseItem class="CollapseItem" value="item-1" />
<!-- atomic css -->
<CollapseItem class="bg-white px-4 py-2" value="item-2" />
</CollapseRoot>
</template>
<style scoped>
.CollapseItem {
background-color: white;
padding: 0.5rem 1rem;
}
</style>
Save time. Ship faster.
40+ Components
Granular access to each component part.
Wrap them and add your own event listeners, props, etc.
<template>
<DialogRoot>
<TooltipRoot>
<TooltipTrigger as-child>
<DialogTrigger as-child>
<Button>Open dialog</Button>
</DialogTrigger>
</TooltipTrigger>
<TooltipPortal>…</TooltipPortal>
</TooltipRoot>
<DialogPortal>...</DialogPortal>
</DialogRoot>
</template>