Package Exports
- @amsterdam/design-system-react
- @amsterdam/design-system-react/dist/index.cjs.js
- @amsterdam/design-system-react/dist/index.esm.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@amsterdam/design-system-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Amsterdam Design System: React components
This package provides all React components from the Amsterdam Design System. Use it to compose pages in your websites.
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-tokensThe 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 AppUpdating
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.
Support
Contact us if you have a question, find an issue, or want to contribute. Find ways to reach us on designsystem.amsterdam.