Usage

Learn how to use MonoLab UI components in your project.

How It Works

MonoLab UI is a copy-paste component library. Unlike traditional packages, you don't install components—you copy them directly into your codebase. This gives you complete control and zero dependency overhead.

Step by Step

Browse Components

Visit the components page and find the component variant you need.

Copy the Code

Hover over any component variant and click the copy button in the top-right corner. The complete component code will be copied to your clipboard.

Create a Component File

Create a new file in your components directory and paste the code:

components/ui/Button.tsxtsx

// components/ui/Button.tsx
"use client"; // if using Next.js App Router with interactivity

export function Button({ children, variant = "default", ...props }) {
  // Paste component code here
}

Import and Use

Import the component wherever you need it:

app/page.tsxtsx

import { Button } from "@/components/ui/Button";

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

Recommended File Structure

We recommend organizing your components like this:

Project Structureplaintext

your-project/
├── components/
│   └── ui/
│       ├── Button.tsx
│       ├── Input.tsx
│       ├── Card.tsx
│       ├── Accordion.tsx
│       └── ...
├── lib/
│   └── utils.ts       # cn() utility function
└── app/
    └── globals.css    # CSS variables

Customizing Components

Since you own the code, you can modify anything. Common customizations include:

Colors — Change CSS variables or Tailwind classes
Sizing — Adjust padding, font sizes, and dimensions
Animations — Add or modify transitions
Behavior — Change props, add features, or simplify

💡 Pro Tips

•Keep a utils.ts file with the cn() function—most components use it
•Components with interactivity need "use client" in Next.js App Router
•You can combine multiple variants into a single component with props

Next Steps

Browse Components