Installation

This writes components.json, creates your Tailwind entry stylesheet with the theme tokens, configures Metro for Uniwind and installs the base dependencies.

npx magic-native-ui@latest init

Import the stylesheet in your root layout — not in index.js, which breaks fast refresh. Overlays such as Dialog need no host component: they render in a React Native modal.

import '../global.css'

import { Stack } from 'expo-router'
import { SafeAreaProvider } from 'react-native-safe-area-context'

export default function RootLayout() {
  return (
    <SafeAreaProvider>
      <Stack />
    </SafeAreaProvider>
  )
}

Each component is copied into your project along with anything it depends on.

npx magic-native-ui@latest add button dialog card

Themes are Uniwind variants rather than a class on the root element, so there is no provider to add. Dark mode follows the device by default.

import { Uniwind } from 'uniwind'

Uniwind.setTheme('dark')   // or 'light', or 'system'