Components.

The primary action surface. Seven variants, six sizes, with loading state. Renders as button or anchor.

Text field. Hairline border, square corners, focus ring in jade. Supports debounce + masks.

Multiline text input. Same border + focus treatment as Input.

Form label. Pairs with any input via for/id.

Boolean input with checked / unchecked / indeterminate states.

Binary on/off control. Larger affordance than a checkbox — for settings, toggles.

Single-option selection within a group. Keyboard-navigable.

Dropdown selection. Built on bits-ui — keyboard navigation, search, async.

Single press-on/press-off button. Same hit target as Button, different state model.

Group of toggles — single or multi-select. Segmented control pattern.

Date picker. Month grid with prev/next navigation, keyboard-navigable.

Select multiple options from a list. Built-in search and chips for selected values.

International phone number input with country picker and validation.

Telephone input — country flag selector, format-as-you-type, validates per locale.

Pick a start + end date with presets (last 7d, MTD, QTD, YTD).

Two-month calendar grid for selecting a date range. Underlies Date Range Selector.

Composition primitives for accessible forms — labels, descriptions, errors, validation.

Short status or category label. Pill-shaped, monochrome variants.

Circular user or merchant identity. Image with fallback initials.

Rounded label or count chip. Multiple semantic types: positive, negative, neutral, etc.

Empty-state container. Title, description, optional action — for "no data yet" surfaces.

Hairline divider. Horizontal or vertical, decorative or semantic.

Placeholder shape for loading states. Matches the eventual content silhouette.

Display code with a monospace surface and a copy button.

Specialized error alert with retry/dismiss affordances. Wraps the destructive Alert variant.

Small status dot. For unread counts, presence, alerts.

List item primitive — icon, title, description, trailing action. The row in a list.

Dash.fi wordmark and app icon as Svelte components — Logo, LogoSmall, LogoApp.

Auto-fetched merchant logo with fallback. Powered by a logo CDN.

Animated flowing lines — decorative brand element. Use sparingly on marketing surfaces.

Decorative hover effect — element shifts subtly toward the cursor. For marketing buttons.

Inline messaging — success, warning, error, info. Always paired with an icon and short copy.

Confirmation modal — interrupts the user for a destructive or irreversible action.

Generic modal. Use for forms, confirmations, content panels.

Side drawer. Slides in from edge — top, bottom, left, right.

Floating panel anchored to a trigger. For filters, mini-forms, secondary actions.

Hover-revealed label. Single sentence; never essential information.

Determinate progress bar. 0–100% with optional label.

Indeterminate horizontal progress. For loading states with no known duration.

Indeterminate spinner. Use inside buttons, inline UI.

Compact spinning indicator. Smaller than Loader.

Mobile-friendly slide-up panel. Pulls from the bottom edge with momentum scroll.

Edge-to-edge modal — for long flows like KYC, statement download, partner agreement.

Floating card on hover — richer than a tooltip; for previews, mini-profiles.

Stacked transient notifications. Wraps svelte-sonner with our theme.

Help & support widget — Dash.fi-specific. Bound to the user session.

Switch between panes of content. Underline indicator on the active tab.

Collapsible sections. Single or multi-open mode.

Show/hide a single content block. Building block for accordions and disclosure UI.

Hierarchical trail. Home → Section → Subsection → Current.

Paged navigation for long lists. First / prev / pages / next / last.

Pagination with a page-size Select and optional total count.

The authenticated-app navigation shell — collapsible (icon / offcanvas), auto-swaps to a Sheet on mobile, keyboard shortcut (Cmd/Ctrl+B). Family of 20+ sub-components: Sidebar, SidebarProvider, SidebarInset, SidebarTrigger, SidebarMenu, SidebarGroup, SidebarHeader/Footer/Rail/Separator/Input.

Contextual action menu attached to a trigger button.

Custom-styled scrollbar. Replaces native browser scrollbar for visual consistency.

Cmd+K palette. Searchable list of actions. Built on bits-ui.

In-page section nav with active-state binding. Used inside settings, profile, account.

A bordered surface for grouping related content. Compositional — Card, CardHeader, CardContent, CardFooter.

Basic semantic table — Table, TableHeader, TableBody, TableRow, TableCell, TableHead.

Feature-rich table — sorting, filtering, pagination, column controls. Built on @tanstack/table-core.

Headless data-table utilities. Use to compose your own table — sorting, paging, filtering hooks.

Pre-built filter UI — search, date range, multi-select facet. Drops into table toolbars.