Komponentbibliotek

Designsystemet er delt opp i et knippe forskjellige pakker, som lastes ned enkeltvis fra NPM. Du kan se en komplett oversikt over tilgjengelige pakker på npm.

Alle pakkene krever React 18 eller nyere – react og react-dom er peerDependencies, så de installeres av prosjektet ditt.

Du kan bruke yarn eller npm til å installere pakkene – det er opp til prosjektet ditt. Har prosjektet ditt en yarn.lock, bruker du yarn add, og har du package-lock.json, så bruker du npm.

Velg gjerne det du bruker i prosjektet ditt i innstillingsmenyen oppe i høyre hjørne.

Det avhenger av hva du skal lage, men en god start kan være disse:

@entur/tokens bør alltid være med – den inneholder farger, spacing og typografi som resten av pakkene bygger på.

Komponentene har ingen innebygde stiler – CSS-en ligger i egne filer i hver pakke, og må importeres globalt i applikasjonen din. Rekkefølgen mellom pakkene betyr noe.

Se CSS og stiler for hvordan du importerer, hele rekkefølgelisten og feilsøking når stilene ikke oppfører seg.

Hver av pakkene kommer med sine egne universelt utformede React-komponenter, som gjør det enkelt for React-utviklere å lage komplette apper. Du finner API-dokumentasjonen for alle komponentene her.

Designsystemets pakker benytter seg kun av named exports. Dette gjør at du alltid vil importere komponenter og funksjoner slik:

import { EnKomponent, useEnHook } from '@entur/en-pakke';

Du vil med andre ord aldri se default exports.

Alle pakker leveres med komplette TypeScript-typer, eksportert på toppnivå sammen med komponentene.

De er på formen KomponentnavnProps, så eksempelvis så har komponenten Dropdown typene eksponert via DropdownProps.

import { Dropdown } from '@entur/dropdown';
import type { DropdownProps } from '@entur/dropdown';

Mange komponenter tar en as-prop, slik at du kan beholde utseendet men endre elementet som rendres – nyttig for f.eks. en knapp som egentlig er en lenke:

<PrimaryButton as="a" href="/kjop-billett">
  Kjøp billett
</PrimaryButton>

Vi publiserer skills som gir kodeagenter som Claude Code, Copilot og Cursor kunnskap om @entur/*-pakkene, tokens, visuell identitet og universell utforming. Se Skills for installasjon og bruk.

Hvis du har spørsmål, ta kontakt på #talk-designsystem på Slack. Hvis du mangler tilgang til dokumentasjon (skisser og collections) i Figma, kontakt Sergio Haisch.

Designsystem-teamet trenger så mye hjelp de kan få – både med å skrive dokumentasjon, lage eksempler, skrive tester, finne bugs og fikse dem. Se bidra med kode for hvordan du kommer i gang i repoet.

Om du ikke har tid til å gjøre det selv, kan du lage et issue på Jira. Om du bare lurer på noe, ta kontakt på #talk-designsystem på Slack.