unstyled component for vue.
- 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.
pnpm install destyler
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(),
],
}),
],
})
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