Beautiful React Native components. Copy. Paste. Ship.

Demo  •  Quick Start  •  Components  •  Docs  •  Philosophy  •  Contributing

AniUI is a shadcn/ui-inspired component library for React Native. Instead of installing a package, you copy component source files directly into your project. You own the code. Customize everything.

Built with Uniwind (recommended) or NativeWind, rn-primitives for accessibility, class-variance-authority, and strict TypeScript. Every component is a single file, styled with Tailwind classes, and works on both iOS and Android out of the box.

Demo: YouTube Short | Live Demo (Expo Go)

Try on device: Scan with Expo Go

Compatibility

New: Expo SDK 57 + Uniwind is now the default → On Expo SDK 55+ projects, aniui init now defaults to Uniwind (2–3× faster than NativeWind, Tailwind v4 CSS-first, no Babel transform). NativeWind stays fully supported via --style nativewind. Ships with Expo 57 starters for both engines (examples/expo-57-starter, examples/expo-57-nw5-starter). See the Uniwind guide and SDK compatibility.

Quick Start

# Initialize AniUI in your projectnpx @aniui/cli init              # npmpnpm dlx @aniui/cli init         # pnpmyarn dlx @aniui/cli init         # yarnbunx @aniui/cli init             # bun
# Choose your styling engine during init:npx @aniui/cli init --style uniwind      # default on Expo 55+ (recommended)npx @aniui/cli init --style nativewind   # NativeWind (supported)
# Add componentsnpx @aniui/cli add button card input text

That's it. Components are copied to your components/ui/ directory. Import and use them:

import { Button } from "@/components/ui/button";import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";import { Text } from "@/components/ui/text";
export function WelcomeScreen() {  return (    <Card>      <CardHeader>        <CardTitle>Welcome to AniUI</CardTitle>      </CardHeader>      <CardContent>        <Text variant="muted">Beautiful components for React Native.</Text>        <Button onPress={() => console.log("shipped!")}>          Get Started        </Button>      </CardContent>    </Card>  );}

Or install with the shadcn CLI / React Native Reusables

The full catalog is also published as a shadcn-compatible registry at https://aniui.dev/r, so you don't need the aniui CLI. Add the namespace to your components.json…

{ "registries": { "@aniui": "https://aniui.dev/r/{name}.json" } }

…then install with the shadcn CLI, or by raw URL with the React Native Reusables (RNR) CLI:

npx shadcn@latest add @aniui/buttonnpx shadcn@latest add https://aniui.dev/r/card.jsonnpx @react-native-reusables/cli@latest add https://aniui.dev/r/card.json

Already on RNR / NativeWind / Uniwind? Components drop in with zero extra setup — same theme tokens and aliases. See the shadcn / RNR registry guide.

Components

93 components — all listed alphabetically. Each component's docs page tells you if it needs extra dependencies.

Prerequisites

AniUI requires these in your project:

# Requirednpm install nativewind tailwindcss@3 class-variance-authority clsx tailwind-merge
# For Tier 2 componentsnpm install react-native-reanimated
# For Tier 3 components (as needed)npm install @gorhom/bottom-sheet react-native-gesture-handler

Supported platforms: See Compatibility table above.

Production Ready

Documentation

Visit the docs site for interactive previews, code examples, and API reference for every component.

Or run it locally:

cd docsnpm installnpm run dev

Philosophy

AniUI follows a set of principles that keep it different from other React Native UI libraries:

• You own the code. Components are source files, not npm dependencies. Fork, modify, delete — it's yours.
• Mobile only. No web compromises. Every component is built and tested for iOS and Android.
• NativeWind all the way. No StyleSheet.create(). Every style is a Tailwind class. Override anything with className.
• One file per component. No splitting across multiple files. Each component is self-contained and under 80 lines.
• Minimal dependencies. A component doesn't add a dependency unless 3+ components need it.
• Accessible by default. Every interactive component has accessibilityRole set on day one.
• Dark mode built in. HSL CSS variables that switch automatically between light and dark themes.

Theme

AniUI uses CSS custom properties for theming, just like shadcn/ui. Customize colors in global.css:

:root {  --background: 0 0% 100%;  --foreground: 240 10% 3.9%;  --primary: 240 5.9% 10%;  --primary-foreground: 0 0% 98%;  --secondary: 240 4.8% 95.9%;  --muted: 240 4.8% 95.9%;  --destructive: 0 84.2% 60.2%;  --border: 240 5.9% 90%;  /* ... */}
.dark {  --background: 240 10% 3.9%;  --foreground: 0 0% 98%;  /* ... */}

Project Structure

your-project/├── components/│   └── ui/│       ├── button.tsx      # Copied by `aniui add button`│       ├── card.tsx         # Copied by `aniui add card`│       └── ...├── lib/│   └── utils.ts            # cn() helper — copied by `aniui init`├── global.css              # Theme variables└── tailwind.config.js      # AniUI theme tokens

Contributing

Contributions are welcome! Please read the contributing guide [blocked] and component guidelines [blocked] before submitting a PR.

# Clone the repogit clone https://github.com/anishlp7/aniui.gitcd aniui
# Run testscd cli && npm install && npm test
# Start the docs dev servercd ../docs && npm install && npm run dev

License

MIT. See LICENSE [blocked].