This package provides all React components from the Amsterdam Design System. Use it to compose pages in your website or application.
This package is the primary entry point for digital services that we build in-house. We’ve adopted the architecture of NL Design System.
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-tokensThe React components themselves are unstyled. Override the design tokens to use them with a different branding.
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 AppWe 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.
Despite being on ‘major version zero’, most components are stable enough to be used in production. Various of our public-facing websites and applications already do.
Make sure you specify the exact version as dependency and test for regressions when upgrading to the latest version.
We’re finalizing the design and modelling of foundational concepts like typography, spacing, and colour. After that, and a final review of the API of all current components, we’ll release version 1.0 of the entire design system. Then, we’ll consider publishing all components separately to allow for more granular updates.
Components for which we anticipate API changes show a ‘beta’ badge at the top of their page in the Design System handbook.
Contact us if you have a question, find an issue, or want to contribute. Find ways to reach us on designsystem.amsterdam.