A design system in a box.
hip-ui.tngl.io/docs/introduction
add readme
+106
-1
+105
packages/hip-ui/README.md
+105
packages/hip-ui/README.md
···
1
+
# hip-ui
2
+
3
+
`hip-ui` is a copy-and-own design system for modern React applications.
4
+
Instead of shipping opaque runtime components, it scaffolds production-ready component source directly into your app so you can customize everything.
5
+
6
+
Hip UI is inspired by tools like [shadcn/ui](https://ui.shadcn.com/docs), but it is built around [React Aria](https://react-spectrum.adobe.com/react-aria/) for accessibility and [StyleX](https://stylexjs.com/) for styling and design tokens.
7
+
8
+
[Read the docs.](https://hip-ui.tngl.io/docs/introduction)
9
+
10
+
## What You Get
11
+
12
+
- 80+ application-ready components across forms, overlays, navigation, layout, content, status, color, and date/time.
13
+
- Theme tokens for color, spacing, radius, shadow, typography, and motion.
14
+
- Full ownership of the generated source code in your own repository.
15
+
16
+
## How It Works
17
+
18
+
`hip-ui` is primarily a CLI.
19
+
You run the installer, choose where generated files should live, and Hip UI copies component files into your project.
20
+
21
+
On first run, the CLI will prompt you for:
22
+
23
+
- `componentDir`: where components should be written, such as `src/components`
24
+
- `packageManager`: `pnpm`, `npm`, or `yarn`
25
+
26
+
That configuration is then saved to `hip.config.json`.
27
+
28
+
## Quick Start
29
+
30
+
Run the CLI without permanently installing it:
31
+
32
+
```bash
33
+
pnpm dlx hip-ui install button
34
+
```
35
+
36
+
You can also use other package managers:
37
+
38
+
```bash
39
+
npx hip-ui install button
40
+
yarn dlx hip-ui install button
41
+
```
42
+
43
+
To install everything at once:
44
+
45
+
```bash
46
+
pnpm dlx hip-ui install --all
47
+
```
48
+
49
+
To add a few core building blocks one by one:
50
+
51
+
```bash
52
+
pnpm dlx hip-ui install theme
53
+
pnpm dlx hip-ui install flex
54
+
pnpm dlx hip-ui install typography
55
+
pnpm dlx hip-ui install button
56
+
```
57
+
58
+
## Optional Local Install
59
+
60
+
If you want to keep using the CLI in the same project, add it as a dev dependency:
61
+
62
+
```bash
63
+
pnpm add -D hip-ui
64
+
pnpm exec hip-ui install button
65
+
```
66
+
67
+
## Configuration
68
+
69
+
You can let the CLI create `hip.config.json` interactively, or check one in yourself:
70
+
71
+
```json
72
+
{
73
+
"componentDir": "src/components",
74
+
"packageManager": "pnpm"
75
+
}
76
+
```
77
+
78
+
## After Installation
79
+
80
+
Each install copies source files into your configured component directory and installs any required third-party packages.
81
+
For example, after installing `button`, you will typically import it from your local codebase rather than from `hip-ui` directly:
82
+
83
+
```tsx
84
+
import { Button } from "@/components/button";
85
+
86
+
export function Example() {
87
+
return <Button>Click me</Button>;
88
+
}
89
+
```
90
+
91
+
Adjust the import path to match your app's alias or folder structure.
92
+
93
+
## Best Fit
94
+
95
+
Hip UI works best when you want:
96
+
97
+
- a design system you can fully own
98
+
- accessible primitives built on React Aria
99
+
- StyleX-based tokens and component styling
100
+
- more than just basic form controls, including page and layout building blocks
101
+
102
+
## Notes
103
+
104
+
- Hip UI scaffolds TypeScript and TSX files, so your app should already support React and TypeScript.
105
+
- You will need to configure your bundler for stylex. We suggest using the [official plugins](https://stylexjs.com/docs/api/configuration/unplugin).