Destyler

unstyled component for vue.

Features

• On demand Import - Provide resolver to automatically import only used components.
• Typescript Supported - Support TypeScript & type checked & type inference.
• Unstyled - easily customizable and great for building design system and web apps.

Install

pnpm install destyler

On-demand Import

You need to use an additional plugin to import components you used. First you need to install unplugin-vue-components and unplugin-auto-import.

pnpm install -D unplugin-vue-components unplugin-auto-import

Then add the code below into your Vite config file.

// vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { DestylerUIResolver } from 'destyler/resolver'

export default defineConfig({
  // ...
  plugins: [

    Components({
      resolvers: [
        DestylerUIResolver(),
      ],
    }),
  ],
})

Credits

All credits go to these open-source works and resources

• Radix UI - https://github.com/radix-ui/primitives
• Radix Vue - https://github.com/radix-vue/radix-vue
• Naïve UI - https://github.com/tusen-ai/naive-ui
• Kobalte - https://github.com/kobaltedev/kobalte
• Oku UI - https://github.com/oku-ui/primitives
• Headless UI - https://github.com/tailwindlabs/headlessui
• Melt UI - https://github.com/melt-ui/melt-ui
• vueuse - https://github.com/vueuse/vueuse
• Anu - https://github.com/jd-solanki/anu
• Floating UI - https://github.com/floating-ui/floating-ui
• primevue - https://github.com/primefaces/primevue
• Shadcn UI - https://github.com/shadcn-ui/ui
• nuxt-ui - https://github.com/nuxt/ui
• nuxt-ui-pro - https://github.com/nuxt-ui-pro