the React Native component library you deserve.

Build beautiful
React Native apps,
your way.

Getting StartedBrowse Components

tapcn is a copy-paste component library for React Native developers. Pick the components you need, add them with the CLI, and customize everything. No version lock-in, no black boxes — just your code.

Try it out.

Terminal
$ npx @tapcn/cli init
Terminal
$ npx @tapcn/cli add button card input
Resolving dependencies...
✓ Downloaded button.tsx
✓ Downloaded card.tsx
✓ Downloaded input.tsx
Added 3 components to ~/components/ui/

A library developers love.

Trusted by indie developers and teams building production React Native apps. The shadcn/ui model, adapted for mobile.

Browse Components

We switched from building custom RN components to tapcn and cut our UI development time in half. The shadcn-like DX means our web devs can contribute to mobile without learning new patterns.

avatar

Raj Patel

Senior Mobile Engineer at Fintech Startup

Finally, a component library that treats React Native Web as a first-class citizen. Our Expo app works flawlessly across all three platforms. The accessibility support from @rn-primitives is chef's kiss.

avatar

Sarah Chen

Lead Developer at HealthTech Co

The copy-paste model is genius. I own every line of code, can customize anything, and the CLI makes adding new components effortless. No more fighting with library version conflicts.

avatar

Marcus Johnson

Indie App Developer

CVA variants + NativeWind is the perfect combo for type-safe, cross-platform styling. We built our entire design system on top of tapcn in two weeks.

avatar

Elena Kowalski

Design Systems Engineer

We switched from building custom RN components to tapcn and cut our UI development time in half. The shadcn-like DX means our web devs can contribute to mobile without learning new patterns.

avatar

Raj Patel

Senior Mobile Engineer at Fintech Startup

Finally, a component library that treats React Native Web as a first-class citizen. Our Expo app works flawlessly across all three platforms. The accessibility support from @rn-primitives is chef's kiss.

avatar

Sarah Chen

Lead Developer at HealthTech Co

The copy-paste model is genius. I own every line of code, can customize anything, and the CLI makes adding new components effortless. No more fighting with library version conflicts.

avatar

Marcus Johnson

Indie App Developer

CVA variants + NativeWind is the perfect combo for type-safe, cross-platform styling. We built our entire design system on top of tapcn in two weeks.

avatar

Elena Kowalski

Design Systems Engineer

We switched from building custom RN components to tapcn and cut our UI development time in half. The shadcn-like DX means our web devs can contribute to mobile without learning new patterns.

avatar

Raj Patel

Senior Mobile Engineer at Fintech Startup

Finally, a component library that treats React Native Web as a first-class citizen. Our Expo app works flawlessly across all three platforms. The accessibility support from @rn-primitives is chef's kiss.

avatar

Sarah Chen

Lead Developer at HealthTech Co

The copy-paste model is genius. I own every line of code, can customize anything, and the CLI makes adding new components effortless. No more fighting with library version conflicts.

avatar

Marcus Johnson

Indie App Developer

CVA variants + NativeWind is the perfect combo for type-safe, cross-platform styling. We built our entire design system on top of tapcn in two weeks.

avatar

Elena Kowalski

Design Systems Engineer

We switched from building custom RN components to tapcn and cut our UI development time in half. The shadcn-like DX means our web devs can contribute to mobile without learning new patterns.

avatar

Raj Patel

Senior Mobile Engineer at Fintech Startup

Finally, a component library that treats React Native Web as a first-class citizen. Our Expo app works flawlessly across all three platforms. The accessibility support from @rn-primitives is chef's kiss.

avatar

Sarah Chen

Lead Developer at HealthTech Co

The copy-paste model is genius. I own every line of code, can customize anything, and the CLI makes adding new components effortless. No more fighting with library version conflicts.

avatar

Marcus Johnson

Indie App Developer

CVA variants + NativeWind is the perfect combo for type-safe, cross-platform styling. We built our entire design system on top of tapcn in two weeks.

avatar

Elena Kowalski

Design Systems Engineer

Components, Live.

38+ accessible, cross-platform components. Pick a category to explore.

Button

Input

Select

Checkbox

Switch

Radio Group

Truly Cross-Platform

Every component works on iOS, Android, and Web. Built with React Native and NativeWind for true native performance.

Minimal aesthetics, Maximum customizability.

Customize every component with NativeWind classes and CVA variants. Full design token support with CSS variables.

Add components with the tapcn CLI, then make them yours.

npx @tapcn/cli add button

> Added button.tsx to ~/components/ui/

Built for Developers.

A truly composable architecture.

Separated as Registry → CLI → Your Project, giving you full ownership of your code while maintaining easy updates.

@tapcn/cli

CLI tool for adding components to your project.

@rn-primitives

Accessible primitive components for React Native.

nativewind

Tailwind CSS for React Native with full web support.

class-variance-authority

Type-safe component variants.

tailwind-merge

Intelligent Tailwind class merging.

The shadcn/ui for React Native

Same registry format as shadcn/ui. If you know shadcn, you already know tapcn.

  • Full TypeScript autocompletion
  • CVA for type-safe variants
  • cn() for class merging
  • Works across iOS, Android, and Web
  • Accessible by default with @rn-primitives
Read the Docs
import { Button } from '~/components/ui/button';
import { Text } from '~/components/ui/text';
import { View } from 'react-native';

export function MyScreen() {
  return (
    <View className="flex-1 items-center
      justify-center gap-4">
      <Button variant="outline">
        <Text>Click me</Text>
      </Button>
      <Button variant="destructive">
        <Text>Delete</Text>
      </Button>
    </View>
  );
}

Find components instantly.

Search across all 38+ components to find exactly what you need.

All Components
Search components...

Button

Customizable button with multiple variants and sizes.

Input

Text input with label and error state support.

Dialog

Modal dialog with overlay and animations.

Tabs

Tabbed content navigation component.

Built with

ExpoNativeWind v4@rn-primitivesReanimatedclass-variance-authorityLucide Iconstailwind-mergeReact Native Web
ExpoNativeWind v4@rn-primitivesReanimatedclass-variance-authorityLucide Iconstailwind-mergeReact Native Web
ExpoNativeWind v4@rn-primitivesReanimatedclass-variance-authorityLucide Iconstailwind-mergeReact Native Web
ExpoNativeWind v4@rn-primitivesReanimatedclass-variance-authorityLucide Iconstailwind-mergeReact Native Web

Open Source, Always.

Lightning fast.

Add any component to your project instantly with the CLI.

Cross-platform.

Every component tested on iOS, Android, and Web.

You own the code.

Copy-paste model. No version lock-in, no black boxes.

Actively maintained.

New components and improvements shipped regularly.

Made Possible by You.

100% powered by passion and the open-source community. Every contribution makes tapcn better for everyone.

Star on GitHubContribute
MIT Licensed — Free forever

Start Building

Beautiful, accessible, cross-platform components for React Native.

Read DocsBrowse Components