Installation

Get AniUI set up in your React Native project in minutes.

Prerequisites

AniUI requires NativeWind v4 to be configured in your project. If you haven't set it up yet:

Install NativeWind

npm install nativewind tailwindcss@3 react-native-reanimated react-native-safe-area-context
npx pod-install

Quick Start

1. Initialize AniUI

npx @aniui/cli init

This will set up your project with the utility helper, global CSS theme, and Tailwind config.

2. Add components

npx @aniui/cli add button text input card

Components are copied as source files into your components/ui/ directory.

3. Import and use

app/index.tsx

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

export default function App() {
  return (
    <>
      <Text variant="h1">Hello AniUI</Text>
      <Button onPress={() => console.log("pressed")}>
        Get Started
      </Button>
    </>
  );
}

Manual Setup

If you prefer to set things up manually instead of using the CLI:

1. Install base dependencies

npm install class-variance-authority clsx tailwind-merge

2. Create the utility helper

lib/utils.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

3. Copy components

Copy any component file from the components/ui/ directory in the AniUI repo into your project.

Button Component →