Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Mobilecn-UI/nativecn-ui
Beautiful and customizable React Native components
https://github.com/Mobilecn-UI/nativecn-ui
expo react-native shadcn-ui tailwindcss ui
Last synced: about 1 month ago
JSON representation
Beautiful and customizable React Native components
- Host: GitHub
- URL: https://github.com/Mobilecn-UI/nativecn-ui
- Owner: Mobilecn-UI
- License: mit
- Created: 2023-09-25T05:00:20.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-08T01:33:01.000Z (3 months ago)
- Last Synced: 2024-10-25T01:26:29.262Z (about 2 months ago)
- Topics: expo, react-native, shadcn-ui, tailwindcss, ui
- Language: TypeScript
- Homepage: https://nativecn.mintlify.app
- Size: 5.68 MB
- Stars: 970
- Watchers: 15
- Forks: 51
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shadcn-ui - React Native - React Native port of shadcn/ui (Ports / Portfolios)
README
# nativecn-ui
Beautiful and customizable React Native components, inspired by [shadcn-ui](https://github.com/shadcn-ui/ui). Built-in dark mode, CSS variables, and NativeWind support.
| Dark mode | Light mode |
| :-----------------------------------: | :------------------------------------: |
|  |  |
## Usage
### I have an Expo project, how do I get started?
First, initialize nativecn from your project's root directory.
```bash
npx nativecn-ui init
```
Then, you can start adding components.
```bash
npx nativecn-ui add Avatar
```
> **Tip**: run `npx nativecn-ui add -a` to add all components.
### How do I run this locally?
```bash
# Clone the repo
git clone [email protected]:Mobilecn-UI/nativecn-ui.git
cd nativecn-ui
# Install deps
yarn
# Run it with Expo
yarn start
```
## Components
- [x] [Avatar](components/Avatar.tsx)
- [x] [Badge](components/Badge.tsx)
- [x] [Button](components/Button.tsx)
- [x] [Card](components/Card.tsx)
- [x] [Checkbox](components/Checkbox.tsx)
- [x] [Dialog](components/Dialog.tsx)
- [x] [Input](components/Input.tsx)
- [x] [Progress](components/Progress.tsx)
- [x] [Radio Group](components/RadioGroup.tsx)
- [x] [Skeleton](components/Skeleton.tsx)
- [x] [Switch](components/Switch.tsx)
- [x] [Tabs](components/Tabs.tsx)
- [x] [Toast](components/Toast.tsx)
- [x] [Dropdown](components/DropDown.tsx)
- [x] [Select](components/Select.tsx)
- [ ] Alert (WIP)
- [ ] Form (WIP)
## Contributing
Check out the [contributing guide](https://github.com/Mobilecn-UI/nativecn-ui/blob/main/CONTRIBUTING.md)
## License
Distributed under the [MIT license](https://github.com/Mobilecn-UI/nativecn-ui/blob/main/LICENSE).