Litefy UI
Litefy UI
IntroductionInstallationStylesOverview
Theme
Surface
Brand

Overview

Browse every component, CSS utility, and hook available in Litefy UI.

Components

Avatar

An avatar component with image loading states, skeleton and fallback support

Banner

An auto-scrolling marquee banner with seamless looping, hover pause and direction control

Badge

A square surface slot with a corner marker — drop an icon inside and attach a Tag-style label to the top-right corner.

Breadcrumb

A navigation trail of composable parts — nav, list, item, link, page and separator — with a data-driven composite for simple trails

Button

A button component with multiple variants and loading states

Capsule

A pill-shaped overflow-hidden container that joins arbitrary children — tags, toggles, segments, links — into one capsule.

Card

A glassmorphic surface with hover lift, soft shadow, and an ambient glow.

Calendar

A calendar panel component built on the native Temporal API, supporting controlled selection, disabled dates and parts-based assembly

Cascader

A multi-level cascading selector driven by a tree, built from a breadcrumb-style trigger and popover panels positioned via CSS anchor positioning

Chart

A self-built canvas time-series chart engine sharing the chart-kit math layer — automatic canvas theming, responsive width, interactive legend and hover tooltip

Chat Input

A chat composer with pasted-screenshot thumbnails, a capability-toggle slot and an icon-only send button — mobile-ready out of the box.

Collapse

A collapsible component that supports single panel, accordion, and multiple modes

Checkbox

A checkbox component supporting controlled, uncontrolled, group and custom indicator

Chip Group

A primitive component that automatically collapses overflowing chips, exposing the hidden set via renderMore / onOverflowChange for consumer-side composition

Combobox

An input with a filterable dropdown list — local options with client-side filtering, or async remote search with debounced fetching and scroll-to-load-more

Date Picker

A date picker built on the native Temporal API — an editable input, a month panel and pointer-anchored popover in one shipped component

Dialog

A modal dialog component built on the native HTML dialog element

Donut

Zero-dependency SVG pie and donut chart with theme-synced palette, hover focus with center readout, and a toggleable legend

Drawer

A slide-in panel component with multiple placement options

Dropdown Menu

A dropdown menu composed of Popover and Menu — group items, nest submenus, and navigate with the keyboard

Error

A danger-tinted message container rendered below a control for form validation feedback

Context Menu

An imperative right-click context menu with pointer anchoring, grouping and submenus — built on Menu and native popover, opened with a single call

Form

A complete form composition with fields, submit, validation, and imperative ref control

Form Item

A self-managing form field that renders a finished control per variant — label, input and a description / error line in a fixed vertical layout with built-in validation

Image

An image component with loading state, loading placeholder, and error handling

Input

An input component with leading/trailing slot support and validation states

Input Group

An input shell that owns focus and invalid styling for a wrapped control — leading/trailing slots plus the inner input, never a double focus ring.

Input OTP

A one-time-code input with auto-advance, paste support, keyboard navigation and mask mode.

Kbd

A keyboard key visual with pressable hover and active states.

List

A scrollable list container with keyboard navigation, highlight, selection and scroll-bottom callbacks

Masonry

A masonry layout that balances items across equal-width columns by measured height, with responsive column counts

Menu

A menu component usable directly in the document flow, with grouping, two-level submenus and keyboard navigation

Multi Select

A multi-select dropdown composed of Popover and CheckboxGroup — flat or grouped options, keyboard navigation, controlled value

Number Field

A compact numeric field with a leading Minus and trailing Plus stepper button — keyboard stepping, thousands separators and a border by default.

Number Input

A bordered numeric input with a non-interactive up/down cue in the trailing area — stepping is keyboard-only. The form-friendly sibling of NumberField.

Pager

A controlled single-DOM pager with touch gesture dragging, loop and View-Transition page switching, built for manga-style readers and paged content

Paper

A print-ready page surface with A4/A5 variants in portrait or landscape orientation.

Password

A password input component with visibility toggle, supporting composable assembly

Picker

A generic input + popover container component for building pickers such as a date picker, powered by native popover and CSS anchor positioning

Popover

A button-triggered popover panel built on popover + CSS Anchor Positioning — the base for dropdown-menu compositions

Preview Card

A preview card composed of Card, Image, and Tooltip — an image card on its own, or as a rich hover preview on a link

Query Builder

A tree list of field rows with always-visible operator/value rules, nested and/or groups, a live natural-language preview and Submit/Reset — zero external dependencies.

Progress

A pure UI progress bar that only renders current and duration — no built-in scheduling, sampling, or estimation logic

Radio

A parts-based radio component with an options-driven group — arrow-key navigation comes native via the shared name

Radar

Zero-dependency SVG radar chart with concentric grid, category axes, theme-synced series colors and legend toggling

Select

A themeable select built on the native popover API and a listbox panel — supports option groups, keyboard navigation and validation

Selectable Table

A table with a built-in checkbox column and select-all with indeterminate state. Pagination is composed externally with Pagination and usePagination.

Scroll Shadow

A scrollable container with gradient shadow indicators for better scroll awareness

Separator

A separator component supporting horizontal and vertical orientations, with text label and composable assembly

Segment

A segmented control component for single-select, supporting controlled, uncontrolled and options-driven modes

Sidebar

A collapsible sidebar with ref-based external control

Skeleton

A pulsing placeholder block for loading states.

Sparkline

Tiny axis-free trend line rendered in SVG — colored via currentColor so it themes like any text element

Slider

A simulated slider with horizontal and vertical orientations, pointer dragging and keyboard support

Steps

A controlled steps indicator with completed, current and upcoming states, and forward-jump locking for wizard flows

Table

A generic data table with clickable sortable headers for local data, or remote mode that delegates sorting to your database.

Switch

A toggle switch component with controlled state and composable assembly

Tabs

An options-driven tabs component with multiple variants and orientation support

Tag

A single-color chip with no interaction logic — color it with any background utility.

Text Area

A multi-line text input with built-in invalid state support and a form-friendly onChange signature

Timeline

A vertical timeline — a display-only component of markers, connector lines, times, titles and descriptions

Toast

A global toast notification component with a store-based imperative API

Toggle

A toggle button component supporting controlled, uncontrolled and group multi-select modes

Tooltip

A tooltip component built on the native Popover API and CSS anchor positioning

Typography

Heading, headline, description and inline code styles for a consistent typographic hierarchy.

Transfer

A dual-panel transfer that moves items between source and target lists with checkbox selection

Dual Picker

A two-panel picker for single or multiple selection — option rows and selected rows are render-prop driven, so any content format works.

Upload

A dropzone upload component with local validation, drag and drop, and a decoupled upload monitor hook

Watermark

A canvas-based watermark component that tiles text over content, with a composable two-part API

Wizard

A steps + pager wizard that manages index state internally — visited steps can be revisited, future steps are locked

Pagination

A controlled page navigator — first / prev / numbered pages with ellipsis / next / last. Pure view, pair it with usePagination for state.

Utils

cn

A tailwind-merge based class merge helper that resolves conflicting Tailwind utilities in the last-wins order.

chart-kit

Pure-function math layer for SVG charts — polar paths, donut layout, linear scales and monotone-smoothed line/area paths, zero dependencies

use-theme

Global theme state hook with localStorage persistence for brand, surface and color mode

use-chart-palette

Hook that generates 8 high-contrast chart colors from the current theme primary, with color-wheel and same-hue modes

use-combobox

Virtual-focus keyboard wiring for Picker panels — the input keeps focus while ArrowDown / ArrowUp move a highlight through the items

use-load-more

Scroll-driven paging for local data — grows the visible slice as a sentinel approaches the viewport

use-panel-focus

Real-focus keyboard wiring for Picker panels — ArrowDown / ArrowUp move focus into the panel's first or last focusable element

use-drag

Pointer-based drag hook with pointer capture, drag info callbacks and an isDragging flag

use-remote-pagination

Debounced keyword search plus append-based pagination for remote data sources

use-remote-sort

Sort-state manager for database-backed tables — cycles asc / desc / cleared, builds the query string and debounces the refetch callback.

use-virtual-scroll

Fixed-height list virtualization hook returning container props, the render window and scroll commands

use-upload-monitor

Monitor file uploads with XMLHttpRequest progress tracking and abortable removal

use-pagination

A headless pagination state hook with looping, dynamic totals and change callbacks