Installation

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

Monolith UI is distributed as a shadcn 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

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


$ pnpm dlx shadcn@latest init

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

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


$ pnpm dlx shadcn@latest add https://ui.manpuc.me/r/scroll-area.json

The CLI will automatically:

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

4. Use in Your App

Import and use the component as normal:

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>
  );
}

Introduction Components

On This Page

1. Project Setup 2. Add Foundations (Required)3. Install Components 4. Use in Your App