Components

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

Each page includes a working example, Vue, React, and Svelte usage, installation steps, and accessibility guidance.

Available components

Alert

Contextual notices with explicit announcement semantics.

Avatar

Identity images with resilient fallbacks.

Badge

Compact labels, counts, and status.

Button

Actions and links with native semantics.

Icons

Source-owned SVG icons on a calm 24px grid.

Card

A simple surface for related content.

Input

Native inputs with framework-native binding.

Tags Input

Add and remove a collection of values.

Textarea

Multiline text that grows with its content.

RichText

Edit formatted HTML or Markdown.

Checkbox

Boolean, multiple, and indeterminate choices.

Radio

One choice from a visible set of options.

Switch

A setting that takes effect immediately.

Separator

A semantic boundary between sections.

Spinner

A decorative mark for work in progress.

Tooltip

Short, supplementary context on hover or focus.

Breadcrumb

A clear path through your application.

Tabs

Related panels with accessible keyboard navigation.

Table

A native table with application-owned markup.

DataTable

Server-driven data, selection, and query state.

Row Actions

Actions for an individual record.

Bulk Actions

Actions for selected records.

Empty State

Explain an empty result and offer a next step.

Loading State

Communicate that content is on its way.

Error State

Explain a failure and make recovery clear.

Filter Bar

Draft and committed filters with shareable URLs.

FileUpload

Select files with honest validation and previews.

Flag

Local flag images with accessible country names.

Sparkline

A compact trend beside an exact value.

Line Chart

A readable trend with exact accessible values.

Pagination

Shareable navigation through server-rendered results.

Popover

Non-modal content anchored to a trigger.

Menu

Keyboard-friendly actions and destinations.

Select

Choose one value from a fixed list.

Combobox

Search and choose from a long list.

Command

Searchable actions and destinations.

Dialog

Focused tasks in a native modal.

Sheet

An off-canvas dialog for focused workflows.

Sidebar

A remembered home for application navigation.

Calendar

An accessible, locale-aware date-only calendar.

Date Picker

Type or pick a single date.

Date Range Picker

Choose a related start and end date.

Schedule Picker

Choose a date and time in a visible timezone.

Toast

Notifications with actions and truthful updates.

Slide

Confirm an action with an optional pointer slide.

Slider

Choose a number or a two-handle range.