Installasjon

Denne guiden viser deg hvordan du setter opp Kilden i et nytt eller eksisterende prosjekt. Velg rammeverket du bruker for å se riktige instruksjoner.

1. Installer pakkene

npm install @kilden/designsystem @kilden/design-tokens

2. Sett opp CSS og tema

Kilden leverer en CSS-fil som må importeres i appen din. Denne inneholder alle komponentstiler og design tokens som CSS custom properties.

Du må også sette data-theme-attributtet på <html>-elementet for å velge fargeprofil. Tilgjengelige temaer er ild, luft, vann og jord.

For å støtte mørk modus, legg til -dark eller -light som suffiks (f.eks. ild-dark), eller bruk temanavnet uten suffiks for å følge systeminnstillingen.

Importer CSS-filen i din rot-layout, og sett data-theme på <html>:

// app/layout.tsx
import "@kilden/designsystem/styles.css";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="no" data-theme="ild">
      <body>{children}</body>
    </html>
  );
}

3. Bruk en komponent

Nå er du klar til å bruke Kilden-komponenter i prosjektet ditt:

import { Button } from "@kilden/designsystem";
 
export function MyComponent() {
  return (
    <div style={{ padding: "2rem" }}>
      <h1>Hei, Kilden!</h1>
      <Button>Klikk meg</Button>
      <Button variant="secondary">Sekundær</Button>
      <Button variant="outline">Outline</Button>
    </div>
  );
}

Bruk med Tailwind CSS

Kilden fungerer utmerket sammen med Tailwind CSS. Design tokens er tilgjengelige som CSS custom properties, så du kan bruke dem direkte i Tailwind-klasser.

Sett opp Tailwind med Kilden-farger

I Tailwind v4 definerer du tema direkte i CSS-filen din:

/* app.css */
@import "tailwindcss";
 
@theme {
  --color-page: var(--color-neutral-background-default);
  --color-surface: var(--color-neutral-surface-default);
  --color-on-page: var(--color-neutral-text-default);
  --color-muted: var(--color-neutral-text-subtle);
  --color-link: var(--color-accent-text-default);
  --color-line: var(--color-neutral-border-subtle);
}

Nå kan du bruke fargene i Tailwind-klasser:

<div className="bg-page text-on-page">
  <p className="text-muted">Dempet tekst</p>
  <a className="text-link">En lenke</a>
</div>

Mørk modus

Kilden har innebygd støtte for mørk modus via data-theme-attributtet. Legg til -dark eller -light som suffiks for å tvinge en spesifikk modus:

`data-theme`	Beskrivelse
`ild`	Følger systeminnstilling
`ild-light`	Alltid lys modus
`ild-dark`	Alltid mørk modus

For å la brukeren bytte modus dynamisk kan du oppdatere attributtet med JavaScript:

// Bytt til mørk modus
document.documentElement.setAttribute("data-theme", "ild-dark");
 
// Bytt til lys modus
document.documentElement.setAttribute("data-theme", "ild-light");
 
// Følg systeminnstilling
document.documentElement.setAttribute("data-theme", "ild");

Tips

Hvis du vil unngå et "flash" av feil tema ved sidelasting, kan du sette data-theme med et inline script i <head> — før resten av siden rendres.

Uten Tailwind CSS

Hvis du ikke bruker Tailwind CSS, fungerer Kilden likevel. CSS-filen du importerer inneholder alle komponentstilene. Design tokens er tilgjengelige som CSS custom properties som du kan bruke direkte:

.my-card {
  background-color: var(--color-neutral-surface-default);
  color: var(--color-neutral-text-default);
  border: 1px solid var(--color-neutral-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
}

Neste steg

Nå som du er i gang, kan du utforske videre:

Se alle komponenter — Start med Button og jobb deg videre
Design tokens — Lær om farger, typografi og spacing