Components
Explore the live examples that also power your theme customizer.
79 components
Layout
Fellowship archive
A short description of the archive.
Letters and records from the journey
Read correspondence, maps and field notes collected throughout the journey. Longer descriptions leave the actions aligned.
Card Group
Align card headers, content and actions across each row.
@threadlabs/looma
Aligned card regions
Cluster
Cluster layout primitive for row-style content with wrapping support.
@threadlabs/looma
Default
Container
Container primitive for readable measure and horizontal gutters.
@threadlabs/looma
Default
Welcome back
Grid
Responsive auto-fit grid primitive, with explicit fixed columns for aligned matrices and optional neutral or accent shading for chosen columns using the theme palette.
@threadlabs/looma
Default
Reel
Contained, keyboard-focusable horizontal scrolling for cards and other repeated items.
@threadlabs/looma
Default
Below
Separator
Semantic separator primitive with horizontal and vertical orientations.
@threadlabs/looma
Default horizontal
Sidebar
A collapsible side panel that becomes a drawer on small screens.
@threadlabs/looma
Workspace navigation
Switcher
Intrinsic equal-column layout that stacks when its own container becomes too narrow.
@threadlabs/looma
Default
Overlay
Move toward the actions
Affordance Scope
A lightweight interaction scope that lets nearby controls anticipate pointer movement without adding listeners or hit regions to every control.
@threadlabs/looma
Nearby actions
Context Menu
Actions opened by right-click, long-press, or the keyboard menu key.
@threadlabs/looma
Target binding
Dialog
Overlay primitive that coordinates native dialog behavior with shared overlay stack rules.
@threadlabs/looma
Default
Menu
Menu container primitive that manages focus and selection across ui-menu-item children.
@threadlabs/looma
Inline menu
Popover
Non-modal overlay primitive with shared open/close lifecycle.
@threadlabs/looma
Trigger binding
Search Shell
A search dialog with query, results, status, and action regions.
@threadlabs/looma
Search commands
Toast Region
Toast Region stacks authored <ui-toast> children and messages added with the show-toast event or the --show-toast command.
@threadlabs/looma
Show a notification
Tooltip
Contextual overlay primitive that links descriptive content to a trigger element.
@threadlabs/looma
Target binding
Forms
Button
Essential button primitive that enhances semantic button markup and styling hooks.
@threadlabs/looma
Default
Su
M
T
W
Th
F
S
No available dates this month.
Calendar
Keyboard-accessible day, month and year navigation with shared availability rules.
@threadlabs/looma
Choose a date
Color Picker
Square or circular swatch button with shared control sizing and a dismissible RGB/hex colour editor.
@threadlabs/looma
Accent color
Combobox
A searchable text field with authored <option> suggestions.
@threadlabs/looma
Label and options
Read the release notes before updating.
Compact Content
An escaped semantic rendering of a short rich-text document.
@threadlabs/looma
Short rich-text content
A short message with emphasis
Compact Editor
A short rich-text field with inline formatting, native shortcuts and controlled document changes.
@threadlabs/looma
Short rich-text field
Appearance
Cycle Button
One compact native button that cycles an ordered set of named icon states without moving focus.
@threadlabs/looma
Cycling appearance
Date Field
Type dates and times without changing their stored meaning.
@threadlabs/looma
Type a date
Su
M
T
W
Th
F
S
No available dates this month.
Su
M
T
W
Th
F
S
No available dates this month.
Date Range Picker
Type or select date ranges without shifting an already chosen endpoint.
@threadlabs/looma
Edit a date range
Editor
A structured document editor with formatting, tables, references and host-owned services.
@threadlabs/looma
Document editor
Attachments
Drop files here, or choose files below.
File Input
Choose or drop files, with native forms and accessible removal.
@threadlabs/looma
Choose or drop files
Form Field
Form-field composition primitive that links label/control/description semantics.
@threadlabs/looma
Label, control, and help
Icon Button
Icon-only button primitive with stable square sizing and variant tokens for shell controls, compact actions, and editor chrome.
@threadlabs/looma
Default
Input Group
An Input with fixed text before or after the value, such as a domain suffix.
@threadlabs/looma
Suffix
Number Input
Bounded exact number and unit editing with safe arithmetic, stepping and keyboard controls.
@threadlabs/looma
Exact and visual editing
Radio
Radio control primitive for mutually exclusive options, typically composed within ui-radio-group.
@threadlabs/looma
Default
Radio Group
Grouped selection primitive that coordinates ui-radio descendants, keyboard navigation, and normalized selection events.
@threadlabs/looma
Default horizontal
Segmented Control
A compact shared track for mutually exclusive choices.
@threadlabs/looma
One visible choice
Select
Select control that lowers directly to a native <s-lect>; author <option> children directly inside it.
@threadlabs/looma
Default
Slider
Native accessible range paired with bounded exact number and unit editing.
@threadlabs/looma
Exact and visual editing
Swatch
A round colour dot that is a native radio, named by its tone, for choosing a colour inside a radio group.
@threadlabs/looma
Choose a color
Switch
Binary control primitive that reflects switch semantics for checked state.
@threadlabs/looma
Default
Textarea
Multiline input that lowers directly to a native <textarea> while applying Looma's shared control theme.
@threadlabs/looma
Default
Time Field
Editable times with canonical values and locale-aware display.
@threadlabs/looma
Opening time
Time Picker
Block-based time entry with localized pointer choices.
@threadlabs/looma
Type or choose a time
Display
Avatar
Image and fallback initials primitive for identity surfaces such as profiles and assignees.
@threadlabs/looma
Name, fallback, and sizes
Avatar Group
Container that displays overlapping avatars with an optional "+N" overflow pill when the count exceeds the visible maximum.
@threadlabs/looma
Default maximum
Team notes
A clear place for shared work.
| Customer | Items | Total |
|---|---|---|
| Ada Park | 3 | $124.00 |
| Ben Ortiz | 1 | $18.50 |
| Chen Wu | 5 | $302.10 |
Data Table
A table of rows, with columns written as markup and frozen columns and rows.
@threadlabs/looma
Orders table
- Site
- Acme
- Invited by
- Ada Lovelace
- Role
- Editor
Disclosure
Progressively enhances a button/content pair into an accessible disclosure.
@threadlabs/looma
Default closed
Image
A semantic image surface with optional selection, corner resizing, and text wrapping.
@threadlabs/looma
Image
- Roadmap
- Onboarding
- Glossary
Nav Item
One destination in a side or rail navigation: the sections of a product, or the parts of a record.
@threadlabs/looma
Sidebar
Read the guide
Notice Stripe
Edge-to-edge announcements with optional actions and dismissal.
@threadlabs/looma
Announcement with action
Planning
Roadmaps, decisions, and the reasons behind them.Recently updated
Pages edited in this workspace, newest first.
Site Header
Site branding and navigation with an automatic mobile drawer.
@threadlabs/looma
Compact header
Status Message
Loading, empty, and failed states within a content area.
@threadlabs/looma
Empty state
| Page | Status |
|---|---|
| Roadmap | Draft |
| Guide | Ready |
Tabs
Tablist primitive that synchronizes tab focus, selection, and panel visibility.
@threadlabs/looma
Default horizontal
Clear ideas.
Space to make them happen.
Updated today
Application toolbar
A sticky app toolbar for a title, search, and contextual actions.
@threadlabs/looma
Default
Tree
An accessible hierarchy with disclosure, bounded logical indentation, and truthful drag-and-drop previews.
@threadlabs/looma
Project files
Add details
Enter the details for this stage, then continue to review.
Extras
ease-in-out
Curve Editor
Draggable cubic Bézier handles with keyboard and bounded exact coordinate editing.
@threadlabs/looma
Edit an easing curve
Light Editor
Position a shared light source with a draggable, keyboard-operable handle and exact bounded coordinates.
@threadlabs/looma
Light position