Vue 3 UI library based on shadcn vue.
In a nutshell, this library is just a wrap around radix-vue with some predefined tailwindcss classes and icons.
For documentation of how to use the components, please visit radix-vue for props and shadcn vue for basic example. Most likely the only ting you need is a good language server to help you with find definition and auto-completion. All the types (props and emits) are also exported in case you need to use them.
# You must have vue installed
pnpm add @removify/ui vue
# If you need data table
pnpm add @tanstack/vue-table
# If you want to use form
pnpm add vee-validate @vee-validate/zod zod
# If you want to use stripe elements
pnpm add @stripe/stripe-js
# If you want to use carousel
pnpm add embla-carousel-vue embla-carousel
# If you want to use sonner toast
pnpm add vue-sonner
# If you want to use drawer
pnpm add vaul-vue
# Install everything
pnpm add @removify/ui vue @tanstack/vue-table vee-validate @vee-validate/zod zod @stripe/stripe-js embla-carousel-vue vue-sonner vaul-vue
Next you need to either import the css or tell tailwind to include the files.
// main.ts
import '@removify/ui/index.css';
or
// tailwind.config.ts
import { RemovifyTailwindPreset as Removify } from '@removify/ui';
// Or you can install from @removify/tailwind-preset
// import Removify from '@removify/tailwind-preset';
import type { Config } from 'tailwindcss';
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './node_modules/@removify/ui/dist/*'],
presets: [Removify],
} satisfies Config;
pnpm install
# to develop
pnpm run dev
# to build javascript files
pnpm run build
pnpx shadcn-vue@latest add {component}
Due to radix's useId will cause mismatch in ssr, before the upstream migrate to vue 3.5 native useId
use below in ssr applications (nuxt):
<template>
<ConfigProvider>
... Your reset code
</ConfigProvider>
</template>
<script setup lang="ts">
import { ConfigProvider } from '@removify/ui/config';
</script>
I want to just use radix.
A: You can use radix directly, but you will have to add the tailwindcss classes and icons yourself.
- [ ] vue plugin to include all components. (A bit hesitate to do this as the name of the components might conflict with other libraries, e.g.
Button
)