Hip UI#

Hip UI is a copy-and-own design system for modern React applications. It gives you a large set of production-ready components, layout primitives, and theme tokens that you can scaffold directly into your project instead of depending on a black-box component package.

Inspired by tools like shadcn/ui, Hip UI focuses on shipping application-ready building blocks, not just isolated inputs and buttons. The system is built around React Aria for accessibility and StyleX for styling and tokens.

Read the docs.

Why Hip UI#

Copy components into your codebase and customize them freely.
Build on accessible React Aria primitives.
Use StyleX-based tokens for color, spacing, radius, shadow, typography, and motion.
Start with foundational primitives and scale up to full application layouts.
Explore a broad component set that includes forms, overlays, navigation, data display, and page structure.

Development#

Quick Start#

Install dependencies for the monorepo:

pnpm install

Start all development apps:

pnpm dev

Scaffold Hip UI components into your own project with the CLI:

pnpx hip-ui install --all

Or install individual components as you need them:

pnpx hip-ui install button
pnpx hip-ui install typography
pnpx hip-ui install flex
pnpx hip-ui install content
pnpx hip-ui install tooltip

Common Commands#

pnpm dev
pnpm build
pnpm check
pnpm check-types
pnpm lint

Docs Development#

To run the docs locally:

pnpm install
pnpm --filter docs dev

Then open http://localhost:3000. The root route redirects to the introduction page.