Back to Projects

tapcn

A copy-paste UI component library for React Native and Expo with 37+ accessible cross-platform components, CSS variable-based theming with dark mode, and a CLI tool for instant project setup — inspired by shadcn/ui.

tapcn brings the shadcn/ui philosophy to React Native and Expo. Components are not installed as npm dependencies — they live directly in your codebase, giving you complete control to read, modify, and extend them without fighting upstream abstractions.

Philosophy

The core idea: own your components. When a component doesn't fit your design system or has a bug, you fix it directly instead of waiting for a library maintainer. tapcn gives you the starting point; you take it from there.

37+ Components

Components span every UI category:

  • Layout — Box, Stack, Grid, Divider, SafeAreaView
  • Forms — Input, Textarea, Select, Checkbox, Radio, Switch, Slider
  • Data Display — Card, Badge, Avatar, Table, List
  • Feedback — Alert, Toast, Progress, Skeleton, Spinner
  • Navigation — Tabs, BottomSheet, Drawer
  • Overlay — Dialog, Modal, Popover, Tooltip
  • Utility — Separator, ScrollView, KeyboardAvoidingView

All components are cross-platform (iOS, Android, Web) and fully accessible via @rn-primitives.

CLI Tool

Install components directly with the tapcn CLI:

npx tapcn@latest init        # Set up your project
npx tapcn@latest add button  # Add a specific component
npx tapcn@latest doctor      # Check your setup

Theming

CSS variable-based theming with full dark mode support via NativeWind v4. Swap between themes at runtime or build a custom theme system on top of the token layer.

tapcn is available at tapcn.dev and on GitHub.