# Installation
URL: /docs/web/guide/installation

How to install and set up Docyrus UI components in your project.

## Prerequisites

Docyrus UI components are distributed via the shadcn registry. Before you start, make sure your project has shadcn/ui initialized.

If you haven't set up shadcn/ui yet, run the init command to create a `components.json` configuration file in your project root:

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

## Add the Docyrus registry

Add the Docyrus registry to your `components.json` file so the CLI knows where to fetch components from:

```json title="components.json"
{
  "registries": {
    "docyrus": {
      "url": "https://ui.docy.app/r"
    }
  }
}
```

## Add components

Install components using the **Docyrus CLI**:

```bash
# Install a component
npx @docyrus/cli add button

# Install a hook
npx @docyrus/cli add hooks-debounce

# Install a utility
npx @docyrus/cli add utils-cn

# Install multiple items at once
npx @docyrus/cli add button dialog hooks-debounce
```

The CLI reads your `components.json` configuration and installs the correct variant automatically.

## Import and use

Once installed, import the component from your local components directory and use it in your project:

```tsx title="app/page.tsx"
import { Button } from '@/components/docyrus/button';

export default function Home() {
  return (
    <div>
      
    </div>
  );
}
```

Components are installed as source code — you can freely modify, extend, or restyle them to fit your needs.