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, med tastaturnavigasjon og skjermleserstøtte. Alle sider testes automatisk med axe, med mål om WCAG 2.1 AA.

Temabasert

Fire 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

Rett inn i Tailwind CSS v4-oppsettet ditt. Kun klassene du bruker genereres, og agent-skill og llms.txt følger med.

Design tokens

Fire temaer.
Eller bygg ditt eget.

Hvert tema har sin egen personlighet — fra varme jordtoner til friske blåtoner. Bytt tema med en enkelt prop, eller bruk temabyggeren til å lage et helt eget uttrykk.

Ild

Varme og energi

Luft

Lett og fri

Vann

Ro og dybde

Jord

Natur og styrke

App.tsx

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

Enkel i bruk

Klar på minutter, ikke timer.

Installer pakken, importer Kilden i Tailwind-CSS-en din og ta i bruk komponentene. Design tokens sørger for at alt ser riktig ut fra første linje.

$ pnpm add @kilden/designsystem

Playground

Prøv, del og utforsk.

Skriv kode i den interaktive playgrounden og se resultatet live. Koden lagres automatisk i URLen, så du kan dele eksempler med kollegaer med et enkelt klikk.

Playground

<Card className="p-6">
  <Heading>Hei!</Heading>
  <Button>Klikk</Button>
</Card>

Hei!

Klikk

AI-ready

Bygget for mennesker.
Og maskiner.

Kilden leveres med en egen agent skill som gir AI-verktøy full forståelse av designsystemet. I tillegg er all dokumentasjon tilgjengelig i maskinlesbare formater via llms.txt.

Terminal

$ claude
> Lag et skjema med navn og e-post.
  Bruk Kilden-komponenter.

// AI-en kjenner alle 45+ komponenter,
// varianter, tokens og mønstre.

Skill

Agent skill inkludert

llms.txt

Maskinlesbar docs

45+

Dokumenterte komponenter

Klar til å bygge?

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