Installation

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:

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:

{
  "registries": {
    "docyrus": {
      "url": "https://ui.docy.app/r"
    }
  }
}

Add components

Install components using the Docyrus CLI:

# 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:

import { Button } from '@/components/docyrus/button';

export default function Home() {
  return (
    <div>
      <Button variant="default">Click me</Button>
    </div>
  );
}

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