Installation

Obi UI is a copy-paste component library. There is no runtime package to install — the CLI copies source files directly into your project so you own the code entirely.

Choose your package manager

Create a Next.js project (skip if you have one)

npx create-next-app@latest my-app --typescript --tailwind --eslint

Obi UI requires React 18+ and Tailwind CSS v4. Any React framework works — Next.js is not required.

Install Tailwind CSS (if not already installed)

npm install tailwindcss @tailwindcss/postcss postcss

Run the Obi UI initialiser

npx @obi/ui init

This copies globals.css (with all design tokens) into your project and writes a minimal obi.config.json in your root.

Add components

npx @obi/ui add button

Each add command copies the component source into src/components/ui/ and installs any required npm dependencies automatically. You can add multiple at once:

npx @obi/ui add button input card form

Import and use

import Button from '@/components/ui/Button/Button';

export default function Page() {
  return <Button variant="primary">Get started</Button>;
}

Manual installation

Prefer not to use the CLI? Copy any component's source file directly from the docs — each component page has a "Copy" button. Then install its peer dependencies (listed under "Dependencies" on the same page) by hand:

npm install <peer-dependency>

The only global requirement is that your project imports globals.css(or equivalent CSS with the Obi design tokens defined). Without the tokens, the Tailwind utility classes used by components won't resolve to the right values.

Requirements

  • React — 18 or later
  • TypeScript — 5 or later (recommended)
  • Tailwind CSS — v4
  • Node.js — 18 or later (for the CLI)