Skip to content
RNUI

Registry components

These components are installed as source code you own via the registry — the same model as shadcn/ui. They work with both styling engines: nativewind and uniwind.

Quick start

Section titled “Quick start”
Terminal window
npx github:truongnat/rnui#cli init            # one-time setup (engine deps, metro/babel, theme)
npx github:truongnat/rnui#cli add button      # install a component
npx github:truongnat/rnui#cli list            # show all items

Components

Section titled “Components”
  • Text — Typography primitives with shadcn-style variants (h1-h4, p, lead, muted, blockquote, code).
  • Button — Pressable button with variant + size styles via tailwind-variants slots.
  • Card — Card container with header/title/description/content/footer slots.
  • Input — Styled TextInput with shadcn defaults.
  • Label — Form label text.
  • Textarea — Multiline TextInput.
  • Checkbox — Pressable checkbox with lucide check icon.
  • Switch — Animated toggle built on RN Animated (no reanimated dep).
  • Radio Group — Context-based radio group + item.
  • Select — Modal-based option picker (wave 1; anchor popover later).
  • Separator — Horizontal/vertical divider line.
  • Skeleton — Pulsing placeholder via RN Animated.
  • Badge — Small status pill with tv() variants.
  • Avatar — Avatar + image + fallback with load-state handling.
  • Alert — Inline alert with icon, title, description.
  • Dialog — Modal dialog with title/description/footer slots.
  • Progress — Determinate progress bar.
  • Accordion — Vertically collapsing sections.
  • Tabs — Tab list/trigger/content with context.
  • Toggle — Two-state pressable.
  • Toggle Group — Single/multiple toggle group.
  • Collapsible — Trigger + expandable content.
  • Sheet — Bottom sheet via RN Modal slide.
  • Popover — Anchored overlay via measureInWindow + Modal.
  • Dropdown Menu — Anchored menu with items/labels/separators.
  • Toast — Provider + hook based transient notifications.
  • Slider — PanResponder slider — no gesture-handler dep.
  • Table — Flex-based table primitives.
  • Breadcrumb — Navigation breadcrumb row.
  • Pagination — Page navigation with siblings + ellipsis.
  • Command — Searchable command palette modal.
  • Alert Dialog — Confirm/cancel modal dialog (non-dismissable on backdrop).
  • Aspect Ratio — Constrains children to a fixed width/height ratio.
  • Scroll Area — ScrollView wrapper with themed defaults.
  • Tooltip — Press/long-press anchored hint bubble.
  • Context Menu — Long-press anchored menu (items, labels, separators).
  • Drawer — Edge slide-in panel with animated translate.
  • Carousel — Snap-scrolling horizontal pager with optional arrows.
  • Calendar — Month grid date picker.
  • Input OTP — Segmented one-time-code input over a hidden TextInput.
  • Form — Field wrapper: label, description and error message context.
  • App Bar — Top navigation bar with leading/back, title, and trailing actions.
  • Chip — Compact tag/filter element with selected and removable states.
  • FAB — Floating action button — sm/md/extended.
  • Segmented Control — iOS-style segmented option switcher.
  • Stepper — Horizontal step progress indicator with check states.
  • Rating — Star rating input/display.
  • Timeline — Vertical timeline with dots, connectors and per-item content.
  • Marquee — Infinite horizontal scrolling content via RN Animated.
  • Empty State — Placeholder for empty screens — icon, title, description, action.
  • Circular Progress — SVG ring progress with optional percent label.
  • Date Picker — Input trigger opening a calendar modal.
  • Snackbar — Transient bottom bar with optional action.
  • Autocomplete — Input with filtered dropdown suggestions.
  • Bottom Navigation — Tab bar with icon+label items.
  • Icon Button — Square icon-only button with variants.
  • Speed Dial — FAB expanding into labeled mini actions.
  • List Item — Row primitive: title, subtitle, leading, trailing, chevron.
  • Settings Menu — Grouped settings list built on list-item.
  • Chat List Item — Conversation row: avatar, name, preview, time, unread badge.
  • Message Input — Multiline input row with send button.
  • Chart — Skia-rendered charts: BarChart, LineChart, DonutChart + ChartLegend.
  • Data Table — Sortable table built on table primitives (tap header to sort).

Blocks

Section titled “Blocks”

Themes

Section titled “Themes”

Brand themes swap the semantic CSS variables in global.css:

Terminal window
npx github:truongnat/rnui#cli add theme-matcha
  • Butter (theme-butter) — Golden buttery surfaces with a blue accent
  • Chocolate (theme-chocolate) — Warm brown tones and cozy beige
  • Gothic (theme-gothic) — Atmospheric deep blue-gray, dark-first
  • Matcha (theme-matcha) — Earthy green, calm and organic
  • Neutral (theme-neutral) — Muted, minimal slate with a restrained blue accent
  • Stone (theme-stone) — Warm stone and slate tones
  • Y2K (theme-y2k) — Periwinkle body with holographic pink accents