Installation

Learn how to add nativecn-ui components to your project.

Installation Methods

Copy & Paste Approach

The simplest way to use our components is to copy them directly into your project. This gives you full ownership and control over the code.

1

Browse Components

Go to the Components page and select a component.

2

Copy Code

Click the "Copy Code" button on the component detail page.

3

Create File

Create a file (e.g., components/ui/Button.tsx) and paste the code.

Optional Dependencies

While our components are designed to be dependency-free, some complex interactions work better with these packages.

Optional Dependencies

While our components are designed to be dependency-free, some complex interactions work better with these packages.

Animations

For complex layout transitions

npm i react-native-reanimated

Gestures

For swipeables and drag interactions

npm i react-native-gesture-handler

Vectors

For SVG paths and icons

npm i react-native-svg

TypeScript Configuration

Ensure your tsconfig.json has these settings for the best developer experience.

tsconfig.json
{
  "compilerOptions": {
    "strict": true,            // Enable strict type checking
    "jsx": "react-native",     // Handle JSX validation
    "moduleResolution": "bundler",
    "paths": {
      "@/*": ["./src/*"]       // Optional: Path aliases
    }
  }
}

Common Errors

  • React Native version mismatch (ensure 0.70+)
  • Missing peer dependencies

Styling Tips

  • Check your font configuration
  • Update constants.ts for your theme
Getting StartedCustomization