Getting Started
Introduction
A UI library of customizable and easy-to-use React Native components.
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 mode | Dark mode |
---|---|
![]() | ![]() |
Community and Contributions
Feel free to open PRs or report issues on our GitHub repository.