Documentation

Welcome to nativecn-ui

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

All Components19

Input

Range Slider

Animated slider with step snapping and haptic feedback

Switch Toggle

Smooth animated toggle with spring physics

Date Picker

An expandable date picker with smooth in-place layout transitions.

Custom Input

Multi-variant text input with validation, icons, and password toggle

Navigation

Animated Tab Bar

Sliding indicator with smooth transitions and scale effects

Liquid Action Tab Bar

Floating liquid glass tab bar with an expanding action menu grid and spring physics

Animated Bottom Navigation

Animated nav bar with floating style and active indicator

Forms

Dynamic OTP

A dynamic OTP input that transitions directly into a loading spinner.

Time Picker

A highly customized and smooth Time Picker component with a scroll-driven animated analog clock face.

Dynamic Upload

A dynamic file upload component with progress, pause, and cancel actions.

Loading

Skeleton Loader

Shimmer effect with pre-built variants for cards and lists

Image Skeleton

Premium grid loading animation with orbiting spotlights

Button

Rainbow Button

Animated gradient border with SVG stroke animation

Floating Action Button

Expandable FAB menu with gradient background

Gradient Button

A highly customizable premium gradient button

Modal

Dynamic Bottom Sheet

Auto-height modal with drag gestures and backdrop

Utility

Native Haptics

Zero-dependency native haptic feedback solution.

Display

Animated Image Carousel

Premium 3D animated carousel with depth, stack, and perspective layouts

Layout

Expandable Card

An ultra-smooth, scroll-aware card expansion layout inspired by the App Store.

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

Start Building Now