@statisticsnorway/design-react

React components for SSB Designsystem.

This package currently re-exports components and utilities from @digdir/designsystemet-react and will gradually be extended with SSB-specific components.

Installation

Install the React and CSS packages:

npm install @statisticsnorway/design-css @statisticsnorway/design-react

Setup

Load styles

Import the base styles and theme in your application entrypoint, for example main.tsx:

import '@statisticsnorway/design-css'
import '@statisticsnorway/design-css/theme'

Alternatively, import them from your main CSS file:

@import '@statisticsnorway/design-css';
@import '@statisticsnorway/design-css/theme.css';

Icons

Icons from @navikt/aksel-icons are included as a dependency and do not need to be installed separately.

Fonts

The Roboto font is included in the stylesheet package but is not applied globally.

To use it across your application, add the following to your global CSS:

body {
  font-family: var(--ds-font-family);
}

The included Roboto font files are licensed under Apache License 2.0.

TypeScript

If you are using TypeScript, add the Designsystemet React types and SSB theme types to your tsconfig.json:

{
  "compilerOptions": {
    "types": ["@digdir/designsystemet-react/react-types", "@statisticsnorway/design-css/theme"]
  }
}

This enables type support for Designsystemet React components and SSB-specific theme colors such as primary, secondary, magic, and neutral.

Usage

import { Button, Heading, Paragraph } from '@statisticsnorway/design-react'

export function App() {
  return (
    <>
      <Heading level={1}>Hello from SSB Designsystem</Heading>
      <Paragraph>Use SSB-styled components based on Digdir’s Designsystemet.</Paragraph>
      <Button>Continue</Button>
    </>
  )
}

Status

🚧 This package is under active development.