> ## Documentation Index
> Fetch the complete documentation index at: https://nativecn.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> A UI library of beautiful and customizable React Native components.

A project inspired by [shadcn/ui](https://ui.shadcn.com/).

## 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

<Steps>
  <Step title="Create a new Expo project">
    ```bash theme={null}
    npx create-expo-app -t expo-template-blank-typescript
    ```
  </Step>

  <Step title="Set up [NativeWind](https://www.nativewind.dev/quick-starts/expo)">
    NativeWind allows you to style components using Tailwind CSS classes.

    ```bash theme={null}
    # 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.
  </Step>

  <Step title="3. Add nativecn-ui components">
    Run the CLI to initialize your project and add components easily:

    ```bash theme={null}
    npx nativecn-ui init
    npx nativecn-ui add Button
    ```

    Or simply copy-paste from the [components directory](https://github.com/Mobilecn-UI/nativecn-ui/tree/main/components).
  </Step>
</Steps>

## Examples

|                                               Light mode                                              |                                               Dark mode                                              |
| :---------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: |
| ![](https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/example-light.png) | ![](https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/example-dark.png) |

## Community and Contributions

Feel free to open PRs or report issues on our [GitHub repository](https://github.com/Mobilecn-UI/nativecn-ui).