shadcn-vue

This VSCode extension enables you to install shadcn/vue components directly from your IDE.

Initialize the Shadcn/Vue CLI

Install components

Choose a component to install from the list

Install multiple components

Choose components to install from the list

Open the Shadcn-Vue documentation

Navigate to a particular component's documentation page

Shadcn/Vue Snippets

Easily import and use shadcn-vue components with ease using snippets within VSCode. Just type cn or shadcn in your vue file and choose from an array of components to use.

How it works

How to use?

1. Components

For Alert component, type cni-alert to add imports in your vue file, and to use the component, use cnx-alert.

Similarly, for any other component, use cni-[component] to add imports and cnx-[component] to use.

// cni-alert
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

// cnx-alert
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components using the Shadcn/Vue VSCode extension.
  </AlertDescription>
</Alert>;

How to contribute?

Use this link - Snippet Generation to generate snippets and add/update them to the snippets folder that is located in the src accordingly.

Credits

All credits go to these amazing developers

• Shadcn UI for creating this beautiful project.
• Shadcn Vue for creating the Vue port of Shadcn UI.
• Radix Vue for doing all the hard work to make sure components are accessible.
• VueUse for providing many useful utilities.
• Suhel Makkad for creating the Shadcn UI VSCode extension.
• Neeraj Dalal for creating the Shadcn UI Snippets VSCode extension.