Introduction

At a glance

nori-ui is a set of primitives and controls that render identically on iOS, Android, and the web. Styled with NativeWind, themed via design tokens piped out of Figma, and indexed for AI tooling via /mcp and /llms.txt so a coding agent can answer "how do I use the Button?" without scraping HTML.

Try it

What's in the box

• A large set of components across primitives, layout, controls, inputs, overlays, feedback, and navigation. Each ships with a copy-paste demo, an auto-generated prop table, and a per-component bundle-size badge.
• Universal RN + Web — one codebase, two platforms. Every component renders through React Native primitives so <Button> is the same component in your Expo app and your Next.js site.
• Strict TypeScript — exactOptionalPropertyTypes, no any, fully typed prop tables that auto-extract from the source.
• Accessibility-first defaults — every interactive component ships with the right roles, labels, focus management, and keyboard navigation. Doors are open by default.
• Agent-friendly docs — every page is queryable via /mcp, downloadable as <page>.md or <page>.json, and indexed in /llms.txt. The MDX is what an LLM gets when you say "show me the Button docs."

Interactive explorer

These docs explain the API with focused, copy-paste examples. Storybook is the interactive counterpart: every variant, live controls, the a11y addon, and a measure-twice viewport for visual regression. Open it alongside the docs when you want to feel the component before you wire it up.

Start here

• Getting started — install and render your first component in under five minutes.
• Button — the flagship component; exercises every architectural axis (variants, sizes, slots, asChild, RSC-safety).
• Select — the most ambitious primitive: search, async pagination, virtualization, locale-aware sort, OptGroups.
• Dialog — focus trap, scroll lock, click-outside, escape close, RN Modal underneath.

Why "nori"?

Nori (海苔) is the dark, deeply-flavored seaweed that wraps sushi. The name nods to the brand's deep ocean-teal accent and the philosophy: thin layer, strong character, holds the rest together.