Getting Started
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.