A design system in a box.
hip-ui.tngl.io/docs/introduction
add readme
+93
+93
README.md
+93
README.md
···
1
+
# Hip UI
2
+
3
+
Hip UI is a copy-and-own design system for modern React applications.
4
+
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.
5
+
6
+
Inspired by tools like [shadcn/ui](https://ui.shadcn.com/docs), Hip UI focuses on shipping application-ready building blocks, not just isolated inputs and buttons.
7
+
The system is built around [React Aria](https://react-spectrum.adobe.com/react-aria/) for accessibility and [StyleX](https://stylexjs.com/) for styling and tokens.
8
+
9
+
## Why Hip UI
10
+
11
+
- Copy components into your codebase and customize them freely.
12
+
- Build on accessible React Aria primitives.
13
+
- Use StyleX-based tokens for color, spacing, radius, shadow, typography, and motion.
14
+
- Start with foundational primitives and scale up to full application layouts.
15
+
- Explore a broad component set that includes forms, overlays, navigation, data display, and page structure.
16
+
17
+
## Documentation
18
+
19
+
The docs live in this repository and are organized into foundations, components, and showcases.
20
+
21
+
- [Docs app](./apps/docs)
22
+
- [Introduction](./apps/docs/src/docs/introduction.mdx)
23
+
- [Foundations](./apps/docs/src/docs/foundations)
24
+
- [Components](./apps/docs/src/docs/components)
25
+
- [Showcases](./apps/docs/src/docs/showcase)
26
+
27
+
To run the docs locally:
28
+
29
+
```bash
30
+
pnpm install
31
+
pnpm --filter docs dev
32
+
```
33
+
34
+
Then open [http://localhost:3000](http://localhost:3000).
35
+
The root route redirects to the introduction page.
36
+
37
+
## Quick Start
38
+
39
+
Install dependencies for the monorepo:
40
+
41
+
```bash
42
+
pnpm install
43
+
```
44
+
45
+
Start all development apps:
46
+
47
+
```bash
48
+
pnpm dev
49
+
```
50
+
51
+
Scaffold Hip UI components into your own project with the CLI:
52
+
53
+
```bash
54
+
pnpx hip-ui install --all
55
+
```
56
+
57
+
Or install individual components as you need them:
58
+
59
+
```bash
60
+
pnpx hip-ui install button
61
+
pnpx hip-ui install typography
62
+
pnpx hip-ui install flex
63
+
pnpx hip-ui install content
64
+
pnpx hip-ui install tooltip
65
+
```
66
+
67
+
## Monorepo Layout
68
+
69
+
- `packages/hip-ui` - the core component source and CLI used to scaffold components.
70
+
- `apps/docs` - the documentation site for foundations, components, and showcases.
71
+
- `apps/example` - a small example app for testing components in an app context.
72
+
- `packages/typescript-config` - shared TypeScript configuration used across the workspace.
73
+
74
+
## Common Commands
75
+
76
+
```bash
77
+
pnpm dev
78
+
pnpm build
79
+
pnpm check
80
+
pnpm check-types
81
+
pnpm lint
82
+
```
83
+
84
+
## What You Will Find In The Docs
85
+
86
+
- Foundations for tokens such as colors, spacing, radius, shadow, typography, and theming.
87
+
- Component documentation covering layout, content, navigation, form controls, overlays, collections, and status UI.
88
+
- Showcase pages that demonstrate how Hip UI can be used to build complete interfaces.
89
+
90
+
## Development Notes
91
+
92
+
This repository is organized as a `pnpm` workspace and uses `turbo` for multi-package tasks.
93
+
The docs app is built with Vite and MDX, while the component package contains the install CLI and the source for the design system itself.