hip-ui

hip-ui is a copy-and-own design system for modern React applications. Instead of shipping opaque runtime components, it scaffolds production-ready component source directly into your app so you can customize everything.

Hip UI is inspired by tools like shadcn/ui, but it is built around React Aria for accessibility and StyleX for styling and design tokens.

Read the docs.

What You Get

• 80+ application-ready components across forms, overlays, navigation, layout, content, status, color, and date/time.
• Theme tokens for color, spacing, radius, shadow, typography, and motion.
• Full ownership of the generated source code in your own repository.

How It Works

hip-ui is primarily a CLI. You run the installer, choose where generated files should live, and Hip UI copies component files into your project.

On first run, the CLI will prompt you for:

• componentDir: where components should be written, such as src/components
• packageManager: pnpm, npm, or yarn

That configuration is then saved to hip.config.json.

Quick Start

To install everything at once:

pnpm dlx hip-ui install --all

Or add a few core building blocks one by one. In this situation it makes sense to install hip-ui as a dev dependency so as you install components they come from the same version of the library.

pnpm dlx hip-ui install theme
pnpm dlx hip-ui install flex
pnpm dlx hip-ui install typography
pnpm dlx hip-ui install button

MCP Server

To get the most out of using Hip UI in your editor install the MCP server. If you plan to use the MCP server it makes sense to install hip-ui as a dev dependency so the docs provided by it match your installed components.

Configuration

You can let the CLI create hip.config.json interactively, or check one in yourself:

{
  "componentDir": "src/components",
  "packageManager": "pnpm"
}

After Installation

Each install copies source files into your configured component directory and installs any required third-party packages. For example, after installing button, you will typically import it from your local codebase rather than from hip-ui directly:

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

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

Adjust the import path to match your app's alias or folder structure.

Best Fit

Hip UI works best when you want:

• a design system you can fully own
• accessible primitives built on React Aria
• StyleX-based tokens and component styling
• more than just basic form controls, including page and layout building blocks

Notes

• Hip UI scaffolds TypeScript and TSX files, so your app should already support React and TypeScript.
• You will need to configure your bundler for stylex. We suggest using the official plugins.