A project inspired by shadcn/ui.

​
Why Nativecn UI?

  • Beautifully Designed: Components are designed with a focus on aesthetics, delivering a great UI/UX.
  • Customizable: Modify components easily using Tailwind CSS classes —no style needed.
  • Easy Integration: Import components into your project as needed. No package installs.
  • TypeScript-first: Static typing for all components.

​
Installation

1

Create a new Expo project

npx create-expo-app -t expo-template-blank-typescript
2

Set up [NativeWind](https://www.nativewind.dev/quick-starts/expo)

NativeWind allows you to style components using Tailwind CSS classes.

# Install dependencies
yarn add nativewind@^4.0.1 react-native-reanimated
yarn add --dev tailwindcss

# Create a tailwind.config.js file
npx tailwindcss init

Finally, add "nativewind/babel" to your babel.config.js file.

3

3. Add nativecn-ui components

Run the CLI to initialize your project and add components easily:

npx nativecn-ui init
npx nativecn-ui add Button

Or simply copy-paste from the components directory.

​
Examples

Light modeDark mode

​
Community and Contributions

Feel free to open PRs or report issues on our GitHub repository.

Dark mode