UI Primitives

Low-level, composable UI components that serve as the foundation for all mdxui templates. Built on Radix UI primitives with full accessibility support.

Forms & Inputs

Basic Inputs

Input - Text input field with variants and states

import { Input } from '@mdxui/primitives'

<Input placeholder="Enter text..." />
<Input type="email" placeholder="Email" />
<Input disabled placeholder="Disabled" />

Textarea - Multi-line text input

import { Textarea } from '@mdxui/primitives'

<Textarea placeholder="Enter description..." />

Label - Accessible form labels

import { Label } from '@mdxui/primitives'

<Label htmlFor="email">Email Address</Label>

Selection Controls

Select - Dropdown selection

import { Select } from '@mdxui/primitives'

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
  </SelectContent>
</Select>

Multi-Select - Multiple option selection Checkbox - Single checkbox input Radio Group - Mutually exclusive options Switch - Toggle switch control

Advanced Forms

Form Builder - Dynamic form generation Multi-Step Form - Wizard-style forms Date Picker - Calendar date selection File Upload - Drag-and-drop file upload Rich Text Editor - WYSIWYG text editing

Layout Components

Card - Content container with header, content, footer

import { Card, CardHeader, CardTitle, CardContent } from '@mdxui/primitives'

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    Card content goes here
  </CardContent>
</Card>

Separator - Visual divider Resizable - Resizable panel layouts Dashboard Shell - App dashboard container Sidebar - Collapsible navigation sidebar Aspect Ratio - Fixed aspect ratio container

Navigation

Navigation Menu - Horizontal navigation with dropdowns Breadcrumb - Hierarchical navigation trail Tabs - Tabbed content switching Sidebar Nav - Vertical navigation links Pagination - Page navigation controls

Overlays & Modals

Dialog - Modal dialog window

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from '@mdxui/primitives'

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    Dialog content
  </DialogContent>
</Dialog>

Drawer - Slide-out panel Sheet - Side sheet overlay Popover - Floating content container Hover Card - Hover-triggered card Tooltip - Contextual help text Context Menu - Right-click menu Dropdown Menu - Action menu dropdown

Feedback & Status

Alert - Informational message

import { Alert, AlertTitle, AlertDescription } from '@mdxui/primitives'

<Alert>
  <AlertTitle>Alert Title</AlertTitle>
  <AlertDescription>Alert message</AlertDescription>
</Alert>

Alert Dialog - Confirmation dialog Progress - Progress indicator Skeleton - Loading placeholder Sonner - Toast notifications Badge - Status badge or tag

Data Display

Table - Data table with sorting Avatar - User avatar image Calendar - Date calendar view Chart - Data visualization charts Accordion - Expandable content sections Scroll Area - Custom scrollbar container

Interactive Controls

Button - Primary action button

import { Button } from '@mdxui/primitives'

<Button>Click me</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button size="sm">Small</Button>
<Button disabled>Disabled</Button>

Command - Command palette/search Toggle - Toggle button Toggle Group - Mutually exclusive toggles Menubar - Application menu bar Slider - Range slider control

Visual Effects

Animated Card - Card with animations Border Beam - Animated border effect Particles - Particle background effect Spotlight - Spotlight highlight effect Text Reveal - Text reveal animation

Styling

All primitives use:

• Tailwind CSS v4 for styling
• class-variance-authority (CVA) for variants
• clsx + tailwind-merge via cn() utility
• Radix UI for accessibility

Type Safety

All components are fully typed with TypeScript:

import type { ButtonProps } from '@mdxui/primitives'

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />
}

Accessibility

Every primitive includes:

• ARIA labels and roles
• Keyboard navigation
• Focus management
• Screen reader support
• High contrast mode support

View in Storybook

Explore all primitives interactively:

pnpm storybook

Or visit: storybook.mdxui.dev

Next Steps

• Component Catalog - Browse all components
• Patterns - Common UI patterns