Open source · MIT
Osuki UI
The component layer every Osuki app and kit is built on: 61 component modules, one theme, dark and light with equal care.
It was written for products that are read as much as they are tapped — dense screens, long lists, CJK text beside Latin text — and every default in it comes from that.
bun add @osuki-dev/ui The reference is a directory, not a website
Installing the kit puts the whole thing on your disk. It is available offline, it matches the version you actually resolved, and an agent working in your project can read it without being told where to look.
- docs/
- README.md what it is · the four rules
- getting-started.md install · peers · a first screen
- components.md 61 modules, grouped by job
- theme.md tokens · both modes · presets
- patterns.md seven runnable screens
- conventions.md what a review checks
- src/ the components, unbundled
- lib/ compiled output and types
- README.md the npm page
That is also why this page is short. A component reference maintained in two places is a component reference that disagrees with itself by the second release — so the only copy lives beside the code it describes.
Four rules
They are the part worth knowing before writing a line against the kit. Everything else in it follows from them.
-
Instead of color: '#FF5A4A'write colors.primaryA hex value in application code is a bug that only appears in the colour mode you are not looking at.
-
Instead of padding: 12write theme.spacing.mdThe scale is what keeps a screen assembled from six components looking like one screen.
-
Instead of height: 32write height: 44Components hold the touch target; the layouts around them can defeat it.
-
Instead of import { Text } from 'react-native'write import { Text } from '@osuki-dev/ui'React Native’s own does not carry the line height CJK needs, and the two look identical in an English screenshot — which is how a Japanese screen ends up with clipped descenders three releases later.