Kanon

Primary action trigger with variants, sizes, icons, loading and disabled-with-reason states.

Press-and-hold destructive action button with a keyboard fallback.

Segmented single-choice button set, and a Toolbar container for grouped actions.

Text field with label, hint, prefix/suffix, password reveal, numeric and error states.

Currency field that groups thousands live while typing and formats to fixed decimals on blur.

Auto-growing multi-line input with an optional character counter.

Single or multi-select combobox with client filtering or async search, keyboard nav and clear.

Popover calendar for single dates and ranges, with presets and month navigation.

Accessible checkbox with checked, indeterminate and disabled states.

Toggle switch, standalone or as a labelled row.

Two-month range calendar with presets, night count and apply/clear.

Single-select dropdown built on Field, with keyboard navigation.

Accessible radio fieldset with a simple list and a card variant.

Range input styled to the tokens, with an optional value label and formatter.

Compact removable tokens, and a tag input that adds chips on Enter/comma.

Single-file drag-and-drop + click picker with a type-aware preview, validation, progress and error states.

Drag-and-drop + click picker for many files, each with a type-aware preview, per-file progress and per-file error.

Image-only picker with a live thumbnail preview in a square, circular avatar, or wide cover frame, and an optional crop step.

A predefined checklist of required documents with a per-row upload control, status, and preview — for onboarding / KYC flows.

An accessible wizard that splits a long form into ordered steps with a progress indicator, per-step validation gating, and Back/Next/Finish.

Compact status label in pine, amber, rose and neutral tones.

Metric card with optional progress ring, loading and errored states.

Initials or image avatar with stable colour hashing and size variants.

Single-line compact stat bar for dense table headers.

Sortable table column header with direction indicator and hover affordance.

Column-driven table composing SortHeader, SkeletonRows, Pagination and an empty state.

Keyboard shortcut key caps.

A DataTable preset for stored files: type icon + name, type, size, uploader/date, an accessible status badge, and row actions.

Responsive, type-aware preview: images, PDFs, CSV/Excel (bordered table), Markdown & Word (formatted), JSON, text, and media — with a download fallback.

Transient notifications with tones, auto-dismiss with pause-on-hover, and actions.

Inline status message pairing a Lucide icon with tone (icon + colour, never colour alone).

Designed empty/error state for tables and lists, with optional actions.

Animated placeholder rows for loading tables.

Static inline message block with tones + icon (icon paired with colour, never colour alone).

Linear progress bar — determinate (0–100) or indeterminate loop.

General page-level empty/zero state with icon, title, body and actions.

Indeterminate loading indicator with an accessible status label.

Modal confirmation with simple, type-to-confirm and hold-to-confirm modes.

Auto-flipping dark tooltip that wraps any element, shown on hover and focus.

Portalled dropdown menu with items, checkbox items, separators and labels.

Generic ⌘K overlay: filter items by title/subtitle/keywords and act on selection.

Generic modal with header/body/footer, focus trap, Esc + backdrop close, and a portal.

Slide-in panel anchored right/left/bottom for filters, detail views or forms.

Generic anchored floating panel — auto-positioned, outside-click + Esc to close.

An accessible, aspect-aware image cropper: pointer + keyboard, optional circular preview, returns the cropped image as a File.

Keyboard-navigable tabs in underline and segmented variants, with optional counts.

Chevron-separated navigation trail; last item is the current page.

Two-zone pagination with rows-per-page, numbered pages and go-to-page.

Discoverable bordered back-navigation pill with an adequate touch target.

In-page scroll-spy contents list that highlights the section currently in view.

Bordered surface with optional header, body and footer; interactive and selected states.

Consistent H1 + description + actions row above page content.

Expandable sections; single-open by default or multiple.

Thin divider line — horizontal, vertical, or with a centered label.