Installation

This guide walks you through setting up mcoli-ui in your project. Whether you're starting fresh or integrating with an existing codebase, we've got you covered.

Prerequisites

Before installing mcoli-ui, ensure your project meets these requirements:

• React 18+ in any framework supported by shadcn/ui (the examples use the Next.js App Router)
• Tailwind CSS v4 installed and configured
• TypeScript 5.7+ for full type safety
• Node.js 20.17+ to run the CLI

Step 1: Set Up shadcn/ui Base

mcoli-ui builds on the shadcn/ui foundation. If you don't have it yet:

• New Projects: Create with shadcn/create
• Existing Projects: Add via official installation

This establishes the core registry structure and configuration that mcoli-ui extends.

Step 2: Initialize mcoli-ui

Run the initialization command to add an mcoli-ui theme to your project:

The init command will:

• Check that shadcn/ui is initialized (it looks for components.json)
• Ask you to pick a theme, unless you pass one (init primary)
• Add the theme's CSS variables and base styles to your global CSS through shadcn
• Install the theme fonts, DM Sans and Plus Jakarta Sans

Choosing Your Theme

During initialization, select from our 5 signature themes:

Each theme comes with carefully crafted color ramps, semantic tokens, and component presets.

Step 3: Add Your First Component

Once initialized, add components to your project:

This injects the component source directly into components/ui, giving you full ownership and customization power.

Available Components

Check what's available in the registry:

Next Steps

Now that you're set up:

• Explore Components to browse available UI elements
• Learn about Theming to customize your theme
• Check GitHub for updates