Components

Klean components provide semantic markup, accessible behavior, durable interaction, and neutral defaults. Install the framework-native source, then style it with ordinary Tailwind.

Components do not share a visual variant API. Each page shows the behavioral contract, live preview, exact source, installation command, semantic recipes, and accessibility requirements.

Available components

Alert

A shallow notice surface with silent defaults, explicit announcement semantics, native headings and lists, real actions, and caller-owned Tailwind styling.

Avatar

One resilient identity image with an accessible fallback, explicit informative or decorative naming, browser-native image behavior, and caller-owned Tailwind styling.

Badge

One static inline metadata span for visible labels, counts, and compact statuses, with caller-owned Tailwind and truthful notification composition.

Button

A native-first action primitive that can render a truthful button, anchor, or Boring Stack Link. It handles safe type defaults, disabled semantics, attribute forwarding, and caller-owned Tailwind classes.

Card

One shallow semantic surface with native application content, truthful whole-card links or actions, explicit multiple-action composition, and caller-owned Tailwind styling.

Input

A styled native input that forwards native attributes and framework-native value binding. Labels, help, errors, IDs, validation, and layout remain visible application markup.

Textarea

A styled native textarea whose durable presentation grows from its current value and responsive width. Caller Tailwind can take ownership of height and resizing without a component prop.

Checkbox

A native-first checked value for booleans, collection membership, and real indeterminate selection. Browser form and accessibility behavior stay intact while labels, groups, validation, and product styling remain visible application markup.

Radio

A native-first mutually exclusive choice for short visible lists. Shared names, fieldsets, legends, labels, keyboard behavior, validation, and form submission remain browser semantics while caller Tailwind owns the presentation.

Switch

A native-first boolean setting that takes effect immediately, with real checked state, browser keyboard and form behavior, honest optimistic rollback recipes, and caller-owned Tailwind styling.

Separator

One native-first semantic boundary: a native horizontal rule, a correct vertical ARIA bridge, and caller-owned Tailwind for the rare places where spacing is not enough.

Spinner

A calm decorative mark for indeterminate work, with caller-owned Tailwind styling and truthful busy and status semantics left in visible application markup.

Tooltip

Short supplementary text for one semantic button or link, with accessible hover, focus, dismissal, collision handling, and caller-owned Tailwind styling.

Breadcrumb

Durable location hierarchy with framework-native Inertia links, truthful current-page semantics, one responsive ordered trail, and caller-owned Tailwind styling.

Tabs

Accessible peer panels with roving focus, automatic or manual activation, dynamic removal, overflow reveal, and caller-owned native buttons and Tailwind styling.

Table

A native table with a neutral baseline, caller-written captions, sections, headers, rows, cells, and actions, plus an explicit boundary before stateful Data Table behavior.

Pagination

Durable server-list navigation with framework-native Inertia links, canonical page URLs, truthful edges, compact mobile output, and application-owned query state.

Popover

A native-first non-modal floating surface with light dismissal, focus return, collision-aware positioning, and ordinary semantic content. A real button invokes it through the browser's popovertarget relationship.

Menu

An accessible list of truthful button actions and link destinations built on Klean Popover. It adds roving focus, Arrow keys, Home/End, typeahead, disabled-item behavior, selection, and durable focus return while caller Tailwind owns the product treatment.

Select

A one-component fixed-list value picker with typed values, grouped and disabled options, full keyboard behavior, ordinary form participation, and caller-owned Tailwind. Editable search remains a separate Combobox contract.

Combobox

An editable search-and-choose input for long or remotely loaded lists, with typed values, local filtering, stable loading and error states, full keyboard behavior, and application-owned request policy.

Command

A pragmatic searchable composition for application actions and destinations, with stable input focus, active-descendant keyboard behavior, explicit keywords, nested-flow seams, and application-owned routes and work.

Dialog

A native modal surface with platform focus containment, inert background behavior, native commands and dialog forms, durable dismissal policy, and application-owned semantic content.

Sheet

A native off-canvas dialog for mobile navigation, comments, inspectors, and focused edge workflows, with caller-owned placement, semantic content, and Tailwind styling.

Calendar

An always-visible, locale-aware date-only surface with complete keyboard navigation, caller-owned availability, and stable YYYY-MM-DD values.

Date Picker

An editable date-only form field composed with Calendar and native-first Popover. Use ordinary min, max, and availability rules for product constraints.

Date Range Picker

One related start-and-end decision with inclusive date boundaries, native form names, and a contiguous Calendar selection.

Schedule Picker

Natural-language future scheduling with Calendar, time choices, IANA timezone safety, exact relative durations, and predictable Enter or composite-blur commit.

Toast

Accessible notifications with semantic actions, long-running updates, reduced motion, and caller-owned Tailwind.

Slide

A native-button confirmation control with an optional pointer slide, truthful pending state, resilient cancellation, RTL geometry, and caller-owned progress styling.

What belongs in the catalog

A component graduates when it has:

• the same semantic and accessibility outcomes in Vue, React, and Svelte;
• framework-native, readable source;
• keyboard and focus proof where relevant;
• source-application evidence from Hagfish, Slipway, or another Boring Stack app;
• safe installation, re-installation, and dependency metadata;
• a neutral default that does not fight product styling;
• documented Durable UI behavior where state or interaction must recover.

The catalog grows by proving contracts, not by maximizing component count.