React Native

What changes when shadcn/ui runs on native, and why.

Same API

Components keep shadcn's exports, props, variants and composition (<Dialog><DialogTrigger asChild>…), and their classes are copied from shadcn's source. Where React Native works differently, they follow React Native.

What changes

•
Text is Text. Components that are text on the web (CardTitle, DialogDescription…) render Text. Components that take string children (<Button>Save</Button>) wrap them for you, and text styles on a component apply to the text inside it.
•
Events use React Native names: onPress, onChangeText, onValueChange, onCheckedChange.
•
Icons come from lucide-react-native. Render them with Icon, which takes its size and color from the component it's in: <Button><Icon as={PlusIcon} /> Add</Button>.
•
Components with hover: styles also get the matching active: style, since touch screens don't hover.
•
Tooltips and hover cards open on long-press on touch screens.
•
Web libraries are replaced with React Native implementations that keep shadcn's API: vaul (Drawer), cmdk (Command), embla (Carousel), react-day-picker (Calendar), recharts (Chart), react-resizable-panels (Resizable), sonner (Sonner) and input-otp (Input OTP).
Built with @astrawind/ui and @astrawind/css. Components ported from shadcn/ui (MIT).