Step-by-Step Installation

1. Set up Tailwind CSS

   First, ensure Tailwind CSS 4 is installed in your project:

   npm install -D tailwindcss

   Create a CSS file (e.g., styles.css) and set up Tailwind CSS with imports:

   @import "tailwindcss"; /* Configure Tailwind directly in CSS */ @config { content: ["*.html", "components/**/*.jsx", "app/**/*.{js,ts,jsx,tsx,mdx}"]; } /* Your other styles */

2. Add Catppuccin Theming

   Catppuccin Components uses CSS variables to apply its beautiful color themes to your application.

   Visit our theming page to explore and customize the theme variables

   Explore Theming Options

   Once you've added the theme variables, you can import them alongside Tailwind CSS in your stylesheet.

3. Install Components

   Choose one of the following methods to add Catppuccin Components to your project:

   Option A: Using the CLI (Recommended)

   The easiest way to get started is by using the shadcn-registry CLI to install components:

   pnpm dlx shadcn@latest add https://catppuccin.d14y.com/r/button.json

   Replace "button" with the component you want to install

   Option B: Manual Installation

   You can also copy the component code directly from our Components page and paste it into your project.

4. Configure Your Application

   Import and use the components in your application:

   import { Button } from "@/components/ui/button" export default function Page() { return ( <Button>Click me</Button> ) }