Grunnleggende

Kom i gang med kodepakkene

StabilOppdatert 12. mai 2026

Introduksjon

Dette er en rask innføring i hvordan du tar i bruk kodepakkene våre. Hvis du er utvikler i Nav som skal starte på et nytt prosjekt, anbefaler vi at du også leser artikkelen om Golden Path for frontend i Nav.

Installasjon

terminal

yarn add @navikt/ds-react @navikt/ds-css
npm install @navikt/ds-react @navikt/ds-css

Aksels pakker finner man på både NPM og GPR (GitHub Package Registry). Vi anbefaler team i Nav å bruke GPR om mulig. Får du 401-error ved installering kan det være lurt å sjekke token i .npmrc

Bruk

jsx
import "@navikt/ds-css"; // <- Trenger bare importeres ett sted
import { Button } from "@navikt/ds-react";

<Button variant="primary">Send inn søknad</Button>

All React-koden er tree-shakable, slik at du bare inkluderer den koden du trenger. Les mer om komponent-API.

CSS

Pakken @navikt/ds-css inneholder all komponentstyling, fonter, ulike CSS-resets, print-styling, CSS-variablene våre fra @navikt/ds-tokens og normalize.css v8.

Stylelint

Vi anbefaler alle å ta i bruk stylelint-konfigurasjonen vår. Den hjelper deg med å unngå feil og følge anbefalt praksis.

Fontlasting

Fonten vi benytter blir lastet fra CDN, slik at du må gjøre noen tilpasninger i løsningen din.

Vi angir font-display: swap, som medfører at en erstatningsfont vil bli lastet dersom den fonten ikke hentes raskt nok. For å unngå FOUT anbefales det å legge til en link-tag med preload i <head>. Les mer om font preloading.

html
<link
  rel="preload"
  href="https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Du må også oppdatere content security policy for å tillate font-src fra cdn.nav.no.

Content Security Policy (CSP)
font-src 'self' https://cdn.nav.no

Ikoner

Ikonpakken vår inneholder 800+ ikoner i stroke- og fill-versjon. Disse kan benyttes som separate React-komponenter eller direkte som SVG-er etter behov.

bash

yarn add @navikt/aksel-icons
npm install @navikt/aksel-icons

tsx
import { StarIcon } from "@navikt/aksel-icons";

<StarIcon title="Alternativ tekst" fontSize="1.5rem" />

Standard bredde og høyde på ikonene er satt til 1em for å gjøre det enkelt å plassere ikonene inline med tekst. Ellers anbefaler vi å bruke 24px (fontSize="1.5rem") der det er mulig, da ikonene er designet for denne størrelsen.

Vi anbefaler også å bruke title-attributtet der det er mulig, fremfor aria-label, ettersom dette gir en bedre opplevelse for skjermleserbrukere.

Språk

Dersom appen din har støtte for flere språk, kan du bruke Provider til å endre språket på komponentene.

Versjonering

Sørg for at alle Aksel-pakkene du bruker er på samme versjonsnummer. Dette sikrer at alle løsningene fra oss fungerer optimalt sammen.

Dependabot

Det er generelt anbefalt å bruke Dependabot for å holde avhengigheter oppdatert med tanke på sårbarheter. Dependabot bør da settes opp til å gruppere alle Aksel-pakkene slik at de oppgraderes samtidig. Dette kan gjøres ved å legge til følgende under - package-ecosystem: npm i filen .github/dependabot.yml:

yaml
groups:
  aksel:
    patterns:
      - "@navikt/aksel*"
      - "@navikt/ds*"

Se eventuelt hvordan andre har satt opp sin dependabot.yml-fil.