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.