Components
Foundations
The thinking behind Lily UI’s color and shape: soft, warm, and approachable. Each color takes the name of a traditional Japanese color (和色).
ColorsColor tokens named by their role. You pick colors by meaning (primary, status, surface, text), and the values swap between light and dark.
PaletteThe raw color ramps behind the tokens. Each hue runs from 50 (lightest) to 900 (darkest).
MotionEntrance, exit, and attention animations, plus decorative hover and background effects. Add a class to use them; they stop under reduced-motion.
ScalesSpacing, radius, shadow, and type-size tokens. Lay things out on the 4px grid by name, so raw numbers stay out of your code.
Motion ProviderManages how much motion plays: full, minimal, none, or auto. The resolved tier lands on the data-motion attribute of <html>, and OS reduced-motion settings are honored automatically.
Theme OverrideSwaps theme colors for personal picks inside the wrapped subtree. Override only some tokens, or only one scheme such as dark mode. Pairs that fall below the 7:1 AAA contrast floor are flagged during development. To re-color the whole app, pass the same overrides to ThemeProvider.
Theme ProviderManages the display mode: light, dark, or following the OS. The choice lands on the data-theme attribute of <html> and persists to localStorage. App-wide theme color overrides are also set here. For React and Vue; with Web Components you use the attribute and CSS variables directly.
Layout
Content that sticks to the top or bottom of the viewport once you scroll it into place.
ContainerA layout that centers page content and caps its width.
DividerA separator line. It runs horizontal by default and can turn vertical or carry a label.
FooterThe page’s contentinfo landmark. It pairs with Navbar as a centered row you compose from links, legal text, and columns.
GridA two-dimensional layout of rows and columns.
RatioA box that holds the aspect ratio of an embed, such as an iframe, video, or image.
Scroll AreaA scroll region with a slim scrollbar that looks the same across browsers.
SplitterTwo resizable panes split by a draggable handle. The handle moves by keyboard too.
StackA one-dimensional layout that spaces items by a set gap.
Visually HiddenAn element that hides content visually while keeping it in the accessibility tree. The focusable variant appears on focus, which suits a skip link.
Typography
A block for multi-line code. It shows a language label, a one-click copy button, and optional line numbers. For inline code, reach for the Code component.
Kbd & CodeMarkup for a key or shortcut shown inline in text.
LinkA link. It uses a high-contrast text color and keeps a clear focus ring when you tab to it.
MarkA mark element that highlights a run of text with a semantic color. The tint stays decorative and the words carry the meaning. It offers warning, success, info, danger, and primary.
Text & HeadingHeading and body text styles.
Actions
The basic control for running an action. Pair variant (how it looks) with status (the color and meaning) to suit it.
Button GroupRelated buttons joined into one horizontal set. A label states the purpose, and screen readers read it as a single group.
Close ButtonA close button marked with ×. It carries a label for screen readers.
Copy ButtonA button that copies value to the clipboard and confirms with a checkmark. Use it icon-only or with a label. Once it copies, screen readers hear "Copied".
Float ButtonA floating action button pinned to a corner of the screen. FloatButtonGroup stacks several buttons as a speed dial that the trigger opens and Escape closes, with full keyboard support.
ToolbarA toolbar that groups buttons into a single Tab stop. Arrow keys move between items, Home and End jump to the ends, and it supports a horizontal or vertical orientation.
Data Display
A small round image for a person or thing. It falls back to initials, and a small dot can show presence such as online.
BadgeA small static mark for a count or short label. Use it to add a number like "3" or a quiet status. For a tag you can click, use Chip instead.
CardA general-purpose frame that wraps content. Build it from header, body, and footer parts.
ChipA compact tag for a keyword or filter. Make it selectable with clickable, or add a remove button with onRemove.
CountdownA timer that counts down to a target in day, hour, minute, and second segments. It ticks each second, stops at zero, and fires onComplete. Each segment carries a label so meaning never rests on color.
DescriptionsA key-and-value definition list rendered as a dl. Compose Descriptions with DescriptionsItem children, and choose one to three columns, a horizontal or vertical layout, and a bordered grid.
List GroupA vertical list of items. Build it from ListGroup.Item.
Relative TimeA time element that states a value as relative text such as "3 minutes ago". It builds the text from Intl.RelativeTimeFormat and Temporal, and the live prop refreshes it on a timer.
StatA tile for a metric: its label, value, and change. An arrow and a status color show the change.
TableA table of data in rows and columns. It carries proper header rows and a caption so screen readers can follow it.
TimelineA vertical list of history or activity. Each item can hold a status dot, title, time, and description.
Media
A slideshow that cycles through items. Auto-advance pauses while you hover or use the keyboard.
IconA wrapper that sizes and colors your own icon art, such as an SVG. Lily ships no icons of its own.
ImageA wrapper around an image. It handles lazy loading, a fade-in, a fixed aspect ratio, and a fallback when loading fails.
WatermarkA watermark that tiles translucent text or an image across its children. The overlay sits behind pointer events and hides from assistive tech, so the content underneath stays usable.
Forms
An inline month grid for picking a date, with no popup. Each day is a button, and the chosen day shows in color.
CascaderA picker that shows nested levels, such as prefecture then city, as side-by-side columns. Choosing an option opens its children in the next column, and the value is the path you land on.
CheckboxA labeled checkbox that toggles on and off.
Color PickerA grid of swatches for choosing a color. Click a swatch to pick it, and add the browser’s native color input when you need it.
ComboboxA text field that filters a list as you type. Up and Down move through matches; Enter confirms.
Date PickerA field for picking a date from a calendar. It pairs a text field you can type into with a calendar you can move through by keyboard.
Date Range PickerTwo linked DatePickers for a start and end date. Each one limits the other’s range.
Date Time PickerA date-and-time picker that pairs a month calendar with hour and minute steppers to choose a Temporal.PlainDateTime. It works from the keyboard and clamps the result to any min and max bounds.
Duration InputA duration input backed by Temporal.Duration. It uses number fields with steppers for hours and minutes, plus an optional seconds field, and drops into a form as is.
FieldsetA group for related form controls built on a native fieldset and legend. The disabled prop turns off every control inside, and an optional description sits under the legend.
File UploadA drop zone that takes files by drag and drop, with a list of the ones you picked. You can open the zone from the keyboard too.
Floating LabelA label that slides up when you focus or type in the field. Wrap one Input, Select, or Textarea with it.
Form FieldA wrapper that ties a label, help text, and error to a field. It wires up the links so screen readers read the right description.
InputA single-line text field. Inside a FormField, it picks up the label and description links on its own.
Input GroupA field with units, symbols, or buttons attached before or after it.
Month PickerA month picker that chooses a Temporal.PlainYearMonth from a twelve-month grid. Arrow keys move the focus, Enter selects, and the prev and next buttons step the year.
Number InputA number field with step buttons. Up and Down keys change the value too.
Pin InputA field for entering a code or one-time password, one character per box. Typing moves to the next box.
RadioOne option in a radio group. Options share a name to form the group.
RangeA slider you drag to pick a value. Inside a FormField, it picks up the label link on its own.
Range (Dual)A slider with two thumbs for a range, such as a price band.
RatingA star rating. By default you set it with arrow keys; readOnly turns it into a display.
Segmented ControlA toggle that picks one option from a row. Arrow keys move between options.
SelectA native dropdown select. Use it when the options are fixed; for type-to-filter, use Combobox.
SwitchA switch you slide on and off. It works by keyboard, and screen readers announce its state.
Tag InputA field for entering several tags, such as emails or keywords. Enter or a separator adds one; Backspace in an empty field removes the last.
TextareaA multi-line text field. Inside a FormField, it picks up the label and description links on its own.
Time PickerA field for entering a time by hour and minute. Add an AM/PM toggle when you need one.
Time Zone SelectA select for IANA time zones. The options come from Intl.supportedValuesOf with a small static fallback, and the value is the id string that Temporal consumes.
TransferTwo lists you move items between. Each row is a labeled checkbox.
Tree SelectA select that opens a tree panel to pick a node from a hierarchy. Arrow keys move through the tree, Enter selects, and Escape closes the panel.
Navigation
A button that appears once you scroll down and takes you back to the top. It floats in a corner of the screen.
BreadcrumbA trail that shows where the current page sits in the site, like "Home > Products > Detail". The last item is the current page.
MenuA standalone menu of actions, with no trigger button. Arrow keys move between items.
NavbarThe navigation bar at the top of the page. On narrow screens it folds into a toggle, and screen readers read it as navigation.
PaginationPage navigation. It marks the current page and disables the arrows on the first and last page. Screen readers announce the current page.
StepperA tracker for steps in a flow, such as a form wizard or checkout. Screen readers hear which step you are on.
TabsTabs that switch the view. Arrow keys move between tabs; Home and End jump to the ends.
TreeA tree you expand like folders. Branches open and close, and arrow keys move through them.
Disclosure
A collapsible menu whose headers open and close the section below. It works from the keyboard, and screen readers announce whether each section is open.
CollapseCollapse — animates showing/hiding content by height. Pair the toggling control with `aria-expanded` and `aria-controls` pointing at this element's `id`.
PresenceA wrapper that animates one child in and out. It keeps the child on screen until the exit animation finishes.
Feedback
A status message. Color and an icon flag success, a warning, or an error.
Empty StateA placeholder for an empty list, no search results, or an error. It centers an icon, heading, text, and an action.
MeterA gauge for an amount within a fixed range, such as usage or a score. It serves a different purpose from Progress, which tracks how far a task has run.
ProgressA progress bar for how far a task has run. Screen readers announce the value as it changes.
ResultA block that reports the outcome of an operation. It covers seven states such as success, error, and 404, each with an icon and text so meaning stays clear without color, and it holds follow-up actions.
SkeletonA placeholder that hints where content will load. It draws text, circle, and box shapes with a soft shimmer.
SpinnerA spinner for a loading state. It takes the surrounding text color, and screen readers hear that loading is underway.
ToastA brief notification in a corner of the screen. It stays until you dismiss it; nothing auto-dismisses by default.
Overlay
A confirmation dialog for actions you cannot undo. It carries role="alertdialog", keeps focus inside, and stays open on a backdrop click so the user picks confirm or cancel. Escape closes it.
Command PaletteA searchable command list that opens with ⌘K. Type to filter, move with Up and Down, and run with Enter.
ContextMenuA menu that opens at the pointer on right-click, and from the keyboard with Shift+F10 or the menu key. Arrow keys move between items, Enter activates, and Escape closes it.
DrawerA panel against a screen edge, in three variants. temporary (the default) opens over a backdrop and traps keyboard focus inside, like a Modal. persistent sits beside the page and pushes content aside as it opens. permanent stays open, like a desktop sidebar. Many layouts use permanent on wide screens and temporary on narrow ones.
DropdownA menu tied to a trigger button. For a standalone menu with no trigger, use Menu.
HoverCardA card that opens when its trigger is hovered or focused. It shows supplementary content after a short delay and closes on blur or Escape, so the keyboard reaches it too.
ModalA dialog that opens over a backdrop. While open, it keeps keyboard focus inside so you stay oriented.
OffcanvasA panel that slides in from a screen edge. Its keyboard and screen-reader handling matches Modal.
PopoverA bubble panel that opens on click. It holds a title and any content, and closes on Escape or an outside click without blocking the page.
TooltipA small label that appears on hover or focus. Screen readers tie it to the element it describes.