@allem-ui/react

30+ beautiful, accessible React components built on React Aria and Tailwind CSS v4.

Installation

npm install @allem-ui/react @allem-ui/theme

Tailwind CSS Setup

Add the following to your main CSS file (e.g. globals.css) so Tailwind generates the utility classes used by the components:

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

Note: The @source directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.

Quick Start

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

export function App() {
  return (
    <div>
      <Input label="Email" placeholder="[email protected]" />
      <Button>Submit</Button>
      <Badge color="success">Active</Badge>
    </div>
  );
}

Components

Foundation

Box Text Heading Divider Badge Spinner Skeleton Avatar

Forms

Button Input Textarea Checkbox Switch RadioGroup Radio Slider Select SelectItem

Layout & Data

Flex Grid Container Code Link Card Table Breadcrumbs

Overlay & Navigation

Modal Drawer Accordion Tabs Tooltip Popover Dropdown ContextMenu Toast Pagination

Features

• Accessible — Built on React Aria for WCAG compliance
• Tailwind CSS v4 — Styled with utility classes, fully customizable via className
• Dark mode — First-class dark mode with dark: Tailwind prefix
• TypeScript strict — Full type safety and autocomplete
• Tree-shakeable — ESM + CJS builds, import only what you use
• SSR-safe — Works with Next.js, Vite, and Remix

Props API

All components follow a consistent prop pattern:

| Prop | Values | Description | |------|--------|-------------| | variant | solid, outline, ghost, subtle, link | Visual style | | size | sm, md, lg | Component size | | color | primary, neutral, danger, success, warning | Color scheme | | className | string | Tailwind class overrides |

Standalone Packages

For specialized use cases, install these separately:

| Package | Description | |---------|-------------| | @allem-ui/date-picker | Calendar, DatePicker, DateRangePicker, TimeField | | @allem-ui/data-grid | Data table with sorting, filtering, pagination | | @allem-ui/chat | Chat bubbles, typing indicator, code blocks | | @allem-ui/kanban | Drag-and-drop kanban board | | @allem-ui/pricing | Pricing cards, toggles, comparison tables | | @allem-ui/changelog | Changelog timeline & version badges |

Part of Allem UI

This is the web package for the Allem UI monorepo. For React Native components, see @allem-ui/native.

Support

If you find Allem UI useful, consider supporting its development:

License

MIT - Ahmed Allem