UI Library

Vue 3 UI library based on shadcn vue.

In a nutshell, this library is just a wrap around reka-ui with some predefined tailwindcss classes and icons.

For documentation of how to use the components, please visit reka-ui 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.

Usage

# 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

import type { Config } from 'tailwindcss';

import { buildPreset } from '@removify/tailwind-preset';

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './node_modules/@removify/ui/dist/*'],
  presets: [buildPreset()],
} satisfies Config;

Usage

<script setup lang="ts">
import { Button } from '@removify/ui/button';
</script>

<template>
  <Button></Button>
</template>

or

<script setup lang="ts">
import * as Button from '@removify/ui/button';
</script>

<template>
  <Button.Button></Button.Button>
</template>

Development

pnpm install

# to develop
pnpm run dev

# to build javascript files
pnpm run build

To add a new component

pnpx shadcn-vue@latest add {component}

Known issue

Due to reka's useId will cause mismatch in ssr, before the upstream migrate to vue 3.5 native useId use below in ssr applications (nuxt):

<script setup lang="ts">
import { ConfigProvider } from '@removify/ui/config';
</script>

<template>
  <ConfigProvider>
    ... Your reset code
  </ConfigProvider>
</template>

QA

I want to just use reka.

A: You can use reka directly, but you will have to add the tailwindcss classes and icons yourself.

Work in progress

• [ ] 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)