Introduction

Magic Native UI is a set of 12 components for Expo apps that follows the shadcn/ui model: nothing is installed as a component library. The CLI copies source files into your project, and from that moment the code is yours to edit.

How it is built

Uniwind

Compiles Tailwind v4 classes into native styles, so one className works on iOS, Android and web.

rn-primitives

Unstyled, accessible behaviour for overlays and form controls — the role Radix plays in shadcn/ui.

class-variance-authority

Defines component variants, exactly as it does on the web.

What differs from the web

No CSS inheritance

Text colour cannot cascade from a button to its label. Components publish text classes through TextClassContext instead, which is why labels are wrapped in <Text>.

No hover on device

Use active: and disabled: variants. hover:, before: and after: do not exist.

No CSS grid

Layouts use flexbox. grid-* utilities are not available on native.

save-button.tsx

import { Button } from '@/components/ui/button'
import { Text } from '@/components/ui/text'

export function SaveButton() {
  return (
    <Button onPress={save}>
      <Text>Save changes</Text>
    </Button>
  )
}

Install the CLI See a component