Skip to content

The React Native Component Registry

Copy-paste components you own. Styled with NativeWind or Uniwind. Installed with one command.
npx github:truongnat/rnui#cli init
64Components
2Styling engines
7Brand themes
0Runtime lock-in

Own your components.

RNUI is not a component library you import — it’s a registry you copy from. Every component lands in components/ui/ inside your project. Your code, your tokens, your changes. No upstream package to fight.

Copy-paste, owned

Source files land in your repo via npx shadcn add. Modify anything — there is no node_modules boundary.

Two styling engines

One shared component source works with both NativeWind v4 and Uniwind. Pick your engine at init, switch later.

Mobile-first

App Bar, Bottom Navigation, Speed Dial, Segmented Control, OTP input, Drawer — patterns built for iOS and Android, not ported from web.

Brand theming

7 generated brand presets swap your global.css semantic tokens. add theme-matcha and the whole app re-skins.

Real dark mode

Verified on-device: NativeWind .dark:root class mode and Uniwind @variant theme nesting, both driven by system appearance.

Skia charts

Bar, line, and donut charts rendered by React Native Skia — pinned to the Expo Go-compatible version.

From zero to component in two commands.

Terminal window
npx github:truongnat/rnui#cli init # engine deps + metro/babel + theme
npx github:truongnat/rnui#cli add button # → components/ui/button.tsx

No publish, no install — the CLI runs straight from git. Under the hood it wraps shadcn add, so the registry is fully compatible with the shadcn toolchain.

Also a classic library.

Prefer packages? The traditional install is still here — @truongdq01/ui, tokens, themes, and headless hooks.

Install packages

bun add @truongdq01/ui

Theming

Semantic + component tokens across brands: theming.

Headless hooks

Behavior, a11y, and gesture hooks: headless.