Quick Start

The fastest way to start a new project with RootNative UI.

Create a new project

npx rootnative create

The CLI walks you through a few prompts:

? Template: Blank
? Project name: my-app
? Display name (shown on home screen): My App
? Package manager: npm
? Install dependencies? Yes

That's it. Start the dev server:

cd my-app
npx expo start

Templates

blank is the default — a single-screen app with no navigation library, which is the smallest thing that runs. Pick a different one with -t:

Template	What you get
blank (default)	One screen in App.tsx, ThemeProvider already wrapped around it. No router.
with-router	Expo Router file-based navigation — screens live in app/, with ThemeProvider in the root layout.

npx rootnative create my-app -t with-router

More templates may be added over time — npx rootnative create --help lists what the installed CLI supports.

What's in the template

The generated project is a ready-to-run Expo app with RootNative UI wired up. For blank:

my-app/
├── App.tsx               # Home screen, wrapped in ThemeProvider
├── index.js              # Expo entry point (registerRootComponent)
├── assets/               # Placeholder app icons and splash screen
├── app.json              # Expo config with your project name
├── babel.config.js
├── package.json
├── tsconfig.json
├── CLAUDE.md             # Points AI agents at the RootNative LLM docs
└── .gitignore

with-router swaps App.tsx and index.js for an app/ directory holding _layout.tsx (the root layout) and index.tsx (the home screen).

Where ThemeProvider lives

Every component reads the theme through context, so ThemeProvider is wrapped around your app for you. In blank that's App.tsx:

// App.tsx
import { ThemeProvider } from '@rootnative/core'
import { StatusBar } from 'expo-status-bar'

export default function App() {
  return (
    <ThemeProvider>
      <HomeScreen />
      <StatusBar style="auto" />
    </ThemeProvider>
  )
}

In with-router it's app/_layout.tsx, wrapping the Stack:

// app/_layout.tsx
import { ThemeProvider } from '@rootnative/core'
import { Stack } from 'expo-router'
import { StatusBar } from 'expo-status-bar'

export default function RootLayout() {
  return (
    <ThemeProvider>
      <Stack screenOptions={{ headerShown: false }} />
      <StatusBar style="auto" />
    </ThemeProvider>
  )
}

Home screen

The home screen demonstrates Typography and Card out of the box. Edit App.tsx (or app/index.tsx on with-router) to start building your app.

Options

You can also pass the project name directly:

npx rootnative create my-app

Skip all prompts with -y (uses the blank template, npm, auto display name, auto install):

npx rootnative create my-app -y

Pass . to scaffold into the directory you are already in, instead of a new subdirectory. The project name comes from that directory's name:

npx rootnative create .

See the CLI reference for every flag, and for what happens when the template meets a file that is already there.

Next steps

• Theming — customize colors, typography, and shape tokens
• CLI — add more components with npx rootnative add
• Components — browse all available components