Usage

Learn the core patterns for using Allem UI components.

Importing components

All components are exported from the main package:

import { Button, Input, Card, Modal } from "@allem-ui/react";

Variants, sizes, and colors

Most components follow a consistent API with three standard props:

variant

Controls the visual style. Common values: solid, outline, ghost

size

Controls the size. Values: sm, md, lg

color

Controls the color. Values: primary, neutral, danger, success, warning

Styling with className

Every component accepts a className prop for overrides:

<Button className="rounded-full px-8">
  Custom styled button
</Button>

Dark mode

All components include dark mode styles using Tailwind's dark: prefix. Allem UI uses class-based dark mode — add this custom variant to your CSS:

@custom-variant dark (&:where(.dark, .dark *));

Then add the dark class to your <html> element to toggle dark mode:

<html class="dark">
  <!-- Components automatically adapt -->
</html>

Tip: For Next.js projects, use next-themes with attribute="class" to manage dark mode toggling automatically.

Accessibility

Allem UI is built on React Aria — every interactive component includes keyboard navigation, focus management, screen reader announcements, and WAI-ARIA attributes automatically. You don't need to add aria-* props manually.