@labmgm/react

The core MGM Laboratory React component library.

Buttons, cards, dialogs, navigation, feedback, layout — everything you need for a product or marketing surface. Radix UI, Lucide, Framer Motion, Tailwind, and a fully-tokenized theme are bundled — no second UI library to install.

pnpm add @labmgm/react @labmgm/tokens @labmgm/tailwind-config

Storybook · Source · Monorepo root

Two ways to ship styles

// tailwind.config.ts
import preset from '@labmgm/tailwind-config';

export default {
  presets: [preset],
  content: ['./src/**/*.{ts,tsx}', './node_modules/@labmgm/*/dist/**/*.{js,mjs}'],
};

// root layout
import '@labmgm/tokens/tokens.css';
import '@labmgm/react/styles.css';

styles.css deliberately excludes Tailwind Preflight and global body styles, so it can be imported alongside a Tailwind 4 application without competing resets.

Quick example

import {
  Container,
  Section,
  Stack,
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from '@labmgm/react';

export default function Home() {
  return (
    <Section tone="muted" padding="lg">
      <Container>
        <Stack gap={6}>
          <h1 className="text-display-lg">
            Build the <span className="text-brand-red">loud</span> internet.
          </h1>
          <Card>
            <CardHeader>
              <CardTitle>Out of the box</CardTitle>
            </CardHeader>
            <CardContent>No extra setup.</CardContent>
          </Card>
          <Button size="lg">Get started</Button>
        </Stack>
      </Container>
    </Section>
  );
}

Component catalog

Open the Storybook for live examples of every component and every variant.

| Category | Components | | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Buttons & actions | Button · IconButton · ButtonGroup · ToggleButton · ToggleButtonGroup · Link · Kbd · CopyButton · BackButton | | Display | Card (+ Header/Title/Description/Content/Footer) · Badge · Tag · Chip · Avatar · AvatarGroup · Stat · Empty · Skeleton · Spinner · Code · CodeBlock | | Overlays | Dialog · AlertDialog · Drawer · Popover · HoverCard · Tooltip · DropdownMenu · ContextMenu | | Navigation | Tabs · Accordion · Breadcrumb · Pagination · Stepper · Navbar | | Feedback | Alert · Banner · Progress · ProgressCircle · Callout | | Data display | List · DescriptionList · Timeline · Separator | | Media | Image · Carousel | | Layout (from @labmgm/layout, re-exported) | Container · Section · Stack · VStack · HStack · Grid · Flex · Box · Center · Spacer · AspectRatio · Divider | | Brand (from @labmgm/brand, re-exported) | Logo · Wordmark · ShapeSignature · FooterStrip | | Theme (from @labmgm/theme, re-exported) | ThemeProvider · Surface · useSurface | | Patterns (from @labmgm/patterns, re-exported) | PatternGrid · PatternTile · PatternCorner · PatternBanner · PatternDado · PatternStrip · PatternPyramid · PatternTriangle |

Specialized packages live separately:

• @labmgm/forms — Input, Combobox, Wizard, validation
• @labmgm/data-table — TanStack Table v8
• @labmgm/charts — Recharts wrappers
• @labmgm/rich-text — Tiptap editor + renderer
• @labmgm/calendar — date / range / time pickers
• @labmgm/command — ⌘K palette
• @labmgm/toast — Sonner-wrapped toasts

Surface tones

<Section tone="default">…</Section>   // white / ink
<Section tone="muted">…</Section>     // off-white / ink
<Section tone="inverse">…</Section>   // dark / light, child components flip automatically

Self-contained surfaces (Card, Dialog, Popover, Alert, Callout, Toast, Drawer, DropdownMenu, HoverCard, ContextMenu) automatically reset to data-surface="default" so they read correctly even when nested inside a dark Section. Tooltip stays dark by design.

Brand rules quick reference

• Closed palette. No purple, teal, pink, or orange. Brand colors: brand-blue, brand-yellow, brand-red, brand-green.
• Stroke-only icons at 2.25 stroke width, 16 / 20 / 24 px (use @labmgm/icons or lucide-react).
• Typography: Bricolage Grotesque (display), Geist (UI), Geist Mono (code). No substitutes.
• One display per page. Inner sections start at h1 or smaller.
• The full spec lives in DESIGN_SYSTEM.md.

License

MIT © MGM Laboratory