Minim Design System

React components and semantic tokens for the Minim Design System.

Install

npm install @poposnail/minim-design-system

The package expects React to be installed in the consuming app.

Usage

Import the style bundle once at the app root.

import "@poposnail/minim-design-system/styles.css";

Use components from the package entry.

import { Button, SelectField, Table, TableRow, HeaderCell, Cell } from "@poposnail/minim-design-system";

export function Example() {
  return (
    <>
      <Button label="Confirm" kind="primary" variant="solid" size="large" />

      <SelectField defaultValue="active" onValueChange={(value) => console.log(value)}>
        <option value="active">Active</option>
        <option value="paused">Paused</option>
      </SelectField>

      <Table>
        <TableRow variant="header">
          <HeaderCell label="Name" />
          <HeaderCell label="Status" />
        </TableRow>
        <TableRow>
          <Cell label="Minim" />
          <Cell label="Ready" />
        </TableRow>
      </Table>
    </>
  );
}

Density

base is the default density. Set data-minim-density="compact" on an app root or a local container to use the Compact values defined in Figma.

export function CompactSurface() {
  return (
    <div data-minim-density="compact">
      <Button label="Confirm" size="large" />
    </div>
  );
}

Compact changes semantic Body typography, component heights, component spacing, and height-derived full radii. Caption typography and height/h18, height/h20, height/h22, and height/h100 remain unchanged.

The previous --size-h* CSS variables remain available as deprecated aliases for compatibility. Use --height-h* in new work.

Development

npm run dev
npm run build
npm run build:lib
npm run typecheck

• npm run build builds the documentation/demo site.
• npm run build:lib builds the React library into dist-lib.
• npm run typecheck validates the exported library surface.

Implementation Rules

When implementing Figma screens with this package:

• Use existing components before creating new ones.
• Use semantic tokens only.
• Do not consume base tokens in component code.
• Read guidelines/Guidelines.md and guidelines/ComponentMapping.md before mapping Figma screens to React code.
• Use the default, section, and card mobile layout patterns documented in guidelines/Guidelines.md when implementing mobile screens.