Installation

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

Prerequisites

To use Kibo UI components, you need a React framework initialized with Tailwind CSS. We highly recommend using Next.js (App Router).

1. Initialize Kibo

Run the Kibo initialization command in your project root to set up the registry, design tokens, and base utilities:

npx kibo init

2. Add Components

Browse our component registry and install exactly what you need. The actual source code will be downloaded directly into your project.

npx kibo add text-3d-flip
npx kibo add letter-3d-swap

3. Use the Component

Once added, the component is instantly available in your components/ui directory. You can import and use it like any other React component:

import { Text3DFlip } from "@/components/ui/text-3d-flip"

export default function Page() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <Text3DFlip text="Kibo UI" />
    </div>
  )
}