natwind

A copy-paste component library for Expo (React Native) projects — styled with NativeWind, inspired by shadcn/ui.

Components are copied into your project, not installed as a package. You own the code and can modify it freely.

Quick start

1. Set up NativeWind in your project (if not already done) → Follow the NativeWind install guide

2. Initialize natwind

npx natwind init

This creates lib/utils.ts (the cn() helper) and installs clsx, tailwind-merge, and class-variance-authority.

3. Add components

npx natwind add button
npx natwind add input
npx natwind add card

4. Use them

import { Button } from "@/components/ui/button";

<Button variant="default" onPress={() => {}}>Get started</Button>
<Button variant="outline" size="sm">Cancel</Button>

Available components

Layout & Primitives

| Component | Description | | ------------- | -------------------------------------------------- | | view | Themed View wrapper | | text | Themed Text wrapper | | scroll-view | Themed ScrollView wrapper | | separator | Horizontal/vertical divider | | card | Surface container with header/content/footer slots | | image | Expo Image with NativeWind support | | icon | Lucide icon wrapper |

Inputs & Forms

| Component | Description | | -------------- | -------------------------------------- | | button | Pressable button — 4 variants, 3 sizes | | input | Text input field | | input-otp | OTP/PIN code input | | checkbox | Checkbox with label | | radio | Radio group and item | | switch | Toggle switch | | toggle | Single toggle button | | picker | Native dropdown picker | | combobox | Searchable select with autocomplete | | date-picker | Date/time picker | | color-picker | HSV color picker | | searchbar | Search input with clear button |

Feedback & Overlays

| Component | Description | | -------------- | ------------------------------- | | alert | Inline alert with icon variants | | alert-dialog | Modal confirmation dialog | | badge | Status badge — 4 variants | | progress | Progress bar | | skeleton | Loading skeleton placeholder | | spinner | Activity indicator | | popover | Floating content popover | | sheet | Bottom/side sheet drawer | | bottom-sheet | Full-featured bottom sheet | | action-sheet | iOS-style action sheet |

Navigation & Structure

| Component | Description | | ------------- | ------------------------------- | | tabs | Tab bar with content panels | | accordion | Expandable/collapsible sections | | collapsible | Single expand/collapse section | | link | Expo Router link wrapper | | table | Data table |

Media & Advanced

| Component | Description | | --------------------- | ---------------------------------- | | avatar | User avatar with fallback initials | | camera | Camera capture view | | camera-preview | Preview captured photo/video | | audio-player | Audio playback control | | audio-recorder | Audio recording control | | audio-waveform | Waveform visualizer | | gallery | Photo gallery viewer | | media-picker | Image/video picker from library | | file-picker | Document/file picker | | carousel | Horizontal swipe carousel | | parallax-scrollview | ScrollView with parallax header |

Charts

| Component | Description | | --------------------- | ------------------------------------------ | | area-chart | Area chart (SVG) | | bar-chart | Horizontal bar chart (SVG) | | bubble-chart | Bubble chart (SVG) | | candlestick-chart | Candlestick chart for financial data (SVG) | | chart-container | Base container wrapper for charts | | column-chart | Vertical column chart (SVG) | | doughnut-chart | Doughnut/ring chart (SVG) | | heatmap-chart | Heatmap grid chart (SVG) | | line-chart | Line chart with Reanimated animations | | pie-chart | Pie chart (SVG) | | polar-area-chart | Polar area chart (SVG) | | progress-ring-chart | Animated progress ring (Reanimated) | | radar-chart | Radar/spider chart (SVG) | | radial-bar-chart | Radial bar chart (Reanimated) | | scatter-chart | Scatter plot chart (SVG) | | stacked-area-chart | Stacked area chart (Reanimated) | | stacked-bar-chart | Stacked bar chart (Reanimated) | | treemap-chart | Treemap hierarchical chart (SVG) |

Utilities

| Component | Description | | ---------------- | --------------------------------------------------- | | theme-provider | ThemeProvider + useTheme hook for light/dark tokens | | mode-toggle | Light/dark/system theme toggle | | avoid-keyboard | KeyboardAvoidingView wrapper | | onboarding | Multi-step onboarding flow |

Theming

Components use semantic NativeWind classes (bg-background, text-foreground, etc.) and expose a useTheme hook for programmatic token access.

1. Add theme-provider to your project

npx natwind add theme-provider

This copies components/theme/theme-provider.tsx and components/theme/tokens.ts into your project.

2. Wrap your app

import { ThemeProvider } from "@/components/theme/theme-provider";

export default function RootLayout() {
  return <ThemeProvider>{/* your app */}</ThemeProvider>;
}

3. Access tokens in components

import { useTheme } from "@/components/theme/theme-provider";

function MyComponent() {
  const theme = useTheme();
  // theme.background, theme.foreground, theme.primary, ...
}

Component API

Button

<Button
  variant="default" // "default" | "outline" | "ghost" | "destructive"
  size="md" // "sm" | "md" | "lg"
  disabled={false}
  className="" // NativeWind className (override)
  style={{}} // StyleSheet escape hatch (Reanimated, computed values)
  onPress={() => {}}
>
  Label
</Button>

CLI commands

npx natwind init              # set up lib/utils.ts + install deps
npx natwind add <component>   # copy component into your project
npx natwind list              # list all available components

Why natwind?

Existing options didn't quite fit:

• bna/ui — great component selection, but no NativeWind support
• React Native Reusables — shadcn-style copy-paste, but limited component coverage

natwind fills the gap: shadcn's copy-paste model, NativeWind-first styling, and enough components to cover a real app. Components were converted from bna/ui to NativeWind with the help of Claude Code.

Design principles

• NativeWind first — className prop as primary styling, style as escape hatch only
• You own the code — files are copied, not imported from a package
• Dark mode built-in — semantic color tokens via useTheme, dark: prefix on every component
• No hidden deps — each component lists exactly what it needs

Monorepo structure

natwind/
├── apps/demo/          # Expo showcase app
├── packages/
│   ├── registry/       # Component source files + useTheme hook
│   └── cli/            # npx natwind
└── pnpm-workspace.yaml

Contributing

1. Add component source to packages/registry/components/ui/
2. Export from packages/registry/index.ts
3. Register in packages/cli/src/registry.ts (name, files, deps)
4. Build CLI: cd packages/cli && pnpm build