Installation

Install only the components you need. Each one is added as source code in your project, ready to use and customize.

Prepare Your Project

Use a React project with Tailwind CSS. If shadcn is not configured yet, initialize it:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest init
Copy

Already using shadcn? Skip this step. For a new project, follow the setup guide for your framework.

Add a Component

Find a component in the component list, try its playground, and copy its installation command. To add the Button:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://vandor-ui.vercel.app/r/button.json
Copy

Choose npm, pnpm, yarn, or bun in the command tabs. The CLI adds the component source and installs its required dependencies.

If a file already exists at the installation target, review the overwrite prompt before replacing it. Keep a copy of any local changes you want to preserve.

Use It

Import the installed component and use it in your interface:

Copyimport { Button } from "@/components/ui/button";
 
export function Demo() {
  return <Button variant="outline">Save changes</Button>;
}

This example uses the default @/components/ui import path. If your project uses a different alias, use the path configured for your UI components.

Customize It

Use the component's props to change its appearance and behavior. For example, choose a Button size or turn off press feedback:

Copy<Button size="lg" whileTap={false}>
  Save changes
</Button>

Need a deeper change? Edit the installed source directly. The Button documentation includes live controls, examples, a props reference, and accessibility guidance.

Manual Setup

Prefer to copy the source yourself? Open a component's documentation, install the packages listed under Dependencies, and copy its Source into your UI folder. Then import it using your project's component path.