@labmgm/react

React component primitives for the MGM Laboratory Design System.

This package ships core primitives only (Iteration 3b). Overlays, navigation, layout (3c), data, dates, forms wrappers and pattern engine (3d) arrive in follow-up packages.

Install

pnpm add @labmgm/react @labmgm/styles @labmgm/themes react react-dom

Use

import "@labmgm/styles/base.css";
import { ThemeProvider } from "@labmgm/themes";
import { Button, Card, CardHeader, CardTitle, Input, Label } from "@labmgm/react";

export default function Demo() {
  return (
    <ThemeProvider>
      <Card>
        <CardHeader>
          <CardTitle>Sign in</CardTitle>
        </CardHeader>
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="[email protected]" />
        <Button className="mt-4">Continue</Button>
      </Card>
    </ThemeProvider>
  );
}

What's inside

| Group | Components | | ------------- | ------------------------------------------------------------------------------------------------------- | | Buttons | Button, IconButton, ButtonGroup, Link | | Forms | Input, Textarea, Label, FormHelperText, FormErrorText, Checkbox(Group), Radio(Group), Switch | | Select | Select+children, Combobox, MultiSelect, Slider, RangeSlider | | Display | Card+sub, Badge, Tag, Avatar+AvatarGroup, Separator, Skeleton, Spinner, Progress, CircularProgress, Meter, Code, Kbd |

Every component:

• ships forwardRef + displayName
• supports the asChild slot pattern where it composes (Button, Link, IconButton)
• inherits from the active data-theme via CSS variables
• has a visible focus ring (focus-visible outline in var(--focus-ring))
• meets the brand spec's ≥ 40 × 40 px touch-target rule
• uses Radix primitives under the hood where applicable for the WAI-ARIA pattern coverage

License

MIT © MGM Laboratory.