Components Overview

Component Philosophy

Every Matrix UI component follows these principles:

• Accessible by Default - WCAG AA compliant with full keyboard navigation
• Composable Architecture - Build complex UIs from simple primitives
• Server Component Ready - Optimized for Next.js App Router
• Type Safe - Full TypeScript support with strict typing
• Theme Aware - Automatic adaptation to theme changes
• Zero Runtime CSS - Tailwind CSS for optimal performance

Component Library

Component Status

Import Pattern

All components can be imported from the main package:

import { 
  Button, 
  Card, 
  CardHeader, 
  CardTitle, 
  CardContent 
} from '@matrix-ui/components'

Component Anatomy

Matrix UI components follow consistent patterns:

Simple Components

<Button variant="primary" size="lg">
  Click me
</Button>

Compound Components

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    Content goes here
  </CardContent>
  <CardFooter>
    Footer content
  </CardFooter>
</Card>

Controlled Components

const [value, setValue] = useState('')

<Input 
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Controlled input"
/>

Styling Components

Components can be styled using multiple approaches:

Using className

<Button className="mt-4 w-full">
  Full width button with margin
</Button>

Using style prop

<Card style={{ maxWidth: '400px' }}>
  Limited width card
</Card>

Using CSS variables

/* Override component-specific tokens */
:root {
  --button-height: 3rem;
  --card-padding: 2rem;
}