Introduction

A UI library of beautiful and customizable React Native components.

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 mode	Dark mode

Community and Contributions

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