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. PortalHost must be the last child so overlays render above everything.

import '../global.css'

import { PortalHost } from '@rn-primitives/portal'
import { Stack } from 'expo-router'
import { SafeAreaProvider } from 'react-native-safe-area-context'

export default function RootLayout() {
  return (
    <SafeAreaProvider>
      <Stack />
      {/* Overlays such as Dialog render into this host. */}
      <PortalHost />
    </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'