Skip to content

The design system for
dense, data-heavy
dashboards.

AccessibleFigma,React andTailwindcomponents

Ship the same tokens, the same component names and the same behaviour in Figma and in code.

npm i @nokgridcore/ui
69components
Navigation, forms, tables and charts — every variant named like its React prop.
400+tokens
Colour, type, space and radius, aliased through primitives for Token Studio.
5full chart set
Line, bar, donut, spark and skeleton, with axes, legends and tooltips as real parts.
2Light and dark
One semantic layer, two modes. A new theme is a mode, not a stylesheet.

How it works

One system, from design to code

Decisions are made once in Figma Variables and flow straight into the components you ship.

  1. Colour, type, spacing and radius defined once in Figma Variables and synced to code through Token Studio and Style Dictionary.

    Explore tokens (opens in a new tab)
    Tokens Studio for Figma showing the brand colour tokens as JSON

  2. Every component with the same names, properties and states as the code, in light and dark.

    Open in Figma (opens in a new tab)

  3. Typed React components that read the tokens. No hardcoded values.

    View documentation (opens in a new tab)

  4. Every component, variant and state documented in Storybook.

    Open in docs (opens in a new tab)

Components

Everything a dashboard needs

Inputs, charts, tables, navigation and feedback, designed for data-heavy screens rather than adapted to them.

Orders by hourDelivered vs. In-progress
chart.barStacked bars with axes, gridlines and a legend as real parts.
Fulfilment by region
North
2,108 orders0%
Central
1,923 orders0%
East
1,203 orders0%
West
2,847 orders0%
progressLabelled rows carrying a count and a percentage.
Share by routeLast 7 months
Series label
Series label
Series label
chart.donutRing segments with a legend, and a filter action in the frame header.
Bookings over timeLast 7 months
Excludes cancelled bookings
chart.lineA smoothed series with an area fill, titled and footnoted by chart.frame.
Bookings by monthLast 7 months
chart.barGrouped bars across a seven-month axis.

Want to see more?

Sixty-nine components cover navigation, forms, tables, charts and overlays.

Built by

Made by a focused small team

Designers and engineers working from one file and one repo, so the system is decided once and shipped once.

FAQ

Frequently asked questions

Short answers to the things people ask before they install.

Yes. The components, tokens and Figma library are MIT licensed. Use them in commercial products without attribution.

Sixty-nine React components, 400+ design tokens shipped as CSS variables, JavaScript and a Tailwind theme, and the Figma library they are built from.

React 19 and Tailwind CSS 3.4. The tokens are plain CSS variables too, so you can use them without Tailwind.

Yes. Every semantic token has a light and a dark value. Set data-theme="dark" on any element to switch everything inside it.

Yes. @nokgridcore/tokens is its own package, with CSS variables, JavaScript constants and a Tailwind theme.

Tokens live in Figma Variables, are exported with Tokens Studio and built with Style Dictionary, so the library and the code read from the same source.

Yes. Point the brand tokens at your own palette and rebuild. Components only read semantic tokens, so nothing else has to change.

Dense screens need tight spacing, readable small type and charts that share one colour system. The components are sized for that from the start rather than adapted later.

The components are typed, themed and documented in Storybook. Pin your version and check the changelog before upgrading.

Start building

Install the package or open the Figma library.

pnpm add @nokgridcore/ui