Kilden – et designsystem

Bygg bekkete grensesnitt.

Et komponentbibliotek bygget med React, Tailwind CSS og design tokens. Tilgjengelig, fleksibelt og typesikkert — fra design til produksjon.

React 19TypeScriptTailwind CSS 4

Hvorfor Kilden?

Alt du trenger for å bygge konsistente brukeropplevelser.

Tilgjengelig

Bygget med Radix UI og WAI-ARIA. Tastaturnavigasjon, skjermleser-støtte og WCAG 2.1 AA som standard.

Temabasert

Fem unike temaer med lys og mørk modus. Design tokens gjør det enkelt å tilpasse utseendet.

Typesikker

Full TypeScript-støtte med CVA-baserte varianter. Autofullføring og kompileringsfeil som hjelper deg.

Komposisjon

Fleksible komponenter med asChild-mønsteret. Bygg komplekse grensesnitt fra enkle byggeklosser.

Lett og rask

Tree-shakeable ESM-eksporter. Kun det du bruker havner i produksjonsbundelen din.

Utvikleropplevelse

Rask oppsett med pnpm. Hot reload, automatisk CSS-generering og enkel integrasjon med Tailwind.

Design tokens

Fem temaer.
Uendelige muligheter.

Hvert tema har sin egen personlighet — fra varme jordtoner til friske blåtoner. Bytt tema med en enkelt prop, og hele applikasjonen følger med.

Ild

Varme og energi

Luft

Lett og fri

Vann

Ro og dybde

Jord

Natur og styrke

+ Whitelabel

App.tsx

1import { Button } from "@kilden/designsystem";23function App() {4  return (5    <Button variant="default" size="lg">6      Kom i gang7    </Button>8  );9}

Enkel i bruk

Klar på minutter, ikke timer.

Installer pakken, importer en komponent, og du er i gang. Tailwind CSS og design tokens sørger for at alt ser riktig ut fra første linje.

$ pnpm add @kilden/designsystem

Klar til å bygge?

Kom i gang med Kilden i dag. Les dokumentasjonen, utforsk komponentene, og bygg noe flott.