Frameworks

React

Real React components that wrap the same .ds-* markup — typed, tree-shakeable, and buildless. The live demo below is rendered by React loaded straight from a CDN: no bundler, no transpiler.

Live demo

Everything below is a React tree. Toggle Dark theme to see the design tokens re-theme the whole page live. Open the modal to see a portaled <Modal>.

Rendered by React

Loading React from the CDN…

Setup

Install & import

npm i @diametral/design-system react react-dom

// once, at your app root:
import "@diametral/design-system/css/diametral.css";

import { Button, Status, Metric } from "@diametral/design-system/react";

Usage

JSX

function Verdict() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button variant="primary" onClick={() => setOpen(true)}>Open</Button>

      <Status status="success" kicker="Approval level"
              heading="Full delegation" subtitle="Approve without arbitration">
        <div className="ds-status__body">
          <Metric label="Margin" value="38 %" variant="hero" sign={1} />
          <Metric label="Day rate" value="€900" />
        </div>
      </Status>

      <Modal open={open} onClose={() => setOpen(false)} heading="Settings"
             footer={<Button variant="primary">Save</Button>}>
        <p>Body content…</p>
      </Modal>
    </>
  );
}

Full component list and props: react/README.md. TypeScript types ship in react/index.d.ts.