Open-source UI registry for React Native & Expo. Discover, preview, inspect, and install production-ready UI blocks and screens directly into your project.
See the codeSee what people are saying (1)
README
RNBlocks
Production-ready React Native and Expo UI components, delivered as clean source code you own. Every block is standalone, responsive, and customizable without forcing a styling framework or runtime dependency.
Explore Registry · Live Preview · Documentation · Contributing · Security
Featured Components
| Component | Category | Preview | CLI Install Command |
|---|---|---|---|
| Floating Glassmorphic Docker | Navigation & Docks | Inspect | npx @rnblocks/cli add floating-docker |
| Interactive Calendar | Data Display & Scheduling | Inspect | npx @rnblocks/cli add interactive-calendar |
| Social OAuth Buttons | Authentication | Inspect | npx @rnblocks/cli add social-auth-buttons |
| SVG Gradient Trend Chart | Analytics & Data Viz | Inspect | npx @rnblocks/cli add trend-chart |
Why RNBlocks?
- 100% Source Code Ownership: You copy the component code into your repository. Modify styles, behavior, and layout directly in your codebase.
- Zero Runtime Dependencies: No wrapper contexts, no mandatory
ThemeProvider, no CSS-in-JS runtime engine. - Universal StyleSheet Primitives: Authored using standard
StyleSheet.createfor universal compatibility. Easily adaptable to NativeWind v4, Tamagui, or any styling solution. - Universal Mobile Compatibility: Tested across Expo (SDK 52+) and React Native CLI (0.76+ with New Architecture & TurboModules).
- One-Command CLI: Add components with a single command:
npx @rnblocks/cli add <block>.
Quick Start
Add a component directly into your project:
npx @rnblocks/cli add floating-docker
Or browse, preview, and copy components directly from the web registry at rnblocks.vercel.app.
Development
git clone https://github.com/Ashwin-Khowala/rnblocks.git
cd rnblocks
pnpm install
pnpm dev
Common Commands
| Command | Description |
|---|---|
pnpm dev | Run all applications and packages in watch mode |
pnpm build | Build web registry, documentation site, and CLI |
pnpm typecheck | Run TypeScript validation across all workspaces |
pnpm run validate:registry | Validate registry items against schema and file checks |
pnpm run generate:registry | Recompile registry.json and sync with web app |
Documentation
- Getting Started & Philosophy
- CLI Reference
- Styling & Customization Guide
- Creating a Block Guide
- Code & Engineering Standards
- Quality Standards Checklist
- Registry Schema Reference
- Architecture Overview
- Contributing Guidelines
- Security Policy
License
This project is licensed under the MIT License.
Contributors
75 commits
Similar repos
Languages
TypeScript
98.8%
Open-source UI registry for React Native & Expo. Discover, preview, inspect, and install production-ready UI blocks and screens directly into your project.
See the codeSee what people are saying (1)
README
RNBlocks
Production-ready React Native and Expo UI components, delivered as clean source code you own. Every block is standalone, responsive, and customizable without forcing a styling framework or runtime dependency.
Explore Registry · Live Preview · Documentation · Contributing · Security
Featured Components
| Component | Category | Preview | CLI Install Command |
|---|---|---|---|
| Floating Glassmorphic Docker | Navigation & Docks | Inspect | npx @rnblocks/cli add floating-docker |
| Interactive Calendar | Data Display & Scheduling | Inspect | npx @rnblocks/cli add interactive-calendar |
| Social OAuth Buttons | Authentication | Inspect | npx @rnblocks/cli add social-auth-buttons |
| SVG Gradient Trend Chart | Analytics & Data Viz | Inspect | npx @rnblocks/cli add trend-chart |
Why RNBlocks?
- 100% Source Code Ownership: You copy the component code into your repository. Modify styles, behavior, and layout directly in your codebase.
- Zero Runtime Dependencies: No wrapper contexts, no mandatory
ThemeProvider, no CSS-in-JS runtime engine. - Universal StyleSheet Primitives: Authored using standard
StyleSheet.createfor universal compatibility. Easily adaptable to NativeWind v4, Tamagui, or any styling solution. - Universal Mobile Compatibility: Tested across Expo (SDK 52+) and React Native CLI (0.76+ with New Architecture & TurboModules).
- One-Command CLI: Add components with a single command:
npx @rnblocks/cli add <block>.
Quick Start
Add a component directly into your project:
npx @rnblocks/cli add floating-docker
Or browse, preview, and copy components directly from the web registry at rnblocks.vercel.app.
Development
git clone https://github.com/Ashwin-Khowala/rnblocks.git
cd rnblocks
pnpm install
pnpm dev
Common Commands
| Command | Description |
|---|---|
pnpm dev | Run all applications and packages in watch mode |
pnpm build | Build web registry, documentation site, and CLI |
pnpm typecheck | Run TypeScript validation across all workspaces |
pnpm run validate:registry | Validate registry items against schema and file checks |
pnpm run generate:registry | Recompile registry.json and sync with web app |
Documentation
- Getting Started & Philosophy
- CLI Reference
- Styling & Customization Guide
- Creating a Block Guide
- Code & Engineering Standards
- Quality Standards Checklist
- Registry Schema Reference
- Architecture Overview
- Contributing Guidelines
- Security Policy
License
This project is licensed under the MIT License.
Similar repos
Contributors
75 commits
Languages
TypeScript
98.8%