Styleguide

npm install @repo/ui

/* Use CSS variables directly */
.my-element {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* Or with Tailwind arbitrary values */
<div className="bg-[var(--color-surface)] text-[var(--color-text)]">
  Content
</div>

// Tailwind classes
<div className="p-4 m-6 gap-3">
  <div className="space-y-4">
    <p>Vertical spacing</p>
  </div>
</div>

// CSS variables
.element {
  padding: var(--space-4);
  margin: var(--space-6);
  gap: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

import { Button } from "@repo/ui/button";

// Basic
<Button>Click me</Button>

// Variants
<Button variant="secondary">Cancel</Button>
<Button variant="danger">Delete</Button>

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

// With icon
<Button icon={<Star />}>Favorite</Button>
<Button icon={<ArrowRight />} iconPosition="right">Next</Button>

// States
<Button loading>Saving...</Button>
<Button disabled>Unavailable</Button>

import { Input } from "@repo/ui/input";
import { Label } from "@repo/ui/label";
import { Textarea } from "@repo/ui/textarea";
import { Select } from "@repo/ui/select";

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input
    id="email"
    type="email"
    placeholder="[email protected]"
    icon={<Mail className="h-4 w-4" />}
  />
</div>

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

<Select>
  <option value="">Select...</option>
  <option value="admin">Admin</option>
</Select>

// Error state
<Input error placeholder="Invalid" />
<Label error>Error message</Label>

import { Alert } from "@repo/ui/alert";

// Variants: danger, warning, success, info
<Alert variant="danger">Error message</Alert>
<Alert variant="success">Success message</Alert>

// Custom icon override
<Alert variant="info" icon={<CustomIcon />}>
  Custom icon alert
</Alert>

import {
  Table, TableHeader, TableBody,
  TableRow, TableHead, TableCell
} from "@repo/ui/table";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Column</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Value</TableCell>
    </TableRow>
  </TableBody>
</Table>

// Features:
// • Horizontal scroll wrapper for mobile
// • Bold header with 2px bottom border
// • Row hover highlighting
// • min-width: 640px to prevent column collapse

import { ToggleGroup } from "@repo/ui/toggle-group";

<ToggleGroup
  options={[
    { value: "all", label: "All" },
    { value: "active", label: "Active" },
    { value: "archived", label: "Archived" },
  ]}
  value={selected}
  onChange={setSelected}
/>

// Uses role="radiogroup" with role="radio" buttons
// Active state: surface-2 background with shadow
// Keyboard: arrow keys to navigate within group

import { useToast } from "@repo/ui/toast";

function MyComponent() {
  const { toast, dismiss, update } = useToast();

  // Show toast (returns ID for programmatic control)
  const id = toast("Changes saved!", "success");
  toast("Something went wrong", "error");
  toast("Processing...", "loading");
  toast("New feature available", "info", 8000); // custom duration

  // Update a loading toast to success
  update(id, "Done!", "success");

  // Dismiss programmatically
  dismiss(id);
}

// Variants: success (4s), error (4s), info (4s), loading (persistent)
// Position: bottom-right, stacked
// Animation: slide-in from right, slide-out on dismiss

interface User {
  id: string;
  email: string;
  name: string;
}

async function getUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

export function Button({ children, onClick }) {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 rounded-lg bg-primary"
    >
      {children}
    </button>
  );
}

--focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

/* Inner ring: 2px, matches background (creates gap) */
/* Outer ring: 4px, accent color (visible indicator) */

/* Applied to all focusable elements via: */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

// Theme is controlled via data-theme attribute on <html>
<html data-theme="dark">

// Or use system preference (default)
<html> // No data-theme = follows system

// Toggle theme with JavaScript
function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
}

:root, [data-theme="light"] {
  --color-bg: #FFFFFF;
  --color-text: #111111;
  --color-accent: #F5A623;
  /* ...all tokens defined here */
}

[data-theme="dark"] {
  --color-bg: #0B0B0B;
  --color-text: #F2F2F2;
  --color-accent: #F5A623;
  /* Shadows stronger, semantic bgs semi-transparent */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark fallback when no data-theme set */
  }
}