Skip to content
Getting started

Installation

Get Gridnivo into Figma in a few minutes, then add the same tokens to your code.

5 min readUpdated [DATE]

01Get the Figma file

Start with the free Lite file, or download the full library from your account if you have Pro.

1Open the fileFree: open Gridnivo Lite on Figma Community. Pro: download it from your account.
2Duplicate it to your draftsClick Open in Figma, then move the copy into your team project.
3Publish it as a libraryIn the copy, open Assets → Libraries and click Publish.

02Turn on the library

In any design file, open Assets → Libraries and switch on the Gridnivo libraries you need. Components, styles and variables then show up in the Assets panel.

TipTurn on Gridnivo Icons as its own library. It keeps the Assets panel fast and lets you swap icon styles without touching components.

03Install the fonts

Gridnivo uses Geist for interface text and Geist Mono for numbers and code. Both are free (SIL Open Font License). Install them before opening the file so nothing falls back to a system font.

Geist400 · 500 · 600 · 700
Geist Mono400 · 500 · 600
LicenseSIL OFL 1.1

04Install for code

Add the React package to your project.

React · Upcoming
Terminal
$ npm install @gridnivo/react @gridnivo/tokens
React is on the wayThe package name and API shown here are a preview. Until it ships, use the Figma library and the token files below.

05Add the tokens

The same variables live in Figma and in code. Import the CSS once, at the root of your app, and every value matches the file.

app/globals.css
@import "@gridnivo/tokens/tokens.css";

:root {
  --gn-brand-500: #715AFF;
  --gn-ink-950: #0A0A0A;
  --gn-radius-md: 10px;
  --gn-font-sans: "Geist", system-ui, sans-serif;
}

.dark {
  --gn-surface: #0A0A0A;
  --gn-text: #FAFAFA;
}

06Next steps

NEXTThemingSwap brand colour, radius and font in one place.BROWSEComponentsEvery component with variants, states and tokens.BROWSEIconsLine, Solid and Bulk in six sizes.
Was this page helpful?