|
Diametral
Design System
|
Use the Diametral Design System for your apps
|
|
Team — we now have one shared Diametral Design System: a buildless component library and app shell so we stop rebuilding buttons, tables and themes in every project. It's live and on npm.
|
Heads-up — visuals are not final. Juliette (CMO) still has to sign off on the look, and you can expect style tweaks over the coming days. The component APIs are stable, so build now — the styling is all design tokens + .ds-* classes and will update under you with no code changes.
|
|
|
▸ Open the demo app
Showcase & docs
|
| Install (public npm — no token) |
npm i @diametral/design-system
import "@diametral/design-system/css/diametral.css";
import { Button, DataGrid, ConsoleLayout } from "@diametral/design-system/react";
|
In it: ~60 components, charts, a data grid, kanban, a ⌘K command palette, a turnkey <ConsoleLayout>, forms & data hooks, icons, theming and copy-paste blocks. Need a running app? Clone starters/vite-react/.
|
Good to know: flat by design (1px rules, no radius), every class is .ds-*-namespaced, and accessibility is checked in CI. Titles use the commercial Ufficio font — if a project doesn't hold a license, skip ufficio.css and titles fall back automatically.
|
|
Docs & issues: github.com/LittleBigCode/design-system (installation, recipes, forms/data).
|
Try it on your next screen and tell me what's missing.
Thanks,
Vincent
|