Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/digdir/designsystemet

Designsystemet
https://github.com/digdir/designsystemet

components css designsystem react storybook tokens typescript

Last synced: 7 days ago
JSON representation

Designsystemet

Host: GitHub
URL: https://github.com/digdir/designsystemet
Owner: digdir
License: mit
Created: 2022-08-30T08:05:21.000Z (over 2 years ago)
Default Branch: next
Last Pushed: 2025-01-24T09:30:45.000Z (9 days ago)
Last Synced: 2025-01-24T10:26:31.724Z (9 days ago)
Topics: components, css, designsystem, react, storybook, tokens, typescript
Language: TypeScript
Homepage: https://designsystemet.no
Size: 114 MB
Stars: 90
Watchers: 5
Forks: 40
Open Issues: 227
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS

Awesome Lists containing this project

README

Designsystemet

## 📖 About Designsystemet

Designsystemet is a collection of important design elements, components and patterns that can be used to build public services.

Our goal is to create consistent and user-friendly experiences in digital solutions for public services, making them more efficient and reliable.

## 🔗 Links

[Storybook](https://storybook.designsystemet.no/) - Preview for React components.

[Storefront](https://designsystemet.no/) - General documentation about the design system.

[Theme](https://theme.designsystemet.no/) - Theme builder.

## 📦 Packages

[`@digdir/designsystemet`](https://www.npmjs.com/package/@digdir/designsystemet) - CLI for Designsystemet.

[`@digdir/designsystemet-theme`](https://www.npmjs.com/package/@digdir/designsystemet-theme) - Themes for Designsystemet.

[`@digdir/designsystemet-css`](https://www.npmjs.com/package/@digdir/designsystemet-css) - Styling for components.

[`@digdir/designsystemet-react`](https://www.npmjs.com/package/@digdir/designsystemet-react) - React implementation of Designsystemet components.

## 🚀 Get started

Follow these steps to get started with the React components.

### 1. Install the packages

Depending on your needs and technology stack install the relevant packages

```sh
npm i @digdir/designsystemet
npm i @digdir/designsystemet-css
npm i @digdir/designsystemet-theme
npm i @digdir/designsystemet-react
```

#### 1.1 Custom theme

You can create your own theme to use with the Designsystemet packages by going to our [theme-builder](https://theme.designsystemet.no/).

Designsystemet theming is defined using [design-tokens](https://www.uxpin.com/studio/blog/what-are-design-tokens).
This is done so that you can use [Token Studio](https://tokens.studio/) to sync your theme in code with [Designsystemet Figma UI kit](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit), in addition to provide future flexibility.

Run `npx @digdir/designsystemet tokens build` to build CSS files for your custom theme (from the design-tokens).
Using your own built CSS theme file you can skip using the `@digdir/designsystemet-theme` package.

### 2. Font

You are free to use any font-family with the components.

The components are designed and developed using the [Inter font](https://github.com/rsms/inter) so variations might occur if a different font is used.

#### Add the Inter font (optional)

Add the `` tag in ``, and set `font-family` to `Inter` in your global css file.

The `font-feature-settings` adds a tail to lowercase `L`'s.

##### HTML

```html

```

##### CSS

```css
body {
font-family: 'Inter', sans-serif;
font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */
}
```

If you choose to install the font in a different way, remember to include the `400`, `500` and `600` font weights.

### 3. Use a React component

```jsx
import '@digdir/designsystemet-theme';
import '@digdir/designsystemet-css';

import { Button } from '@digdir/designsystemet-react';

I am a button!;
```

`@digdir/designsystemet-theme` and `@digdir/designsystemet-css` only needs to be imported once.

### 4. Add TypeScript types for colors

Because color names depend on which theme is being used, you have to add the following to your `tsconfig.json` to
use all your colors in the components which have a `data-color` prop:

#### When using `@digdir/designsystemet-theme`

```jsonc
{
// ...other settings
"compilerOptions": {
// ...other compilerOptions
"types": [
// ...other types
"@digdir/designsystemet-theme/colors.d.ts"
]
},
}
```

#### When using a custom theme
The CLI `designsystemet tokens build` command will output a `colors.d.ts` file to your chosen output directory.
In the example, replace `` with the actual path you used when running the command.

```jsonc
{
// ...other settings
"compilerOptions": {
// ...other compilerOptions
"types": [
// ...other types
"/colors.d.ts"
]
},
}
```

### 5. Add editor hints for data-color & data-size on HTML elements (optional)

You may want editor hints for `data-color` and `data-size` attributes on HTML elements
like `` or `

`, since these attributes can affect components nested within
these elements.

This requires augmenting React's built-in types, and is therefore opt-in. If you want this,
add the following to your `tsconfig.json`:

```jsonc
{
// ...other settings
"compilerOptions": {
// ...other compilerOptions
"types": [
// ...other types
"@digdir/designsystemet-react/react-types.d.ts"
]
},
}
```

## 🫶 Contributing

Learn how you can contribute to this project by reading our [Code of Conduct](./CODE_OF_CONDUCT.md) and [Contributing Guide](./CONTRIBUTING.md).

## 💪 Contributors

We are lucky to have a great group of people who help with the design system.

Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.