Skip to main content

Components

Components

All lt-* web components in the design system, each with a live playground, usage examples, and a full API reference.

Philosophy, prop naming conventions, and a directory of every component

Collapsible content sections

Inline notification for persistent contextual feedback

User avatar with image, initials, and icon fallbacks

Compact status labels for categories, counts, and states

A navigation trail that shows the user's location in the app hierarchy.

Interactive button component with multiple variants and states

Visual date-selection grid with keyboard navigation, range selection, and locale support

Checkbox input component

Compact label for tags, filters, and attributes

A read-only textfield that opens the native color picker and displays the selected hex value.

Searchable single-select dropdown

A text field with a calendar popover for visual date selection

Date, time, and datetime-local input with design-system styling

Modal dialog component

A visual separator between content sections.

A floating menu anchored to a trigger element

A layout component that organises content into a sticky app bar with before, logo, content, and after slots.

Accessible icon-only button for actions like close, delete, and navigation.

A lightweight image wrapper with rounded corners and responsive fill support.

A styled anchor element with primary color and optional external-link behaviour.

Ordered and unordered list components

Horizontal and vertical nav with nested collapsible items

Page navigation for paged data sets

A horizontal bar that shows how far along a process is.

Radio button and radio group components

Dropdown select component

A slide-in panel anchored to any edge of the viewport, with a backdrop overlay.

A loading placeholder that mimics the shape of content.

A range input for selecting a numeric value within a bounded range

Brief notification that appears temporarily at the bottom of the viewport

Loading indicator component

Container with elevation and surface styling

Toggle switch component

Tab and tab group components

Data table with sorting and responsive design

Renders text with a predefined typographic style. Covers display sizes, headings, body copy, captions, and overlines.

Text input with validation states

Floating label that appears on hover or focus of a trigger element