@amsterdam/design-system-react NPM

Amsterdam Design System: React components

This package provides all React components from the Amsterdam Design System. Use it to compose pages in your website or application.

Introduction

This package is the primary entry point for digital services that we build in-house. We’ve adopted the architecture of NL Design System.

Installation

The components reference our stylesheets, design tokens assets, and React icons. Install all packages.

npm install @amsterdam/design-system-assets @amsterdam/design-system-css @amsterdam/design-system-react @amsterdam/design-system-react-icons @amsterdam/design-system-tokens

The React components themselves are unstyled. Override the design tokens to use them with a different branding.

Usage

Import the stylesheets for the fonts, tokens, and components. Then import and use the components in your JSX.

import "@amsterdam/design-system-assets/font/index.css"
import "@amsterdam/design-system-css/dist/index.css"
import "@amsterdam/design-system-tokens/dist/index.css"
import { Paragraph } from "@amsterdam/design-system-react"

const App = () => (
  <Paragraph>Hello, world!</Paragraph>
)

export default App

Updating

We follow semantic versioning and publish a change log to guide you through updates. The React components are a public API of the design system. TypeScript helps to detect changed or deleted components, props, or prop values.