Inspired by shadcn/ui

​
Why Nativecn UI?

  • Beautifully Designed: With a focus on aesthetics, each component is carefully crafted to provide a great UI/UX experience.
  • Customizable: Modify components easily using Tailwind CSS classes.
  • Effortless Integration: Import components into your project as needed. No package installs.
  • TypeScript Integrated: Static typing for all components.

​
Installation

​
1. Create a new Typescript Expo project

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

​
2. Setup NativeWind for using Tailwind CSS classes

# Install dependencies
yarn add nativewind
yarn add --dev tailwindcss

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

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

​
3. Add nativecn-ui components

You can use our CLI:

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.

Avatar