# Installation

Build the design-system folder from the code, and set up a React site to use its components.

The [Quick start](https://design.simbolik.ai/docs/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.

## Requirements

- **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.

## Build from the code

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

Terminal:

```sh
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.

## React

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`:

package.json, package.json:

```json
{
  "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"
  }
}
```

Vite, vite.config.ts:

```ts
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    dedupe: ['@internationalized/date', 'react', 'react-aria', 'react-dom', 'react-stately'],
  },
});
```

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

Next: [Theme and density](https://design.simbolik.ai/docs/theme-and-density/): The switches that change how the components look, and how your own CSS follows them.