Installation

Get started with Allem UI in your React project.

1. Install the package

npm install @allem-ui/react

Or use your preferred package manager:

pnpm add @allem-ui/react

yarn add @allem-ui/react

2. Setup Tailwind CSS

Allem UI uses Tailwind CSS v4 for styling. Add the @source directive to your main CSS file (e.g. globals.css) so Tailwind scans the component classes:

@import "tailwindcss";
@source "@allem-ui/react";
@source "@allem-ui/theme";

If you use standalone packages, add a @source line for each one:

@source "@allem-ui/command";
@source "@allem-ui/file-upload";
@source "@allem-ui/rich-text";
@source "@allem-ui/onboarding";
@source "@allem-ui/chat";
@source "@allem-ui/data-grid";
@source "@allem-ui/kanban";
@source "@allem-ui/date-picker";
@source "@allem-ui/pricing";
@source "@allem-ui/changelog";

Why is this needed? The @sourcedirective tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated in your CSS output.

3. Add React Aria variants

Allem UI components use React Aria data attributes for interactive states. Add these custom variants to your CSS:

/* React Aria data attribute variants */
@custom-variant selected (&[data-selected]);
@custom-variant pressed (&[data-pressed]);
@custom-variant dragging (&[data-dragging]);
@custom-variant focus-visible (&[data-focus-visible]);
@custom-variant disabled (&[data-disabled]);
@custom-variant placeholder-shown (&[data-placeholder]);

4. Add theme animations

Some components use custom animations. Add them to your CSS:

@theme {
  --animate-allem-spin: spin 0.6s linear infinite;
  --animate-allem-pulse: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-allem-fade-in: allemFadeIn 0.2s ease-out;
  --animate-allem-slide-up: allemSlideUp 0.2s ease-out;
}

@keyframes allemFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes allemSlideUp {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

5. Start using components

import { Button } from "@allem-ui/react";

export function App() {
  return <Button color="primary">Click me</Button>;
}

Framework support

Allem UI works with Next.js, Vite, Remix, and any React framework. Components that use interactivity include the "use client" directive for React Server Components compatibility.