# Installation

Add a Vandor UI component to your project and start using it.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



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

## Prepare Your Project [#prepare-your-project]

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

```bash
npx shadcn@latest init
```

Already using shadcn? Skip this step. For a new project, follow the [setup guide for your framework](https://ui.shadcn.com/docs/installation).

## Add a Component [#add-a-component]

Find a component in the [component list](/docs/components), try its playground, and copy its installation command. To add the Button:

```bash
npx shadcn@latest add https://vandor-ui.vercel.app/r/button.json
```

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 [#use-it]

Import the installed component and use it in your interface:

```tsx
import { 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 [#customize-it]

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

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

Need a deeper change? Edit the installed source directly. The [Button documentation](/docs/components/button) includes live controls, examples, a props reference, and accessibility guidance.

## Manual Setup [#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.