AI Dimensie
Wave 11·Docs · part of AI Dimensie·Why Docs? →·⌘K jump

32 production-ready React components for Next.js + Tailwind v4.

UI Kit Overview

aidimension UI ships 32 components that are:

  • ✅ Accessible — Built on Radix UI primitives, WAI-ARIA compliant
  • ✅ Themeable — Dark mode + CSS variables, no theme provider needed
  • ✅ Tree-shakeable — Import only what you use
  • ✅ AI-friendly — Every component has a data-aidimension-component attribute so agents can target them

Component categories#

Foundations (8)#

  • Button — primary, secondary, outline, ghost, link, icon
  • Badge — status indicators with 6 variants
  • Input — text, email, password, search, file
  • Textarea — multi-line input with auto-grow
  • Label — accessible form labels
  • Separator — horizontal/vertical dividers
  • Skeleton — loading placeholders
  • Avatar — user/entity avatars with fallback

Containers (5)#

  • Card — grouped content with header/footer
  • Dialog — modal overlays
  • Sheet — slide-in panels (left, right, top, bottom)
  • Tabs — switchable content panels
  • Accordion — collapsible content sections
  • NavigationMenu — mega menu for marketing sites
  • Menubar — desktop application menus
  • Breadcrumb — location hierarchy
  • Pagination — page navigation controls
  • Command — ⌘K palette
  • ContextMenu — right-click menus

Feedback (5)#

  • Alert — banner messages
  • Toast — temporary notifications
  • Tooltip — hover/focus hints
  • Progress — linear/circular progress
  • HoverCard — preview-on-hover cards

Data (4)#

  • Table — sortable, filterable data tables
  • DataList — key-value pair lists
  • Calendar — date picker
  • Combobox — autocomplete select

Form controls (4)#

  • Checkbox — boolean input
  • RadioGroup — single-select from options
  • Switch — toggle input
  • Slider — range input

Design tokens#

All components use the same design tokens, defined as CSS variables in globals.css:

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 262 83% 58%;
  --primary-foreground: 0 0% 100%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --border: 240 5.9% 90%;
  --ring: 262 83% 58%;
  --radius: 0.5rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --border: 240 3.7% 15.9%;
}

Override any token in your own globals.css to re-theme the entire kit without touching component code.

Installing a single component#

If you only need a few components, copy them directly into your project:

npx @aidimension/cli@latest add button card dialog

This pastes the component source into src/components/ui/ so you own the code. No package dependency, no version drift.

Component anatomy#

Every component follows the same pattern — forwardRef + cva variants + cn utility:

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        outline: "border border-input bg-background hover:bg-accent",
        ghost: "hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        sm: "h-8 px-3 text-xs",
        md: "h-10 px-4",
        lg: "h-11 px-8",
      },
    },
    defaultVariants: { variant: "default", size: "md" },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => (
    <button
      ref={ref}
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  )
);
Button.displayName = "Button";

AI agent integration#

Every component renders with a data-aidimension-component attribute. This lets agents (Claude, Cursor, GPT) target and modify components precisely:

<button data-aidimension-component="button" data-variant="default" data-size="md">
  Click me
</button>

Use the aidimension-component skill to teach your agent the full component API.

Next
Introduction