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.

Bash

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

TypeScript

// 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;

Enable themes

Import the themes stylesheet once. Six themes become available (default, vintage, futuristic, electric, oceanic, botanical); switch by setting `data-theme` on `<html>`.

app/globals.css

CSS

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

HTML

<!-- Activate a theme (default follows system light/dark) -->
<html data-theme="vintage">

Explore every theme on the themes page.

Use a component

That's it. Import and render.

TSX

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>
  );
}