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 NativeWind (or Uniwind), 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

	Status
Expo	✅ SDK 53, 54 & 55
Bare React Native	✅ 0.76+
NativeWind	✅ v4 + v5
Uniwind	✅ --style uniwind
rn-primitives	✅ Headless a11y layer
TypeScript	✅ Strict
JavaScript	✅ Via CLI (tsx: false)
npm / pnpm / yarn / bun	✅ All supported
New Architecture	✅
Old Architecture	✅ SDK 53/54 only
iOS	✅ 15+
Android	✅ API 24+

Quick Start

# Initialize AniUI in your project
npx @aniui/cli init              # npm
pnpm dlx @aniui/cli init         # pnpm
yarn dlx @aniui/cli init         # yarn
bunx @aniui/cli init             # bun

# Choose your styling engine during init:
npx @aniui/cli init --style nativewind   # default
npx @aniui/cli init --style uniwind      # Uniwind support

# Add components
npx @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>
  );
}

Components

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

Component	Description
Accordion	Expand/collapse content sections
Action Sheet	Action sheet with options
Animate	Animation presets, spring configs, and hooks
Alert	Alert with default, destructive, success, warning
Alert Dialog	Confirmation dialog with Action/Cancel
Avatar	Image with fallback initials, 3 sizes
Badge	Status indicator with 4 variants
Banner	Full-width notification with variants and dismiss
Bottom Sheet	Bottom sheet overlay
Button	Pressable with 5 variants and 3 sizes
Calendar	Month grid with single date and range selection
Card	Card with Header, Title, Content, Footer
Carousel	Horizontal scrollable carousel with pagination dots
Chat Bubble	Sent/received message bubbles with timestamps and status
Checkbox	Checkbox with checked/unchecked/disabled
Chip	Interactive tag for filters and multi-select
Combobox	Searchable select with multi-select, groups, clear, and custom rendering
Connection Banner	Animated online/offline connection status banner
Collapsible	Animated show/hide content
Data Table	Sortable, filterable data table with pagination
Date Picker	Calendar popup picker with range support
Dialog	Modal with fade + scale overlay
Direction Provider	RTL/LTR direction context with I18nManager
Drawer	Slide-in side navigation panel
Dropdown Menu	Context menu with fade animation
Empty State	Placeholder for empty lists and error states
FAB	Floating action button with positioning
Field	Form field with label, description, and error
File Picker	Upload UI with dashed border, preview, and remove
Form	Form context with validation, error messages, compound components
Grid	FlatList-based grid layout with configurable columns
Header	Navigation header with back button, title, and actions
Hover Card	Preview content card triggered by long-press
Image	Image with loading, error fallback, rounded variants
Image Gallery	Horizontal carousel with fullscreen modal and pagination
Infinite List	FlatList with automatic load-more on scroll
Input	Text input with default and ghost variants
Input Group	Compose inputs with addons, buttons, and text
Input OTP	OTP verification input with individual cells
Kbd	Keyboard key display with grouping
Label	Form field label
Labeled Separator	Horizontal separator with centered text label
List	Styled list with ListItem, Title, Description
Masked Input	Auto-format masks for credit cards, phones, dates
Number Input	Numeric input with +/- buttons and min/max
Pagination	Page navigation with numbered buttons and prev/next
Password Input	Password with show/hide toggle and strength indicator
Phone Input	Phone number input with country code selector
Popover	Contextual overlay content
Price	Formatted currency display with locale support
Progress	Progress bar
Progress Steps	Multi-step wizard progress indicator
Radio Group	Radio button group with context
Rating	Star rating with interactive and read-only modes
Refresh Control	Themed pull-to-refresh for ScrollView and FlatList
Safe Area	Styled SafeAreaView wrapper with theme variants
Search Bar	Search input with icon, clear, and cancel
Segmented Control	iOS-style segmented control
Select	Dropdown select
Separator	Horizontal or vertical divider
Skeleton	Animated loading placeholder
Slider	Draggable slider for numeric values
Spinner	Loading spinner with 3 sizes
Stat Card	KPI display with value, trend, and change percentage
Status Indicator	Online/offline/away/busy status dot
Stepper	Numeric increment/decrement with min/max/step
Swipeable List Item	Swipe to reveal action buttons (delete, archive, etc.)
Switch	Themed toggle switch
Tab Bar	Bottom tab bar with badge support and active states
Table	Data table with header, body, rows, and cells
Tabs	Tab navigation with indicator transition
Text	Typography with h1–h4, p, lead, large, small, muted
Textarea	Multi-line text input
Theme Provider	Theme context with light/dark/system mode and toggle
Timeline	Vertical timeline for events and order tracking
Toast	Slide-in notification with auto-dismiss
Toggle	Two-state toggle button with variants
Toggle Group	Exclusive selection group
Tooltip	Fade-in tooltip on press
Typing Indicator	Animated typing dots for chat interfaces

Prerequisites

AniUI requires these in your project:

# Required
npm install nativewind tailwindcss@3 class-variance-authority clsx tailwind-merge

# For Tier 2 components
npm 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

Area	Status
89 components	✅
Component & CLI tests (Jest)	✅
Accessibility audit	✅
Performance benchmarks	✅
CLI (npx @aniui/cli add)	✅
MCP server	✅
.cursorrules	✅
Interactive docs site	✅
Contributing guide	✅
Issue templates	✅
E2E tests (Detox)	🔜 Coming
CI/CD (GitHub Actions)	🔜 Coming
VS Code extension	🔜 Coming
Discord	🔜 At 500 stars

Documentation

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

Or run it locally:

cd docs
npm install
npm 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 and component guidelines before submitting a PR.

# Clone the repo
git clone https://github.com/anishlp7/aniui.git
cd aniui

# Run tests
cd cli && npm install && npm test

# Start the docs dev server
cd ../docs && npm install && npm run dev

License

MIT. See LICENSE.