Form & Input — 16
Buttons
Sizes, tones, animated variants — chain with .lsd-fx--*.
Inputs
Text, search, password, number — sizes, states, styles.
/inputsSearch input
Search affordance with clear-on-x and submit.
/search-inputCombobox
Text + filterable dropdown, keyboard navigation.
/comboboxRange input
Styled range with value bubble.
/range-inputSliders
Tick marks, dual-handle, vertical.
/slidersToggles
Switches, checkboxes, segmented controls.
/togglesQuantity input
Number with +/- stepper.
/quantity-inputRating
Star ratings, read-only and interactive.
/ratingTag input
Type and press enter to add chips.
/tag-inputFile uploader
Drop zone, multi-file, progress.
/file-uploaderColor picker
Hue / saturation / value swatches.
/color-pickerOKLCH picker
Constellation-axes color picker.
/oklch-color-pickerCalendar
Month grid, range and single-date.
/calendarTime picker
Hours / minutes columns.
/time-pickerKbd row
Inline keyboard shortcut chips.
/kbd-rowOverlay & Surface — 9
Modals
Center, side-sheet, drawer over native <dialog>.
Drawer
Slide-in panel, any edge, three sizes.
/drawerSheet
Mobile bottom sheet with snap points.
/sheetPopovers
Rich floating panels, click-trigger.
/popoversTooltips
CSS-first hover + JS focus support.
/tooltipsToasts
Auto-dismiss, five tones, six positions.
/toastsAlerts
Inline tone-keyed status messages.
/alertsDropdown menu
Click button reveals action list.
/dropdown-menuCommand palette
Cmd/Ctrl+K modal launcher.
/command-paletteNavigation — 7
Tabs
ARIA tablist, arrow-key navigation.
/tabsPagination
Numbered, prev-next, mini, text.
/paginationBreadcrumbs
Crumb trail with separators.
/breadcrumbsSteps
Multi-step indicator, vertical / horizontal.
/stepsSide menu
Vertical nav with nested groups.
/side-menuDock
Pointer-magnified launcher.
/dockSkip links
Skip-to-content for keyboard users.
/skip-linksDisplay & Content — 13
Cards
Sizes, tones, layouts, eleven personalities.
/cardsCard flip
3D-flip card on hover or click.
/card-flipBento grid
Asymmetric template-areas layout.
/bento-gridTables
Striped, sortable, sticky-header.
/tablesTree view
Expandable hierarchical list.
/tree-viewAccordions
Semantic details/summary with smooth height.
/accordionsQuote
Pull-quote and blockquote variants.
/quoteCode block
Pre + syntax-tokens, copy button.
/code-blockMark
Highlighted inline text.
/markDividers
Horizontal / vertical rules with label.
/dividersEmpty state
Zero-data placeholder with CTA.
/empty-stateImages
Aspect ratios, frames, image effects.
/imagesChips
Chips, tags, badges — eight style variants.
/chipsAvatar & Identity — 3
Avatars
Six sizes, status + badge + group variants.
/avatarsAvatar circles
Stacked overlapping circles.
/avatar-circlesAvatar stack
Avatar pile with overflow counter.
/avatar-stackFeedback & Loader — 4
Progress
Linear, circular, segmented, indeterminate.
/progressCircular progress
Animated stroke-dasharray dial.
/animated-circular-progress-barLoader
Spinners, dots, bars — token-paced.
/loaderNumber ticker
Count-up animation on view.
/number-tickerMotion & Effects — 7
Animations extended
Meteors, sparkles, beams, retro grids.
/animations-extendedAnimated list
FLIP-animated list inserts.
/animated-listBlur fade
Reveal with blur on view.
/blur-fadeBox reveal
Sliding panel reveal animation.
/box-revealMarquee
Token-paced infinite scroll.
/marqueeCarousel
Scroll-snap and JS-paginated carousels.
/carouselScroll velocity
Marquee paced by scroll velocity.
/scroll-based-velocityLSD-specific authoring — 7
Token inspector
Hover overlay shows every canonical token in play.
/token-inspectorToken-snap drag
Drag-to-resize snaps to next token.
/token-snap-dragSurface tier picker
Visualise and switch low / elevated / high tiers.
/surface-tier-pickerContainer query playground
Resize the container, watch the card morph.
/container-query-playgroundAurora timeline mini
Embeddable three-track keyframe scrub.
/aurora-timeline-miniBehaviors wire graph
Trigger → Action → Target on a wire.
/behaviors-wire-graphScroll progress
Page-progress bar bound to scroll.
/scroll-progress