Installation

The Quick start takes the design-system/ folder ready-made from a Release. This page builds it from the code instead, and sets up a site that uses the React components.

To build from the code: git, and Node 22 or later.
For the React components: React 19 and a build tool that compiles TypeScript and JSX, such as Vite, which this site is built with.

Clone the repository, install what it builds with, and build the stylesheet, the fonts and the icons:

Terminal

git clone https://github.com/simbolik-lab/simbolik-design-system.git
cd simbolik-design-system
npm ci
npm run css:bundle

That writes css/simbolik.css, the design tokens and every component in one stylesheet, and assets/, the fonts and the icon font with their licenses. A fresh clone is at the latest Release, 0.2.2-alpha. Copy assets/, css/, components/, conformance/, output/, package.json and LICENSE into one folder of your site, design-system/, the name every site built on the system gives it, and the one the code on these pages uses.

The React components import @internationalized/date, react, react-aria, react-dom and react-stately. They sit in your site's design-system/ folder, outside your site's own packages, so a build that finds each import from the file it is in will not find them. Worse, it can find a second copy, and a page with two copies of React breaks its hooks.

List the packages in your site's own package.json, at the versions the design system's names, and tell the build to take every one of them from your site's packages. In Vite that is resolve.dedupe:

{
  "dependencies": {
    "@internationalized/date": "^3.12.4",
    "react": "^19.3.0",
    "react-aria": "^3.53.1",
    "react-dom": "^19.3.0",
    "react-stately": "^3.51.0"
  }
}

Every React example on this site starts with the import line of the components it uses. Copy it with the example.

Menu

Requirements

Build from the code

React