The primary action element. Four semantic variants cover every context from primary CTAs to destructive operations.

<dk-button variant="primary">Get started</dk-button>
<dk-button variant="secondary">Learn more</dk-button>
<dk-button variant="ghost">Cancel</dk-button>
<dk-button variant="danger">Delete</dk-button>
<dk-button variant="primary" loading>Saving…</dk-button>
<dk-button variant="primary" href="/page">Navigate</dk-button>

Small inline labels for status, categories, and counts. Six variants cover semantic states.

<dk-badge variant="accent">new</dk-badge>
<dk-badge variant="success">active</dk-badge>
<dk-badge variant="warning">pending</dk-badge>
<dk-badge variant="danger">error</dk-badge>

Rounded metadata chips for locations, skills, and contextual information. Lighter than badges, no semantic color, just structure.

<dk-pill>munich · germany</dk-pill>
<dk-pill>design systems</dk-pill>

Category tags for filtering and labelling. Supports a dismissible variant that emits a dk-dismiss event when removed.

<dk-tag>brand</dk-tag>
<dk-tag variant="bordered">UX Research</dk-tag>
<dk-tag dismissible>removable</dk-tag>

Horizontal separator with optional centered label. Adapts to the --color-rule token.

<dk-divider></dk-divider>
<dk-divider label="or"></dk-divider>

Consistent page section headings with an optional category label and accent badge.

<dk-section-header label="work" badge="visual" title="Case Studies"></dk-section-header>

Versatile container for grouped content. Supports attribute-based shortcuts for common patterns and named slots for custom layouts.

<dk-card tag="brand" title="Project Name" desc="Description text."></dk-card>

Text input field with label, helper text, and validation state. Supports all standard HTML input types.

<dk-input label="Email" type="email" placeholder="you@example.com"></dk-input>
<dk-input label="Name" required error="This field is required."></dk-input>

Multi-line text input for longer content like messages, descriptions, and notes.

<dk-textarea label="Message" placeholder="Your message…" rows="5"></dk-textarea>

Styled dropdown selector consistent with the Input component. Options passed as JSON attribute.

<dk-select label="Country" options='[{"value":"de","label":"Germany"}]'></dk-select>

Custom-styled checkbox with label. Supports checked, indeterminate, and disabled states.

<dk-checkbox label="Accept terms" checked></dk-checkbox>

Mutually exclusive selection from a set of options. Options are passed as a JSON attribute.

<dk-radio-group name="size" options='[{"value":"s","label":"Small"},{"value":"m","label":"Medium"}]'></dk-radio-group>

On/off switch for boolean settings. Ideal for feature flags, preferences, and settings panels.

<dk-toggle label="Enable notifications"></dk-toggle>
<dk-toggle label="Dark mode" checked></dk-toggle>

Inline feedback banners for communicating status to users. Supports a dismissible variant with an optional title.

<dk-alert variant="success" title="Saved">Your changes were saved.</dk-alert>
<dk-alert variant="danger" dismissible>Something went wrong.</dk-alert>

Contextual information shown on hover. Wraps any content, hover the examples below to see them in action.

<dk-tooltip content="Helpful context" placement="top">
  <dk-button>hover me</dk-button>
</dk-tooltip>

Animated loading indicator. Three sizes for different contexts.

<dk-spinner size="md"></dk-spinner>

Linear progress bar for upload states, multi-step forms, and loading sequences.

<dk-progress value="60" label="Uploading…"></dk-progress>

User representation as initials or image. Falls back gracefully to initials when no image source is provided.

<dk-avatar initials="DK" size="md"></dk-avatar>
<dk-avatar src="/avatar.jpg" alt="David Krebs" size="lg"></dk-avatar>

Content organized into selectable panels. Uses slot composition, each dk-tab child becomes a panel.

<dk-tabs>
  <dk-tab label="Overview">Content A</dk-tab>
  <dk-tab label="Details">Content B</dk-tab>
  <dk-tab label="History">Content C</dk-tab>
</dk-tabs>

Vertically stacked expandable sections. Useful for FAQs, settings panels, and content that benefits from progressive disclosure.

<dk-accordion>
  <dk-accordion-item title="Question one?">Answer text here.</dk-accordion-item>
  <dk-accordion-item title="Question two?">Another answer.</dk-accordion-item>
</dk-accordion>

Structured data display with sortable columns, striped rows, and hover states. Columns and rows passed as JSON attributes.

<dk-table
  columns='[{"key":"name","label":"Name"},{"key":"role","label":"Role"}]'
  rows='[{"name":"David","role":"Designer"},{"name":"Alex","role":"Developer"}]'
  striped>
</dk-table>

Navigation path indicator. Last item is the current page. Items passed as JSON.

<dk-breadcrumb items='[{"label":"Home","href":"/"},{"label":"Current Page"}]'></dk-breadcrumb>

Editorial case module. A chapter opener with a mono eyebrow, a large headline (bold = accent, italic = thin) and an optional lead. Structures a case story into chapters with generous whitespace, no section numbering.

Panel: Case, Inhalt, Struktur und Text, Kapitel-Intro

Editorial case module. A narrow text column beside one or more stacked images. With sticky on, the text stays fixed while the images scroll past; on mobile it collapses to a stack. Captions come from the media library.

Panel: Case, Inhalt, Bilder und Medien, Text-neben-Bild

Editorial case module. Two or three images side by side. Equal or unequal split (60/40), per-block fit and width (Normal, Wide, Full-bleed). Captions from the media library. Related: the Image block gained a width option and the Quote block an editorial variant.

Panel: Case, Inhalt, Bilder und Medien, Bild-Duo/Trio