# Installation

Set up your project and add craftUI components.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



## Prerequisites [#prerequisites]

craftUI components are installed with the shadcn CLI, so your project needs shadcn/ui set up first. If it isn't already, run:

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

This creates a `components.json`, sets up your CSS variables and adds the `cn` helper at `lib/utils.ts`. See the [shadcn/ui installation docs](https://ui.shadcn.com/docs/installation) for framework-specific guides.

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

Each component page shows its install command. It looks like this:

<InstallCommand name="<component>" />

The CLI will:

1. Install any npm dependencies the component needs.
2. Install any shadcn/ui primitives it builds on (for example `button`).
3. Write the component into your project, usually `components/ui/<component>.tsx`.
4. Rewrite its imports to match the aliases in your `components.json`.

## Use it [#use-it]

Import the component from your components folder:

```tsx
import { YourComponent } from "@/components/ui/your-component";

export function Demo() {
  return <YourComponent />;
}
```

## Browse all components [#browse-all-components]

The full list is on the [Components](/docs/components) page. The machine-readable index of every component is at [`/r/registry.json`](/r/registry.json).