shadcn-vue

Building upon the success of the shadcn/ui library, the Vue port developed by the Radix Vue team introduces a comprehensive suite of Tailwind CSS-based UI components specifically optimized for the Vue ecosystem. This extension offers developers an extensive collection of interactive elements, merging the design flexibility of Tailwind with the robust functionality needed for modern Vue applications. The library's modular architecture allows developers to select individual components or integrate the entire suite, depending on their project requirements. Through support frameworks like Vite, Nuxt, Astro, and Laravel, as well as manual installation options via package managers, developers have multiple paths to incorporating these powerful UI building blocks into their projects.

Introduction

shadcn-vue emerged from the shadcn/ui library, with the Vue port facilitated by the Radix Vue team. This extension integrates Tailwind CSS-based UI components specifically for the Vue ecosystem, offering developers a rich set of interactable elements without the overhead of a full component library.

The project supports multiple installation methods, including Vite, Nuxt, Astro, and Laravel, with manual installation also possible through package managers like pnpm, npm, and bun. These components range from basic elements like buttons and forms to complex structures such as data tables and navigation menus, providing comprehensive UI building blocks for Vue applications.

The development environment receives support through a Visual Studio Code extension maintained by the original shadcn team and unovue on GitHub. This extension streamlines development by integrating direct access to component documentation, automated component installation, and integrated documentation references right within the IDE.

Core components demonstrate the project's attention to detail and flexibility. The Button component, for instance, offers multiple styles including primary, secondary, destructive, outline, ghost, link, and icon variants. Similarly, the Form component combines VeeValidate functionality with Zod schema validation, offering both compositional and higher-order component approaches to form handling.

The project maintains a modular approach, allowing developers to select specific components rather than integrating a full library. This flexibility, combined with powerful validation features and detailed documentation, positions shadcn-vue as a valuable addition to the Vue ecosystem.

Installation and Setup

shadcn-vue offers multiple installation methods, including through Vite, Nuxt, Astro, and Laravel frameworks, as well as manual installation via package managers like pnpm, npm, and bun. Users can integrate components directly into their projects by selecting specific components rather than installing a full library.

For Vite projects, installation proceeds through the CLI:

pnpx shadcn-vue@latest add button

The project also provides a Visual Studio Code extension maintained by the shadcn team and GitHub's unovue repository, which supports component installation, documentation integration, and development aids directly within the IDE.

Manual installation requires importing specific components into the project. For example, to use the Button component:

// script setup lang="ts"

import { Button } from '@/components/ui/button'

// template

<Button>Button</Button>

The component supports multiple styles including primary, secondary, destructive, outline, ghost, link, and icon variants. Users can customize the Button component through various props and slot usage patterns.

Core Components

The Button component stands out with its versatility, offering variants for primary, secondary, destructive actions, as well as outlines, ghosts, links, and icon styles. For instance, to create an outline button with an icon, developers can use:

<Button variant="outline" size="lg">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">

<pre><code><path d="M23 22.5v-15c0-1.46-.59-2.81-1.75-3.95l-1.59-.75c-.73-.34-1.62-.56-2.5-.56s-1.76.22-2.5.56L7.5 10.5 5 12l-1.5 1.5c-.34.12-.62.24-.86.36-.72.31-1.27.61-1.75.86l-.75.15c-2.15 1.36-3.65 2.81-4.88 4.34a29.6 29.6 0 0 0-.41 2.02l.15.75c.13.63.33 1.22.6 1.75s.72.56 1.08 1.08a23.29 23.29 0 0 0 2.67 3.75L10 19.59l1.5 1.5c.34.12.62.24.86.36.72.31 1.27.61 1.75.86l.75.15c2.42-.72 4.68-1.75 6.75-3.08A27.36 27.36 0 0 0 23 22.5z"></path>
</code></pre>

</svg>

</Button>

The Form component serves as the primary interface for handling user input, combining VeeValidate functionality with Zod schema validation. It supports both compositional and higher-order component approaches to form handling. For example, to create a form using the composition API:

import { useForm } from 'vee-validate'

import { toTypedSchema } from '@vee-validate/zod'

import * as z from 'zod'

const formSchema = toTypedSchema(z.object({

email: z.string().email().min(2).max(50),

password: z.string().min(8).max(100),

}))

const form = useForm({

validationSchema: formSchema,

})

const onSubmit = form.handleSubmit((values) => {

console.log('Form submitted!', values)

})

The Form component structure consists of several key elements: FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage. For instance, to build a simple form field:

<FormField name="email" rules="required|email">

<FormItem>

<pre><code><FormLabel>Email</FormLabel>

<FormControl>

  <Input type="email" placeholder="user@example.com" />

</FormControl>

<FormDescription>This is your primary account identifier.</FormDescription>

<FormMessage />
</code></pre>

</FormItem>

</FormField>

This structure allows for detailed form validation and state management using either the composition API or higher-order components. The component automatically applies correct ARIA attributes based on field states and supports multiple schema validation libraries including Zod, Yup, and Valibot.

Form Validation

The form validation functionality in shadcn-vue combines VeeValidate's compositional capabilities with Zod's schema validation, providing a robust framework for handling user input. The core component is the <Form /> component, which manages the validation process and integrates seamlessly with all Reka UI components.

The validation system supports two primary approaches: the composition API and higher-order components (HOC). For developers preferring explicit control over form structure, the composition API offers fine-grained validation logic. This approach requires manually defining validation schemas using Zod and integrating them with VeeValidate's validation framework.

The form structure follows a consistent pattern, with the <FormField> component serving as the container for individual fields. Each field group consists of several sub-components: <FormItem>, <FormLabel>, <FormControl>, <FormDescription>, and <FormMessage>. This modular design allows developers to maintain clear separation between form logic and presentation.

To demonstrate a basic example, the following code creates a form schema using Zod:

import { toTypedSchema } from '@vee-validate/zod'

import * as z from 'zod'

const formSchema = toTypedSchema(z.object({

email: z.string().email().min(2).max(50),

password: z.string().min(8).max(100),

}))

The form itself is created using the useForm composable from VeeValidate:

import { useForm } from 'vee-validate'

import { toTypedSchema } from '@vee-validate/zod'

import * as z from 'zod'

const form = useForm({

validationSchema: formSchema,

})

const onSubmit = form.handleSubmit((values) => {

console.log('Form submitted!', values)

})

For developers who prefer a more declarative approach, the higher-order component pattern simplifies form creation. The following code demonstrates building a simple form using this pattern:

<form @submit="onSubmit">

  <FormField v-slot="{ componentField }" name="email">

    <FormItem>

      <FormLabel>Email</FormLabel>

      <FormControl>

        <Input type="email" placeholder="user@example.com" v-bind="componentField" />

      </FormControl>

      <FormDescription>This is your primary account identifier.</FormDescription>

      <FormMessage />

    </FormItem>

  </FormField>

</form>

In this example, the <FormField> component encapsulates the email input, applying the appropriate validation rules and managing its state. The component automatically applies correct ARIA attributes based on the field's validation status, ensuring accessibility without additional developer intervention.

Additional Resources

The project's official documentation serves as the primary resource for developers, covering everything from basic usage to advanced features. The documentation walks users through the installation process for various frameworks and provides detailed examples for common component usage.

For developers integrating shadcn-vue into their projects, the official documentation offers comprehensive guides. These include step-by-step instructions for installing individual components via the CLI or manual import, along with best practices for maintaining component documentation within the Visual Studio Code IDE.

The project's GitHub repository represents the code source for shadcn-vue. It features a robust collection of Vue components built with Radix Vue and Tailwind CSS, providing a rich set of reusable UI elements. The repository is meticulously organized, supporting multiple installation methods including Vite, Nuxt, Astro, and Laravel frameworks, as well as manual installation through package managers like pnpm, npm, and bun.

Component documentation within the repository and official guides is highly structured, featuring detailed examples and clear explanations. This includes comprehensive documentation for all core components, from simple Button and Form elements to more complex structures like Data Table and Navigation Menu. The official documentation consistently illustrates component usage patterns, prop options, and event handling, making it an invaluable resource for developers building Vue applications with shadcn-vue.