hyenastudio

Getting StartedInstallation

Installation

Get up and running with Hyena Studio in under 2 minutes.

Requirements

Hyena Studio components are built for the modern React + Tailwind stack. Make sure your project meets these requirements before getting started:

React 19 (or 18.3+)
TypeScript
Tailwind CSS 4
Next.js 15+ (App Router recommended, Pages Router supported)

Other React frameworks (Vite, Remix, Astro) work too — but our components are tested against Next.js first.

Quick Start

1. Initialise Hyena Studio in your project

Terminal

npx hyena-studio@latest init

The init command will:

Detect your project structure
Create hyena.config.json
Add cn() utility
Install dependencies (clsx, tailwind-merge, lucide-react, class-variance-authority)
Inject design tokens into globals.css
Verify Tailwind CSS 4 setup

You'll be asked a few questions:

Terminal

◇ Where is your global CSS file? (./app/globals.css)
◇ Where do you want components installed? (./components/ui)
◇ Where is your utils file? (./lib/utils.ts)
◇ Would you like to use CSS variables for colours? (yes)

2. Add components

Terminal

npx hyena-studio@latest add button

Add multiple components at once:

Terminal

npx hyena-studio@latest add button input dialog select toast

Or add the entire library:

Terminal

npx hyena-studio@latest add --all

3. Import and use

page.tsx

import { Button } from "@/components/ui/button"

export default function Page() {
  return <Button>Click me</Button>
}

That's it. You're building with Hyena.

CLI Reference

`hyena-studio init`

Scaffolds Hyena Studio into an existing project. Detects your framework, installs dependencies, and configures your project.

Terminal

npx hyena-studio@latest init

# Options:
#   --yes, -y       Skip prompts and use defaults
#   --cwd <path>    Run in a different directory

What it creates:

hyena.config.json

{
  "$schema": "https://hyena.studio/schema.json",
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

`hyena-studio add [components...]`

Add components to your project. Each component is installed as a source file you own and can modify.

Terminal

npx hyena-studio@latest add [component...]

# Options:
#   --all            Install all components
#   --overwrite      Overwrite existing files
#   --cwd <path>     Run in a different directory
#   --path <path>    Override the install path

Dependency resolution is automatic. If a component depends on another, both are installed:

Terminal

npx hyena-studio@latest add code-block
# Also installs: copy-button (dependency)

Terminal

npx hyena-studio@latest add data-table
# Also installs: table, badge, checkbox, button, dropdown-menu
# Peer dependency: @tanstack/react-table — you'll be prompted to install it

`hyena-studio list`

List all available components:

Terminal

npx hyena-studio@latest list

Available components (68):

accordion        combobox          form              popover           stepper
alert            command           frame             preview-card      switch
alert-dialog     context-menu      group             progress          table
autocomplete     copy-button       input             radio-group       tabs
avatar           data-table        input-group       scroll-area       textarea
badge            date-picker       input-otp         select            timeline
breadcrumb       dialog            kbd               separator         toast
button           divider           label             sheet             toggle
calendar         drawer            menu              skeleton          toggle-group
card             empty             meter             slider            toolbar
checkbox         field             modal             spinner           tooltip
checkbox-group   fieldset          navbar            code-block        -

`hyena-studio diff [component]`

Show what changed in a component since you installed it. Useful before deciding whether to update.

Terminal

npx hyena-studio@latest diff button

Design Tokens

The init command injects a set of CSS custom properties into your global stylesheet. These tokens control every visual property across all components — colors, radii, spacing, typography, and elevation.

globals.css

@layer base {
  :root {
    /* Colors — Brand */
    --color-primary: oklch(0.55 0.19 255);
    --color-primary-hover: oklch(0.60 0.19 255);
    --color-primary-active: oklch(0.50 0.19 255);
    --color-primary-soft: oklch(0.96 0.03 255);
    --color-on-primary: #ffffff;

    /* Colors — Semantic */
    --color-error: oklch(0.55 0.22 27);
    --color-warning: oklch(0.75 0.18 70);
    --color-success: oklch(0.65 0.19 155);

    /* Colors — Surface */
    --color-surface: #ffffff;
    --color-surface-container: #f8f8fa;
    --color-surface-container-high: #f0f0f3;
    --color-on-surface: #111111;
    --color-on-surface-muted: #6b6b76;
    --color-on-surface-subtle: #9d9daa;

    /* Colors — Outline */
    --color-outline: #e4e4e7;
    --color-outline-variant: #f0f0f3;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* Spacing */
    --spacing-0: 4px;
    --spacing-1: 8px;
    --spacing-2: 12px;
    --spacing-3: 16px;
    --spacing-4: 20px;
    --spacing-5: 24px;
    --spacing-6: 32px;

    /* Elevation */
    --elevation-1: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 2px -1px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.03);
    --elevation-2: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05);
  }
}

To override any token, edit the values directly in your globals.css. Or use Hyena Studio's visual editor to generate the full token set, then export:

globals.css

@layer base {
  :root {
    /* Override primary to your brand color */
    --color-primary: oklch(0.65 0.24 150);
    --color-primary-hover: oklch(0.70 0.24 150);
    --color-primary-active: oklch(0.60 0.24 150);
    --color-primary-soft: oklch(0.96 0.04 150);

    /* Override radius to sharp */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-2xl: 10px;
  }
}

Fonts

Geist — primary sans-serif font for all UI text. Weights 400, 500, 600.
Geist Mono — monospace font for code blocks, inline code, and tabular data. Weights 400, 500.
Cal Sans — display font for headings and marketing. Weight 600 only.

app/layout.tsx

import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import "./globals.css"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}>
        {children}
      </body>
    </html>
  )
}

Peer Dependencies

Most components have zero peer dependencies beyond React and Tailwind. A few advanced components require additional packages:

Component	Peer Dependency	Install Command
Chart	`recharts`	`npm install recharts`
Data Table	`@tanstack/react-table`	`npm install @tanstack/react-table`

Project Structure

After running init and adding a few components, your project will look something like this:

your-project/

├── app/
│   ├── globals.css          # Hyena tokens injected here
│   ├── layout.tsx           # Font setup
│   └── page.tsx
├── components/
│   └── ui/
│       ├── button.tsx       # Installed by: hyena-studio add button
│       ├── input.tsx        # Installed by: hyena-studio add input
│       ├── dialog.tsx       # Installed by: hyena-studio add dialog
│       └── ...
├── lib/
│   └── utils.ts             # cn() utility
├── hyena.config.json        # Hyena Studio config
├── package.json
├── tailwind.config.ts
└── tsconfig.json

Manual Installation

If you prefer not to use the CLI, you can set everything up manually.

1. Install dependencies

Terminal

npm install clsx tailwind-merge lucide-react class-variance-authority

2. Create the cn utility

lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

3. Add tokens to globals.css

Copy the full token block from the Design Tokens section above into your globals.css.

4. Copy component files

Browse the component source code in Hyena Studio, copy the files you need into your components/ui/ directory, and import them as usual.

FAQ

Can I use Hyena with Vite / Remix / Astro?

Yes. The components are standard React + Tailwind — they work anywhere React runs. The CLI auto-detects your framework. Next.js is the primary test target.

Can I use Hyena alongside shadcn/ui?

Yes. Both use the same components/ui directory pattern. Hyena components can coexist with shadcn components — just be mindful of naming conflicts.

Do I need Base UI / Radix UI?

No. Hyena components are built from scratch. No primitive library required.

Can I customise the components after installing?

That's the whole point. You own the source code. Edit anything.

How do I update a component?

Run npx hyena-studio@latest diff button to see what changed, then npx hyena-studio@latest add button --overwrite to pull the latest version.