Quick Start

Your First Component

Let's start by creating a simple counter component using Matrix UI:

Code Example

'use client'

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

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <Card>
      <CardHeader>
        <CardTitle>Counter Example</CardTitle>
        <CardDescription>A simple interactive counter</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center gap-4">
          <Button 
            variant="outline" 
            onClick={() => setCount(count - 1)}
          >
            Decrement
          </Button>
          <span className="text-2xl font-semibold min-w-[3ch] text-center">
            {count}
          </span>
          <Button 
            onClick={() => setCount(count + 1)}
          >
            Increment
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

Using Different Component Variants

Matrix UI components come with multiple variants to fit your design needs:

Button Variants

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Button Sizes

<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>

Composing Components

Matrix UI components are designed to work together seamlessly:

import { 
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Button,
  Input,
  Label
} from '@matrix-ui/components'

export function DialogExample() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit Profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid gap-2">
            <Label htmlFor="name">Name</Label>
            <Input id="name" placeholder="Enter your name" />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="Enter your email" />
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

Applying Themes

Matrix UI supports multiple built-in themes:

import { applyTheme, themes } from '@matrix-ui/themes'

// Apply a built-in theme
applyTheme(themes.carbon)
applyTheme(themes.obsidian)
applyTheme(themes.titanium)

// Or use a custom theme
const customTheme = {
  name: 'custom',
  cssVars: {
    light: { /* ... */ },
    dark: { /* ... */ }
  },
  radius: '0.5rem'
}

applyTheme(customTheme)

Next Steps