# orn-ui

> Fast, tree-shakeable React Native components.

Zero runtime dependencies — react, react-native and
react-native-safe-area-context are the only peers. Every
component page below has a Markdown version at the same URL plus ".md"
(e.g. /components/button.md): props table, install snippet and every
variant as runnable TSX, no HTML to parse.

Runs on Expo SDK 54, 55, 56 and 57 (react-native 0.81.5 / 0.83.10 /
0.85.3 / 0.86.2 respectively), and on bare React Native >=0.81 with
react >=19.1. No native modules, so it also runs inside Expo Go on all
of them.

⚠️ Read Getting Started first: every component must render inside a
<UIProvider> ancestor or it throws at runtime. This is not optional and
not shown in the per-component snippets below.

## Docs

- [Getting Started](https://orn-ui-docs.vercel.app/getting-started.md): install + required <UIProvider> setup — read this before using any component below.
- [Atomic Design](https://orn-ui-docs.vercel.app/atomic-design.md): why orn-ui exists, what the atoms/molecules/organisms split means, and how to apply it in any frontend project.
- [Typography](https://orn-ui-docs.vercel.app/typography.md): Title, Subtitle, Body, Caption — one shared install, used together in one example.
- [Tokens](https://orn-ui-docs.vercel.app/tokens): spacing, radius, font size and duration scales.
- [Full reference](https://orn-ui-docs.vercel.app/llms-full.txt): every page below, concatenated into one file.
- [Español](https://orn-ui-docs.vercel.app/es/): same site and same component pages, Spanish UI labels.

## Components

- [Button](https://orn-ui-docs.vercel.app/components/button.md): Atom — orn-ui
- [IconButton](https://orn-ui-docs.vercel.app/components/icon-button.md): Atom — orn-ui
- [Input](https://orn-ui-docs.vercel.app/components/input.md): Atom — orn-ui
- [Checkbox](https://orn-ui-docs.vercel.app/components/checkbox.md): Atom — orn-ui
- [Badge](https://orn-ui-docs.vercel.app/components/badge.md): Atom — orn-ui
- [Card](https://orn-ui-docs.vercel.app/components/card.md): Atom — orn-ui
- [Divider](https://orn-ui-docs.vercel.app/components/divider.md): Atom — orn-ui
- [Avatar](https://orn-ui-docs.vercel.app/components/avatar.md): Atom — orn-ui
- [Image](https://orn-ui-docs.vercel.app/components/image.md): Atom — orn-ui
- [Gradient](https://orn-ui-docs.vercel.app/components/gradient.md): Atom — orn-ui
- [Spinner](https://orn-ui-docs.vercel.app/components/spinner.md): Atom — orn-ui
- [Skeleton](https://orn-ui-docs.vercel.app/components/skeleton.md): Atom — orn-ui
- [Transition](https://orn-ui-docs.vercel.app/components/transition.md): Atom — orn-ui
- [ShinyText](https://orn-ui-docs.vercel.app/components/shiny-text.md): Atom — orn-ui
- [EmptyState](https://orn-ui-docs.vercel.app/components/empty-state.md): Atom — orn-ui
- [KeyValueRow](https://orn-ui-docs.vercel.app/components/key-value-row.md): Atom — orn-ui
- [Fab](https://orn-ui-docs.vercel.app/components/fab.md): Atom — orn-ui
- [PressableScale](https://orn-ui-docs.vercel.app/components/pressable-scale.md): Atom — orn-ui
- [Stepper](https://orn-ui-docs.vercel.app/components/stepper.md): Molecule — orn-ui
- [OptionCard](https://orn-ui-docs.vercel.app/components/option-card.md): Molecule — orn-ui
- [InfoRow](https://orn-ui-docs.vercel.app/components/info-row.md): Molecule — orn-ui
- [FormActions](https://orn-ui-docs.vercel.app/components/form-actions.md): Molecule — orn-ui
- [AvatarHeader](https://orn-ui-docs.vercel.app/components/avatar-header.md): Molecule — orn-ui
- [SegmentedControl](https://orn-ui-docs.vercel.app/components/segmented-control.md): Molecule — orn-ui
- [Steps](https://orn-ui-docs.vercel.app/components/steps.md): Molecule — orn-ui
- [SymmetricGrid](https://orn-ui-docs.vercel.app/components/symmetric-grid.md): Molecule — orn-ui
- [ThemeToggle](https://orn-ui-docs.vercel.app/components/theme-toggle.md): Organism — orn-ui
- [Modal](https://orn-ui-docs.vercel.app/components/modal.md): Organism — orn-ui
- [BottomSheet](https://orn-ui-docs.vercel.app/components/bottom-sheet.md): Organism — orn-ui
- [Select](https://orn-ui-docs.vercel.app/components/select.md): Organism — orn-ui
- [OptionWheel](https://orn-ui-docs.vercel.app/components/option-wheel.md): Organism — orn-ui
- [Timeline](https://orn-ui-docs.vercel.app/components/timeline.md): Organism — orn-ui
- [Alert](https://orn-ui-docs.vercel.app/components/alert.md): Organism — orn-ui
- [Screen](https://orn-ui-docs.vercel.app/components/screen.md): Organism — orn-ui
- [List](https://orn-ui-docs.vercel.app/components/list.md): Organism — orn-ui
- [SearchList](https://orn-ui-docs.vercel.app/components/search-list.md): Organism — orn-ui
- [Toast](https://orn-ui-docs.vercel.app/components/toast.md): Organism — orn-ui
- [DatePicker](https://orn-ui-docs.vercel.app/components/date-picker.md): Organism — orn-ui
- [DateField](https://orn-ui-docs.vercel.app/components/date-field.md): Organism — orn-ui
- [Wizard](https://orn-ui-docs.vercel.app/components/wizard.md): Organism — orn-ui
- [NavigationBar](https://orn-ui-docs.vercel.app/components/navigation-bar.md): Organism — orn-ui
- [ReorderableList](https://orn-ui-docs.vercel.app/components/reorderable-list.md): Organism — orn-ui
- [Slides](https://orn-ui-docs.vercel.app/components/slides.md): Organism — orn-ui
- [Chart](https://orn-ui-docs.vercel.app/components/chart.md): Organism — orn-ui