developing with it
The design system comes as one package for React apps. It holds the components with their styles, the brand's marks, and the design tokens in three forms. This site says when and why to use each part; the React subsite shows how, with code.
install a release
Each release on GitHub carries the packed package, a tarball, and apps install it straight from its address, with no package registry in between:
npm i https://github.com/nalet/design-system/releases/download/v0.4.0/nalet-design-system-0.4.0.tgzThe releases and what changed in each are on versioning & changelog. React has the rest of the setup: the packages that go next to it, the stylesheet and the fonts.
the parts
| you need | use | read |
|---|---|---|
| The components, in a React app | The package and its stylesheet | React, then each component on the React subsite |
| The identity, without the components | The tokens: as CSS custom properties, as typed values, or as a Tailwind preset | Tokens |
| An app inside the portal shell | The shell's copy of the design system | Apps in a shell |
| A change to the system itself | The repository | Contributing |
from guidance to code
Every component page on this site has a link to its React implementation at the top. The React page has the playground, where every setting can be tried live; the examples, each with its code; the table of settings; and notes on how the component is built: the browser element it uses, the ARIA attributes it sets, and its keyboard map.
The examples on both sites are written once and shared, so what you see here is what the code does.