Skip to content
  • Introduction
    nativecn is shadcn for Expo apps: Components you copy into your app and own, built so AI agents can build and verify whole mobile apps.
  • Installation
    Create a new Expo app with nativecn, or add nativecn to an existing one.
  • components.json
    The project file that records your Preset, Structure, aliases and agents.
  • CLI
    Every nativecn-cli command and flag: init, create, add, agents and mcp.
  • Changelog
    What changed in each nativecn release.
  • Theming
    Tokens, Colour Roles, Scale, Scheme, createStyles and fonts.
  • Presets & Styles
    Style, Base Colour, Accent Colour, Radius and fonts: chosen once, baked into your code.
  • Folder structure
    Flat and feature Structures, Destinations and the placement rule.
  • AI agents
    Rules, Skills, the nativecn MCP server, the Plugin and the Visual QA Loop.
  • Alert
    Alert, AlertTitle and AlertDescription: an inline message with Variants (default, destructive, success, warning, info), each with a default icon.
  • Avatar
    Round user image (expo-image) with fallback initials, in sizes sm, md and lg.
  • Badge
    Small status label with Variants default, secondary, outline, destructive, success and warning.
  • Button
    Button with Variants (primary, secondary, outline, ghost, destructive, link), Sizes, an icon slot, loading and status; icon-only requires aria-label.
  • Card
    Card surface with CardHeader, CardTitle, CardDescription, CardContent and CardFooter; onPress makes the whole card pressable.
  • Checkbox
    Checkbox with an optional label, controlled or uncontrolled, an indeterminate (mixed) state and a haptic tick.
  • Chip
    Chip (plain, toggle or removable, with an optional icon) and ChipGroup (single or multiple choice on the SelectionGroup Primitive), with a haptic tick.
  • Container
    Wraps a Screen: safe-area edges, scrolling, keyboard avoidance, Token padding and a max content width.
  • Drawer
    Drawer panel content for Expo Router's drawer (expo-router/drawer): DrawerContent, DrawerHeader, DrawerSection, DrawerItem (label, icon, href, badge; active from the current route) and DrawerFooter.
  • Empty State
    What a Screen or list shows when there is nothing to show yet: an icon, a title, a description and an action.
  • FormField
    Lays out a control with its Label, description and error, and links them for screen readers ("Email, text field, Enter a valid email").
  • Icon
    Every glyph: a Lucide icon at a Token size in a Colour Role, decorative unless labelled.
  • Input
    Single-line text field with Sizes, a leading icon, error/success status, a focus ring and an automatic Show/Hide password toggle.
  • InputOTP
    One-time code field: one hidden input drives N cells; numeric keyboard, SMS/Keychain autofill, paste, onComplete, error/success status and secure.
  • Label
    A field's visible label in the label type Variant, with a required marker read as "required".
  • List
    Settings-style rows: ListSection, ListSectionHeader, ListSectionFooter and ListItem (title, description, icon, trailing, chevron, destructive, onPress); FlashList-safe.
  • Progress
    A horizontal progress bar: a value 0–100 that animates, or indeterminate; role progressbar with its value.
  • RadioGroup
    RadioGroup and RadioGroupItem: a single choice from a list on the SelectionGroup Primitive, vertical or horizontal, with a haptic tick.
  • SchemeSwitcher
    Theme switcher / dark mode toggle: System, Light and Dark as SegmentedTabs, or one icon button cycling through them. Calls setScheme, which persists the choice.
  • SearchField
    Search box with a search icon, an automatic clear (×) button, a loading spinner and onSubmit from the keyboard's Search key.
  • SegmentedTabs
    In-screen tabs (not navigation): segmented or underline Variants, an animated indicator, and only the selected tab's content rendered.
  • Separator
    A hairline divider, horizontal or vertical, decorative by default.
  • Skeleton
    A placeholder shape shown while content loads; pulses unless Reduce Motion is on, hidden from screen readers.
  • Slider
    Pick a number in a range by dragging or tapping (Gesture Handler + Reanimated), snapped to steps with a haptic tick; adjustable for screen readers.
  • Spinner
    An indeterminate loading indicator in a Colour Role, announced as busy; still under Reduce Motion.
  • Switch
    A themed on/off Switch, identical on iOS and Android, with an optional label, a thumb that slides (instant under Reduce Motion) and a haptic tick.
  • TabNavigation
    The bottom tab bar: the custom tabBar of an Expo Router JS Tabs Layout, with classic and floating Variants, per-tab icons and badges from Tabs.Screen options.
  • Text
    All text: the type ramp as Variants, text Colour Roles, alignment and the font-scaling switch.
  • Textarea
    Multi-line text field that grows from minRows to maxRows, with a character counter when maxLength is set.
  • Toast
    Sonner-style Toasts: a <Toaster /> in the root Layout and toast(), toast.success/error/info/warning/dismiss. At most 3 stacked, 4s auto-dismiss, swipe away, announced, above native modals.
  • Profile header + grouped sections
    Drawer panel with a profile header (avatar, name, email, plan Badge), labelled sections (Main, Workspace, Support) and Log out pinned in the footer.
  • SaaS workspace
    Drawer panel for a SaaS workspace: logo and name with a close button, an Accent Colour onboarding item with a 5 Steps Badge, main items, a bottom group (Notifications with a count, Settings, Docs, Help) and a footer with a team switcher and the user's avatar.
  • Cover header
    Drawer panel with a dark cover (large avatar, name, View profile, a bell with a count, an overflow button and a round + action), icon items active in Accent Colour text, a divider and text-only secondary items.
  • Classic centred
    A centred sign-in Screen: logo, email and password, Forgot password, an "or" divider, then Apple and Google, and a Sign up link.
  • Social-first hero
    A social-first sign-in Screen: a dark brand hero (logo, headline, subtitle, centred) above a panel where Apple and Google lead and "Continue with email" reveals the email form.
  • Email-first, two steps
    An email-first sign-in Screen in two steps: the email, then the password, with "Email me a code instead" switching to a 6-digit code (InputOTP). Lucide chevron-left Back buttons.
  • Classic single form
    A classic sign-up Screen on one scroll: Apple and Google on top, "or", then name, email and password, a terms Checkbox with Terms and Privacy Policy links, Create account, and a Sign in link.
  • Step-by-step wizard
    A sign-up wizard, one question per step under a Progress bar: email, name, password, then a 6-digit code (InputOTP). Lucide chevron-left Back buttons; the Continue button rides above the keyboard.
  • Social-first + verify
    A brand-led, passwordless sign-up Screen: the logo and headline centred above Apple and Google; "Sign up with email" reveals the email field, and Send code moves on to a 6-digit code (InputOTP).
  • announce
    Reliable screen-reader announcements on iOS and Android (Button and Input status, Toast, error, success and warning Alerts).
  • FocusChain
    Automatic Next/Done between fields in on-screen order; Done submits the form.
  • FormField context
    Links a field to its label, description and error for screen readers; passes status, disabled and required down.
  • Keyboard
    KeyboardProvider setup, a scroll view that keeps the focused field above the keyboard, and a footer that keeps a form's main button above it.
  • Portal
    Renders content above every Screen (above native modals on iOS), layered and safe-area aware.
  • Pressable
    Pressed look from a Style Slot, tap area extended to 48, no handlers while disabled or loading, optional haptics, role and aria-* states.
  • SelectionGroup
    Single or multiple choice within a group, with radio, tab or checkbox roles and selected states.
  • useControllableState
    One implementation of controlled and uncontrolled values for form controls.
  • useMotion
    Enter/exit animations and timing/spring configs from the motion Tokens; instant when Reduce Motion is on.
  • Theme
    Tokens, Scale, Colour Roles, ThemeProvider, createStyles and the navigation theme.

CLI

Every nativecn-cli command and flag: init, create, add, agents and mcp.

View as Markdown

nativecn-cli is the only published nativecn package and command. Run it with npx, so you always get the latest version:

npx nativecn-cli@latest <command>

init

Sets up nativecn in an existing Expo app, or creates a new app. create is an alias.

npx nativecn-cli@latest init [items...] [options]
npx nativecn-cli@latest create [name] [items...] [options]

Before anything else it checks for Expo SDK 57 or newer with Expo Router, and stops with the upgrade command if the app is older. In a folder without an app, or with --name, it creates one from the Starter; inside an app it runs Init. Items named after the command are installed straight away. See Installation for each step.

OptionDescription
-p, --preset <code>A Preset short code from the builder, such as a1Q17B.
--style <style>The Style: vega or nova.
--base <colour>The Base Colour, such as neutral or zinc.
--accent <colour>The Accent Colour, such as blue or violet.
--radius <radius>default, none, small, medium or large.
--font <font>The Body Font, such as inter or geist.
--heading-font <font>The Heading Font: inherit (the same as the Body Font) or a font id.
--folder-featUse the feature Structure ("structure": "feature").
--agents <list>Agents to set up, comma-separated: claude,codex,cursor,antigravity.
--qa-permissionsWrite opt-in auto-approve rules for the Visual QA Loop's device commands. Off by default.
-n, --name <name>The app name. Creates a new app.
-y, --yesSkip prompts. Anything not given uses its default.
-d, --defaultsUse the default Preset: Vega · neutral · neutral · default radius · Inter.
-f, --forceOverwrite existing configuration.
-c, --cwd <dir>The working directory. Defaults to the current directory.
-s, --silentPrint less output.

The option values are listed on Presets & Styles. Without a terminal, init behaves as if --yes were passed and prints every choice.

add

Adds Registry Items to your app.

npx nativecn-cli@latest add [items...] [options]
npx nativecn-cli@latest add button card
npx nativecn-cli@latest add sign-in-02 --route "(auth)/sign-in"

Items are names only: no URLs, local paths or namespaces. add needs a components.json; without one it stops with "Run npx nativecn-cli init first".

OptionDescription
-y, --yesSkip the confirmation prompt. On its own it never overwrites a changed file.
-o, --overwriteOverwrite existing files that differ.
-c, --cwd <dir>The working directory.
-a, --allAdd every Registry Item.
-p, --path <dir>Write Components to this folder instead of {components}, for this run only.
-s, --silentPrint less output.
--dry-runShow the plan (files and packages) and stop.
--diff [path]Compare your files with the latest upstream version. Never writes.
--view [path]Print the upstream file.
--feature <name>The Feature a Screen Block goes into, in feature mode.
--route <path>The route file to create for a Screen Block, such as (auth)/sign-in.

What add does

  1. Reads components.json for your Style, aliases and Structure.
  2. Fetches each item for your Style from the Registry, then its dependencies, recursively. Dependencies come first.
  3. Shows the plan: the files and packages. --dry-run stops here.
  4. Handles existing files: identical files are skipped silently, a changed file gets a prompt, -o overwrites all, and -y alone never overwrites.
  5. Writes each file to its Destination and rewrites imports to your aliases.
  6. Installs packages: Expo SDK packages with npx expo install, and the few recorded exceptions (zustand, react-hook-form, zod, @hookform/resolvers, lucide-react-native) at the version range the item pins.
  7. Adds any Config Plugins to app.json. With app.config.ts, it prints the line to add instead of editing your code.
  8. Prints a summary, saying clearly when a native rebuild is needed rather than a reload.

Screen Blocks

  • Routes. The CLI asks "Create a route?" with a suggested route (such as (auth)/sign-in), a custom one, or skip. Agents pass --route. With --yes and no --route, the suggested route is created only if the file doesn't exist; otherwise it is skipped and the three-line route file is printed. An existing route is never overwritten.
  • Feature mode. Pass --feature <name>. Without it, the Block's category is the default (auth for sign-in and sign-up) and the CLI prints where it went. Interactively, it lists your existing Features plus "new feature…".

What's installed

Like shadcn, nativecn tracks nothing: what is installed is whatever is on disk. Use --diff to see how your copy differs from the latest upstream before updating, and --view to read the upstream file.

agents

Writes or refreshes the Agent Kit (Rules, Skills and MCP config) for your agents.

npx nativecn-cli@latest agents [options]
OptionDescription
--agents <list>Agents to set up: claude,codex,cursor,antigravity.
--updateRefresh existing Rules, Skills and MCP config to the latest versions.
--qa-permissionsWrite opt-in auto-approve rules for the Visual QA Loop's device commands.

If you have edited the nativecn section of AGENTS.md, agents shows a diff before replacing it.

mcp

Runs the nativecn MCP server locally, over stdio. create, init and agents write this command into each agent's MCP config, so you rarely run it yourself.

npx -y nativecn-cli@latest mcp

The local server reads your project's components.json, so its answers fit your Style, Structure and routes. See the nativecn MCP server for its tools.

Environment variables

These exist for developing nativecn itself.

VariableDescription
NATIVECN_REGISTRY_URLFetch Registry Items from another Registry, such as a local build.
NATIVECN_STARTER_DIRBuild new apps from a local Starter folder instead of fetching it.