Components
Every component in @milandekruijf/ui/svelte, with live examples and import paths.
Primitives
Button Inline action in slate, ghost, and blue variants with two sizes.Badge Square status and metadata chip with filled/outline variants, contrast levels, and a light mode.BadgeGroup Flush strip of badges with one shared surface and hairline dividers between segments — the nav cluster as a component.ControlGroup One flush surface that groups buttons, selects, and inputs into a strip with hairline dividers — the navbar preferences cluster as a component.Link Text link in slate, blue, and muted colors.ExternalButton Button that opens an external resource in a new tab, with an external-link icon.ExternalLink Link with an external-link icon for resources outside the site.NamedValue Two-column label/value row that participates in a parent grid.ScrollArea Themed scroll area with a squared thumb and Lenis-friendly wheel handling.CodeBlock Code panel with a mono toolbar, language label, and copy button.InlineCode Inline code token: Geist Mono in the README amber, for identifiers and values in prose.PropsTable Props reference table in the code-block surface: name, type, default, and description, with an optional note.ColorScales The five Radix scales as a table of click-to-copy swatches, each labelled with its step number.Accordion Stack of toolbar-style headers; the open item drops into a darker code-block panel.Collapsible Disclosure with a custom trigger; the panel animates its height and staggers its content.Dialog Square modal that becomes a bottom-sheet drawer on mobile, with a close icon, title, and description.Tooltip Square hover and focus hint in the default button surface, with an optional arrow.
Forms
Input Text field with the site's field surface and an optional spring caret.InputGroup Field wrapper that reserves room for leading and trailing adornments, such as a search icon or a clear button.Textarea Multiline field with a spring caret and its own themed scroll area.Select Listbox select with field and flush trigger variants.LabeledField Field label and value pair; can span two grid columns.LabeledFieldGrid Two-column grid for stacking labeled fields.DateLabeledField Labeled field that formats a date, relative time, or a custom pattern.
Chrome
Breadcrumb Segmented trail of links with chevron dividers and a current-page state.PageActions Share, copy-link, and back-to-top action group.PageShare Share menu with native share, X, LinkedIn, email, and copy.ScrollControls Up and down scroll buttons between page sections and the call to action.SectionBackLink Muted back link with an arrow, used above sections.SectionErrorFallback Presentational 404/500 block with a configurable title, body, and link actions.Sidebar Grouped sidebar list of links or buttons with an active state.
Widgets
AnimatedCharFlip Digit or character slot that flips vertically when its value changes.SpotifyIcon Spotify glyph as an inline SVG.SpotifyNowPlaying Now-playing line with scroll-flip transitions and optional polling.CurrentTime Live clock with animated digits, a location label, and an optional weather line.DynamicIsland Square status island: it springs to the size of its content and blurs new content in whenever that content changes.BrowserMock Browser window mock for product screenshots: a toolbar with window controls and an address bar, and an optional theme picker.MobileMock Phone mock for portrait screenshots, with a status bar and an optional theme picker below the device.
Filters
FilterPanel Pre-styled collapsible shell for index filters: icon, summary, and chevron trigger with staggered panel content.FilterChipGroup One filter dimension as toggle chips with live result counts; zero-result options disable.FilterSortRow Sort select paired with a ghost reset button for filter panels.FilterEmptyState Empty and filtered-empty states with an optional reset action.