Getting started

Installation

skeehn is React-first but CSS-driven. Install the package, import the stylesheet once, and set a theme. Prefer to own the source? Pull components in via the shadcn registry or the CLI instead.

Recommended

npm

# Components, hooks, the AI SDK layer, and blocks
npm i @skeehn/react

# Optional: the framework-agnostic CSS + dither engine
npm i @skeehn/core

Peer deps: React 18+. For the AI SDK drop-in also add ai and @ai-sdk/react.

Once

Import the CSS

// app/layout.tsx (or your global entry) — once, anywhere above your UI
import "@skeehn/core/styles.css";

@skeehn/core/styles.css is batteries-included (engine + all components + all themes). Need finer control? Import @skeehn/core/css (engine only) plus individual @skeehn/core/components/*.

Pick a look

Set a theme

// Set a theme on <html> (or any parent). Neutral light is the default.
<html data-theme="light">   {/* dark · default · terminal · brutal · grain · print · mardi-gras */}

Or generate one from your brand color with the theme generator.

Alternative

Own the source — registry or CLI

# Copy-paste ownership — works in any project with shadcn installed
npx shadcn@latest add https://ui.skeehn.com/r/button.json
npx shadcn@latest add https://ui.skeehn.com/r/chat-bubble.json
# every component lives at https://ui.skeehn.com/r/<name>.json

# Or the skeehn CLI — fetches inline content from the live registry
npx skeehn add chat-bubble
npx skeehn add all

See the CLI reference for all commands.

Next: Usage · AI SDK drop-in · Blocks