Component Catalog

Browse the complete catalog of mdxui components organized by category and use case.

Component Categories

Primitives

Low-level UI building blocks that serve as the foundation for all mdxui templates.

• Forms: Input, Textarea, Select, Checkbox, Radio, Switch, Form Builder
• Layout: Card, Separator, Sidebar, Dashboard Shell, Resizable
• Navigation: Navigation Menu, Breadcrumb, Tabs, Sidebar Nav
• Overlays: Dialog, Drawer, Sheet, Popover, Hover Card, Tooltip
• Feedback: Alert, Alert Dialog, Progress, Skeleton, Sonner (Toasts)
• Data Display: Table, Badge, Avatar, Calendar, Chart, Accordion
• Interactive: Button, Command, Context Menu, Dropdown Menu, Menubar
• Advanced: Multi-Step Form, Rich Text Editor, File Upload, Date Picker

Widgets

Complex, feature-rich components built on top of primitives.

• ChatBox: AI chat interface with message streaming
• Editor: Code and text editing components
• SearchBox: Advanced search with filtering
• Onboarding: Multi-step wizard with field validation
• Command Palette: Quick navigation and actions

Site Components (Beacon)

Marketing and content-focused components for public-facing sites.

• Hero: Landing page hero sections
• Features: Feature grids and showcases
• Pricing: Pricing tables and tiers
• Testimonials: Customer testimonials
• CTA: Call-to-action sections
• Templates: Directory, API Hub, and more

App Components (Cockpit)

Dashboard and authenticated application components.

• Developer Dashboard: Complete developer portal
• API Key Manager: API key generation and management
• Team Manager: Team member and role management
• Settings Page: User and application settings
• Team Switcher: Organization/team switching

Zero Components

Email client and specialized dashboard components.

• Mail Shell: Complete email interface
• Mail Sidebar: Email navigation and folders
• Mail List: Email thread listing
• Thread Display: Email conversation view
• Email Composer: Rich email composition

Viewing Components

Local Development

Start Storybook locally to interact with all components:

pnpm storybook

Opens at localhost:6006

Production

Visit the live Storybook deployment:

storybook.mdxui.dev

Component Documentation

Each component in Storybook includes:

• Props: Complete TypeScript prop definitions
• Variants: All available visual variants
• States: Interactive, disabled, loading, error states
• Examples: Real-world usage examples
• Accessibility: ARIA labels and keyboard navigation
• Source: View component source code

Package Structure

@mdxui/primitives   → Core UI primitives (60+ components)
@mdxui/widgets      → Complex widgets (ChatBox, Editor, etc.)
@mdxui/beacon       → Site template components
@mdxui/cockpit      → App template components
@mdxui/zero         → Email and specialized components

Next Steps

• Primitives - Explore primitive components
• Patterns - Common UI patterns and compositions