Skip to main content

The complete library

Components

Core, layout, form, display, and overlay building blocks. Try them here, then open any component for its exact markup and generated API. Editor components live in their own section.

Showing 36 components

Live preview
Overlay<span>

Affordance Scope

A lightweight interaction scope that lets nearby controls anticipate pointer movement without adding listeners or hit regions to every control.

View component
Live preview
Display<span>

Avatar

Image and fallback initials primitive for identity surfaces such as profiles and assignees.

View component
Live preview
Display<div>

Avatar Group

Container that displays overlapping avatars with an optional "+N" overflow pill when the count exceeds the visible maximum.

View component
Live preview
Forms<button>

Button

Essential button primitive that enhances semantic button markup and styling hooks.

View component
Live preview
Display<div>

Callout

A static semantic message surface with a tone-specific icon. It is not a live alert and does not include dismissal behavior.

View component
Live preview
Overlay<dialog>

Dialog

Overlay primitive that coordinates native `dialog` behavior with shared overlay stack rules.

View component
Live preview
Forms<button>

Icon Button

Icon-only button primitive with stable square sizing and variant tokens for shell controls, compact actions, and editor chrome.

View component
Live preview
Forms<input>

Input

Text input that lowers directly to a native `<input>` while applying Looma's shared control theme.

View component
Live preview
Overlay<div>

Menu

Menu container primitive that manages focus and selection across `ui-menu-item` children.

View component
Live preview
Forms<label>

Radio

Radio control primitive for mutually exclusive options, typically composed within `ui-radio-group`.

View component
Live preview
Forms<fieldset>

Radio Group

Grouped selection primitive that coordinates `ui-radio` descendants, keyboard navigation, and normalized selection events.

View component
Live preview
Layout<div>

Reel

Contained, keyboard-focusable horizontal scrolling for cards and other repeated items.

View component
Live preview
Overlay<div>

Search Shell

Responsive dialog structure for application search and command palettes. It owns visibility, dismissal, accessible dialog semantics, and the search/status/body/footer regions while applications retain query and result state.

View component
Live preview
Forms<select>

Select

Select control that lowers directly to a native `<select>`; author `<option>` children directly inside it.

View component
Live preview
Layout<aside>

Sidebar

An application sidebar panel. Docked beside the page's main content it can be resized and collapsed; below its breakpoint it becomes an off-canvas drawer. It is only the panel: the page lays it out next to its content.

View component
Live preview
Forms<label>

Switch

Binary control primitive that reflects switch semantics for checked state.

View component
Live preview
Layout<div>

Switcher

Intrinsic equal-column layout that stacks when its own container becomes too narrow.

View component
Live preview
Display<div>

Tabs

Tablist primitive that synchronizes tab focus, selection, and panel visibility.

View component
Live preview
Forms<textarea>

Textarea

Multiline input that lowers directly to a native `<textarea>` while applying Looma's shared control theme.

View component
Live preview
Overlay<span>

Tooltip

Contextual overlay primitive that links descriptive content to a trigger element.

View component
Live preview
Display<header>

Top Bar

Mobile-first navigation shell with slots for leading controls, title content, an optional search affordance, and trailing actions.

View component
Live preview
Display<div>

Tree

An accessible hierarchy with disclosure, bounded logical indentation, and

View component