# Kilden Designsystem

> Et designsystem bygget med React, Tailwind CSS og semantiske design tokens.

## Kom i gang

- [Introduksjon](/docs/getting-started/introduction.md): Kilden er Bekks designsystem — et komponentbibliotek med React-komponenter, design tokens og Tailwind CSS-støtte.
- [Installasjon](/docs/getting-started/installation.md): Slik setter du opp Kilden i prosjektet ditt — med Next.js eller React Router

## Komponenter

- [Button](/docs/components/button.md): En allsidig knapp-komponent med flere varianter og størrelser.
- [Breadcrumb](/docs/components/breadcrumb.md): Brødsmulesti for navigasjonshierarki.
- [Dialog](/docs/components/dialog.md): Modal-vindu for viktige handlinger som krever brukerens oppmerksomhet.
- [Alert](/docs/components/alert.md): Fremhevede meldingsbokser for tips, advarsler og viktig informasjon.
- [Accordion](/docs/components/accordion.md): Sammenleggbare seksjoner for å vise og skjule innhold.
- [Checkbox](/docs/components/checkbox.md): Avkryssingsboks for binære valg og flervalg i skjemaer.
- [NavigationMenu](/docs/components/navigation-menu.md): Toppnivå-navigasjonsmeny med dropdowns.
- [DropdownMenu](/docs/components/dropdown-menu.md): Kontekstmeny med handlinger, avkrysning og tastaturnavigasjon.
- [Progress](/docs/components/progress.md): Fremdriftsindikator for lasting og prosesser.
- [Avatar](/docs/components/avatar.md): Brukerbilder med fallback til initialer.
- [FormField](/docs/components/form-field.md): Hjelpere for å strukturere skjemafelt med label, hjelpetekst og feilmelding.
- [Tabs](/docs/components/tabs.md): Fanebasert navigasjon for å bytte mellom ulike visninger av relatert innhold.
- [Popover](/docs/components/popover.md): Flytende innholdsboks som åpnes ved klikk, med støtte for interaktive elementer.
- [Skeleton](/docs/components/skeleton.md): Plassholder-animasjon for innhold som lastes.
- [Badge](/docs/components/badge.md): Små visuelle markører for statuser, kategorier og metadata.
- [Input](/docs/components/input.md): Tekstfelt for brukerinput med støtte for ulike typer og tilstander.
- [Sheet](/docs/components/sheet.md): Sidepanel-overlay som glir inn fra en kant av skjermen.
- [Toast](/docs/components/toast.md): Flyktige varsler som dukker opp og forsvinner automatisk.
- [Card](/docs/components/card.md): Container-komponent for å gruppere relatert innhold med header, innhold og footer.
- [Label](/docs/components/label.md): Tilgjengelig label-komponent for skjemaelementer.
- [Tooltip](/docs/components/tooltip.md): Kontekstuell informasjon som vises ved hover eller fokus.
- [ScrollArea](/docs/components/scroll-area.md): Tilpasset scrollbar for containere med begrenset høyde.
- [RadioGroup](/docs/components/radio-group.md): Radioknapper for enkeltvalg fra en synlig liste med alternativer.
- [Separator](/docs/components/separator.md): Visuell skillelinje for å dele opp innhold i seksjoner.
- [Select](/docs/components/select.md): Tilgjengelig nedtrekksmeny for å velge blant alternativer.
- [Table](/docs/components/table.md): Strukturert datatabell med header, body, footer og styling.
- [Slider](/docs/components/slider.md): Slider for å velge numeriske verdier innenfor et intervall.
- [Switch](/docs/components/switch.md): Toggle-bryter for å slå av og på innstillinger.
- [Textarea](/docs/components/textarea.md): Flerlinjers tekstfelt for lengre brukerinput.
- [Toggle](/docs/components/toggle.md): Trykknapp med av/på-tilstand for verktøylinjer og handlinger.

## Design Tokens

- [Farger](/docs/tokens/colors.md): Designsystemets fargetokens og hvordan du bruker dem.
- [Typografi](/docs/tokens/typography.md): Designsystemets typografi-tokens for skriftstørrelser, vekter og stiler.
- [Størrelser](/docs/tokens/spacing.md): Designsystemets størrelsestokens for spacing, padding og layout.
- [Avrunding](/docs/tokens/radius.md): Designsystemets border-radius-tokens for avrundede hjørner.
- [Kantlinjer](/docs/tokens/borders.md): Designsystemets tokens for kantlinjebredder og -stiler.
- [Skygger](/docs/tokens/elevation.md): Designsystemets elevation-tokens for skygger og dybde.

## Eksempler

- [Innloggingsside](/docs/examples/login.md): Et komplett innloggingsskjema med Card, FormField, Input, Label, Checkbox og Button.
- [Kontaktskjema](/docs/examples/contact-form.md): Et kontaktskjema med Input, Textarea, Select, RadioGroup og validering.
- [Innstillingsside](/docs/examples/settings.md): En innstillingsside med Tabs, Switch, Select, FormField og Separator.
- [Dashboard](/docs/examples/dashboard.md): Et dashboard med Card, Table, Badge, Progress, Avatar og Tabs.