Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18.17 or later
npm, yarn, pnpm, or bun

Getting Started

Follow these steps to set up a new Next.js project and start using CappyUI components.

Create Next.js Project

Create a new Next.js application using the latest version:

npx create-next-app@latest my-app

Select the following configuration options:

Option	Recommended
TypeScript	Yes
ESLint	Yes
Tailwind CSS	Yes
`src/` directory	Yes
App Router	Yes
Turbopack	Yes
Import alias	Default (@/*)

Navigate to your project directory:

cd my-app

Install Dependencies

Install the core dependencies required for CappyUI components:

npm install framer-motion lucide-react clsx tailwind-merge

Core Dependencies

Package	Purpose
framer-motion	Animation library for smooth transitions
lucide-react	Consistent icon library
clsx	Conditional className utility
tailwind-merge	Merge Tailwind classes without conflicts

Optional Dependencies

Some components require additional packages:

# For AI Chat component (syntax highlighting)
npm install react-shiki shiki

# For additional icons
npm install react-icons

Set Up Utility Function

Create a utility file for the cn() helper function that merges Tailwind classes.

Create src/lib/utils.ts:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Add Components

You can add components using one of two methods:

Method 1: CLI Installation (Recommended)

Use the shadcn CLI to automatically install components:

npx shadcn@latest add https://uiregistry.cappychat.com/registry/calendar-current.json

This will:

Download the component source code
Install required dependencies
Place the component in src/components/ui/

Method 2: Manual Installation

Copy the component code from the documentation
Create a new file in src/components/ui/
Paste the component code
Install any required dependencies listed in the component docs

Start Development Server

Start your development server:

npm run dev

Your application will be available at http://localhost:3000

Usage Example

After installing a component, import and use it in your application:

import { CalendarCurrent } from "@/components/ui/calendar-current";

export default function Page() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">My Calendar</h1>
      <CalendarCurrent />
    </div>
  );
}

Project Structure

After setup, your project structure should look like this:

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/
│   │   └── ui/
│   │       └── [components here]
│   └── lib/
│       └── utils.ts
├── package.json
└── tailwind.config.ts

Troubleshooting

Components not styling correctly

Ensure Tailwind CSS is properly configured and your globals.css imports Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Animation not working

Verify that framer-motion is installed and imported correctly in the component.

TypeScript errors

Make sure you have the latest type definitions and your tsconfig.json includes the correct paths.

Installation

On this page