hipstersmoothie.com / hip-ui
A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

hip-ui / README.md
at main 1.8 kB view raw view code
Andrew Lisowski add docs url
b9259682

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.