Documentation

Welcome to nativecn-ui

Learn how to use our premium React Native components to build beautiful mobile apps.

📦All Components10

Input

🎚️

Range Slider

Animated slider with step snapping and haptic feedback

🔘

Switch Toggle

Smooth animated toggle with spring physics

📅

Date Picker

Modal calendar picker with custom styling

Navigation

📱

Animated Tab Bar

Sliding indicator with smooth transitions and scale effects

🧭

Animated Bottom Navigation

Animated nav bar with floating style and active indicator

Loading

Skeleton Loader

Shimmer effect with pre-built variants for cards and lists

Button

🌈

Rainbow Button

Animated gradient border with SVG stroke animation

Floating Action Button

Expandable FAB menu with gradient background

Modal

📋

Dynamic Bottom Sheet

Auto-height modal with drag gestures and backdrop

Utility

📳

Native Haptics

Zero-dependency native haptic feedback solution.

The Premium Native UI Library

nativecn-ui is a collection of premium React Native UI components designed for developers who want full control over their code. Unlike traditional component libraries that hide logic in node_modules, we use a copy-paste approach – you own the code, you control the quality.

Why nativecn-ui?

⚡️Zero Dependencies

No massive npm packages to manage. Your bundle size stays small because you only include what you need.

🛡️Full Ownership

The code lives in your repo. Modify, extend, and twist it to fit your exact requirements without limitations.

📘TypeScript First

Complete type definitions for every prop and utility. Catch errors at compile time, not runtime.

🚀Production Ready

Battle-tested accessible components with 60fps animations, ready for your next big app launch.

How It Works

1

Browse

Find your component

2

Copy

Copy the source

3

Paste

Add to project

4

Customize

Make it yours