Introduction
Magic Native UI is a set of 17 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
Compiles Tailwind v4 classes into native styles, so one className works on iOS, Android and web.
Overlays and form controls are built on Pressable, Modal and the platform accessibility props — no behaviour library.
Defines component variants, exactly as it does on the web.
What differs from the web
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>.
Use active: and disabled: variants. hover:, before: and after: do not exist.
Layouts use flexbox. grid-* utilities are not available on native.
import { Button } from '@/components/ui/button'
import { Text } from '@/components/ui/text'
export function SaveButton() {
return (
<Button onPress={save}>
<Text>Save changes</Text>
</Button>
)
}