ZUI

Search documentation

Find a page or a heading.

Introduction

React Native items for iOS and Android, drawn in shadcn's Vega or Nova style, for NativeWind or Uniwind.

zui native publishes React Native items for iOS and Android apps, installed with the shadcn CLI like the web items. Each item draws shadcn's Vega or Nova style with its neutral colours, and is published once per styling engine and style:

The CLI picks the path from the app's style, so an app names its engine and style once, in components.json, as Installation shows.

Components

Components lists every item. A component page is read under one engine, and the NativeWind / Uniwind switch in the header, or in its Menu on a narrow screen, moves it to the other.

Each component page opens on a live preview: the item's demo drawn by React Native for Web, in the style the header's picker shows and the site's light or dark mode. Its Code tab holds the demo's source. A web build can differ from a device in fonts, shadows and gestures, so check an item on iOS and Android before relying on a detail the preview shows.

To see a demo on a phone, set the Platform picker beside the preview's tabs to Native. The preview then shows a QR code and a link that open that demo in Expo Go, in the style the header's picker shows: scan the code with the iPhone camera, or from Expo Go on Android. The site remembers the choice for every component page until you set it back to Web. Install the Expo Go release named under the code, because an Expo Go for another SDK does not load the demo. The demos are published by the site's deploy, so a demo added since the last deploy is not on the phone yet.

macOS and Windows

zui native targets iOS and Android only. A macOS or Windows app uses the web items through Electron.