Getting started

Copy-paste React components. Tailwind tokens, motion animations, no runtime package. You own every file.

Requirements

React 19 (or 18)
Tailwind CSS 4
Node 18+
TypeScript project with @/* path alias (or run the CLI — it rewrites imports)

Install peer deps:

bash

npm i motion lucide-react

Install with the CLI

The myhippo CLI fetches component source from the registry, rewrites imports to match your project layout, and writes files into your repo. Nothing stays onnode_modules — every file is yours to edit.

Clone everything

Pulls all components into components/ui/ plus helpers (cn,hooks,anchor) into lib/.

bash

npx myhippo clone

Add specific components

Pass one or more slugs. Helpers are always included so imports resolve.

bash

npx myhippo add button card dialog

Update or remove

update redownloads and overwrites. remove deletes the component file (helpers stay).

bash

npx myhippo update button dialog

bash

npx myhippo remove dialog

Config (hippo.json)

On first run the CLI asks where to put files. Choose default (components/ui and lib) or custom (pick folders). It writes hippo.json at the repo root:

json

{
  "components": "components/ui",
  "lib": "lib"
}

Edit this file anytime. The CLI rewrites @/lib/* and @/components/ui/* imports to relative paths matching your config.

Install a theme

Themes are CSS-variable presets. The CLI prompts for your global CSS file, then writes Tailwind 4 imports, the theme variables, and the @theme inline mapping.

bash

npx myhippo theme midnight

Available: midnight, graphite, claude, sunset, ocean, forest, nord, dracula, mocha, sakura, solarized, monokai.

Agent skill

Install a component-aware skill for Claude Code, Codex, OpenCode, or Cursor. Your agent learns the registry and can add or edit hippo-ui components for you.

bash

npx myhippo skill hippo-ui

Manual install

Skip the CLI? Open any component page in the docs and copy the source into components/ui/<name>.tsx. Add this helper at lib/cn.ts:

tsx

// lib/cn.ts
export function cn(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(" ");
}

Use it

Import from your local path. Every component is a plain React component — no provider, no wrapper.

tsx

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

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

Theme tokens

Components read CSS variables — --background, --primary, --muted, --border, and more. Install a theme preset with npx myhippo theme <name>, or define your own in app/globals.css. Toggle dark mode with a .dark class on any ancestor.

You own the code

Everything lands in your repo. No package upgrades, no breaking changes, no wrapper API. Rename, refactor, delete — the code is yours.