# Installation

How to install and use Monolith UI components in your project.

> 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).



Monolith UI is distributed as a [shadcn registry](https://ui.shadcn.com/docs/registry). You do not install it as an npm package. Instead, you use the `shadcn` CLI to pull the component code directly into your project, giving you full ownership of the implementation.

## 1. Project Setup [#1-project-setup]

First, ensure you have a modern React project (e.g., Next.js App Router) with Tailwind CSS v4 and the `shadcn` CLI initialized.

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

## 2. Add Foundations (Required) [#2-add-foundations-required]

Before adding individual components, you must configure your project with the Monolith Design System rules. This involves setting up the strict monochromatic palette, typography scale, and motion constraints.

Follow the guides in the **Foundations** section (e.g., Colors, Typography, Motion) to update your `globals.css` and `tailwind.config.ts`.

## 3. Install Components [#3-install-components]

Once your foundations are set, you can install any component from this registry using the CLI.

```bash
npx shadcn@latest add https://ui.manpuc.me/r/scroll-area.json
```

The CLI will automatically:

1. Download the component's source code (e.g., `scroll-area.tsx`) into your `components/ui` directory.
2. Install any required dependencies (like `radix-ui` primitives).
3. Update any internal imports.

## 4. Use in Your App [#4-use-in-your-app]

Import and use the component as normal:

```tsx
import { ScrollArea } from "@/components/ui/scroll-area";

export default function Page() {
  return (
    <ScrollArea className="h-[200px] w-[350px] border">
      <div className="p-4">
        <h4 className="mb-4 text-h3 text-foreground leading-none">Settings</h4>
        {/* Content */}
      </div>
    </ScrollArea>
  );
}
```