Getting started

Installation

kora-ui ships prebuilt ESM + CJS bundles. react and react-dom are peer dependencies (React 18+).

Install the package

Pick your package manager.

npm install kora-ui
# or
pnpm add kora-ui
# or
yarn add kora-ui

Expose kora-ui to Tailwind

Add kora-ui's built output to Tailwind's content array so its utility classes are scanned.

// tailwind.config.ts
import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/kora-ui/dist/**/*.{js,mjs,cjs}",
  ],
} satisfies Config;

(Optional) Enable the electric palette

Import the palette once — all `bg-electric-*`, `text-electric-*`, `border-electric-*`, and `ring-electric-*` utilities become available.

/* app/globals.css */
@import "tailwindcss";
@import "kora-ui/styles/electric.css";

Preview all 187 tokens on the palette page.

Use a component

That's it. Import and render.

import { Button } from "kora-ui";

export default function Example() {
  return (
    <div className="flex gap-2">
      <Button variant="primary">Save</Button>
      <Button variant="secondary">Cancel</Button>
    </div>
  );
}