Installasjon

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

Krav

Kilden krever React 19 og Tailwind CSS v4. Komponentene leveres som Tailwind-klasser, og appens egen Tailwind genererer kun CSS for klassene som faktisk brukes — både dine og designsystemets.

1. Installer pakkene

npm install @kilden/designsystem

Har du ikke Tailwind CSS v4 fra før, følg Tailwinds installasjonsguide for rammeverket ditt først.

2. Sett opp CSS og tema

Importer Kilden i CSS-filen der du importerer Tailwind — etter @import "tailwindcss". styles.css gir deg design tokens som CSS custom properties, Tailwind-tema (farger, fonter, tekststørrelser, skygger og bevegelse) og animasjoner, og sørger for at Tailwind finner klassene komponentene bruker. Fontene importeres separat, slik at hver merkevare kan levere sine egne.

/* app.css */
@import "tailwindcss";
@import "@kilden/designsystem/styles.css";
@import "@kilden/designsystem/fonts/bekk.css";

Temaet velges med data-attributter på <html>-elementet:

Uten attributter får siden bekk med bekk-ild, som følger systeminnstillingen for lys og mørk modus.

// app/layout.tsx
import "./globals.css";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="no" data-brand="bekk" data-theme="bekk-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="secondary">Sekundær</Button>
    </div>
  );
}

Bruk Kilden-fargene i egne klasser

Alle semantiske farger fra design tokens er tilgjengelige som Tailwind-klasser, på samme måte som komponentene bruker dem:

<div className="bg-neutral-background-default text-neutral-text-default">
  <p className="text-neutral-text-subtle">Dempet tekst</p>
  <div className="border border-neutral-border-subtle bg-accent-surface-tinted" />
</div>

Kildens tekststørrelser (text-caption, text-small, text-body, text-title, text-heading-sm/-md/-lg, text-leading, text-action), fonter (font-sans, font-display, font-action), skygger (shadow-subtle, shadow-floating, shadow-overlay) og bevegelse (duration-fast/-default/-slow, ease-standard/-enter/-exit) er også tilgjengelige. Tailwinds p-4, rounded-md, font-medium og lignende følger merkevaren automatisk. Bruk cn() fra @kilden/designsystem når du slår sammen klasser — den kjenner Kildens egne verdier.

Hold deg til token-klassene

Tailwinds egne skalaer (text-sm, shadow-lg, bg-blue-500 osv.) virker fortsatt, men følger ikke merkevaren eller temaet. To verktøy hjelper deg og AI-agenter å unngå dem.

strict.css fjerner Tailwinds standardskalaer for farger, fonter, tekststørrelser, radius, skygger og easing. Klasser som ikke er koblet til tokens gir da ingen CSS, så du ser det med en gang. Importer den mellom Tailwind og Kilden:

@import "tailwindcss";
@import "@kilden/designsystem/strict.css";
@import "@kilden/designsystem/styles.css";

kilden-check følger med pakken og finner klasser som ikke følger Kilden – standardskalaer, faste verdier som p-[12px] og bg-[#fff], rå varigheter og fontvekter som ikke lastes. For hvert funn foreslår den token-klasser som kan erstatte klassen:

npx -p @kilden/designsystem kilden-check src

src/app/page.tsx:12  text-sm
  Tailwind-standardskala som ikke følger merkevaren. Bruk en token-klasse.
  Forslag: text-action, text-body, text-caption, text-small …

Med pnpm kan du også kjøre pnpm exec kilden-check src. Uten argumenter sjekkes src/ og app/. Kommandoen avslutter med kode 1 når den finner noe, så den kan kjøres i CI. Med --json får du funnene som JSON.

Mørk modus

Fargene følger systeminnstillingen for lys og mørk modus. Med data-color-scheme kan du tvinge en bestemt modus:

Attributtet kan også settes på et element lenger ned i treet, for eksempel for å vise en mørk seksjon på en lys side.

For å la brukeren bytte modus dynamisk kan du oppdatere attributtet med JavaScript, eller bruke applyThemeToDocument(theme, colorMode) fra @kilden/designsystem:

const html = document.documentElement;
 
// Bytt til mørk modus
html.setAttribute("data-color-scheme", "dark");
 
// Bytt til lys modus
html.setAttribute("data-color-scheme", "light");
 
// Følg systeminnstilling
html.removeAttribute("data-color-scheme");

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
• Bruk med AI — Gi AI-agenten din kunnskap om Kilden