nativecn-ui icon indicating copy to clipboard operation
nativecn-ui copied to clipboard

Beautiful and customizable React Native components

nativecn-ui

Beautiful and customizable React Native components, inspired by shadcn-ui. Built-in dark mode, CSS variables, and NativeWind support.

Dark mode Light mode

Usage

I have an Expo project, how do I get started?

First, initialize nativecn from your project's root directory.

npx nativecn-ui init

Then, you can start adding components.

npx nativecn-ui add Avatar

Tip: run npx nativecn-ui add -a to add all components.

How do I run this locally?

# Clone the repo
git clone [email protected]:Mobilecn-UI/nativecn-ui.git
cd nativecn-ui

# Install deps
yarn

# Run it with Expo
yarn start

Components

  • [x] Avatar
  • [x] Badge
  • [x] Button
  • [x] Card
  • [x] Checkbox
  • [x] Dialog
  • [x] Input
  • [x] Progress
  • [x] Radio Group
  • [x] Skeleton
  • [x] Switch
  • [x] Tabs
  • [x] Toast
  • [x] Dropdown
  • [x] Select
  • [ ] Alert (WIP)
  • [ ] Form (WIP)

Contributing

Check out the contributing guide

License

Distributed under the MIT license.