Build your theme. Pick a preset or generate a random color, then copy the CSS into your project.
Color
Radius
Mode
Or run npx @aniui/cli theme from your project.
Color
Radius
Mode
Your project overview at a glance.
Users
2,847
+12%
Revenue
$48.2k
+8.1%
Active
1,024
+24%
Filter by tags
Manage your notification settings.
Push notifications
Mobile alerts
Marketing emails
Product updates
Security alerts
Login activity
Select your subscription tier.
Satisfaction
Interactive sliders, steppers, and segments.
Alice Chen
Admin
Bob Smith
Developer
Carol Davis
Designer
Common questions about AniUI.
Yes! AniUI is MIT licensed and completely free to use in personal and commercial projects.
AniUI supports Expo SDK 53 & 54, as well as bare React Native CLI 0.76+.
Absolutely — AniUI uses CSS variables for theming. Customize everything in global.css.
Tip
You own every line of code. Fork, modify, and ship.
Skeleton and button loading patterns.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.75rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--radius: 0.75rem;
}
}