Tesserae UI Components Library

The Breadcrumb component is used to display a navigational trail, indicating the user's current page within a hierarchical stru...

DetailsList is a robust component for displaying an information-rich collection of items. It extends the basic List capabilitie...

The Grid component provides a flexible layout container that arranges its child components into a grid structure. It is used pr...

InfiniteScrollingList is a dynamic component designed to display a paginated list of UI elements that loads additional content ...

ItemsList is a flexible list component designed for displaying small sets of items. It belongs to the Collections group and can...

The Masonry component arranges its child components in a dynamic, grid-like layout where items are organized into columns of eq...

ObservableStack is a container component that manages the display of its child components using a flexbox-inspired layout and a...

The OverflowSet component is a container designed to manage a set of UI items that may overflow the available display space. It...

SearchableGroupedList is a versatile collection component designed to render a list of items that can be grouped and searched. ...

The SearchableList component is a generic list container designed to display and filter a collection of items that implement th...

A Stack is a container component that abstracts the implementation of a flexbox to layout its children components. It is useful...

The Timeline component provides a base for rendering vertical timelines. It arranges timeline items and alternates their placem...

VirtualizedList is a collection component designed to efficiently render large sets of items by virtualizing the DOM content. I...

The ActionButton component is a composite UI control that combines a display area and an associated action button. It is design...

The Accordion contains a list of expanders that can be toggled to reveal more information, useful for organizing content into manageable chunks.

A specialized editor for annotating text with custom highlights, comments, or marks.

The Avatar component represents users with images, initials, and presence indicators.

A compact label component for displaying status, counts, or short tags inline with other content.

The Card component provides a contained surface for displaying related content with a title and content sections.

The Carousel component cycles through a list of items, typically images, in a horizontal sliding fashion.

A conversational interface for displaying message threads and sending messages.

A horizontal toolbar for grouping commands and actions with overflow handling.

A specialized editor for building cron expressions through a guided UI.

A component that visualizes changes between two values with positive/negative styling.

An inline notification component for displaying success, warning, error, or informational content.

Displays a single key metric with optional trend indicators and labels.

A component for selecting a month from a year view.

A top navigation bar for displaying brand, navigation links, and command actions.

A flexible input field combining search and command palette behaviors.

Controls for navigating through paginated content with page numbers and next/previous actions.

A component for visualizing structured plans, checklists, or step-by-step processes.

A circular progress indicator showing completion of an operation.

Displays and collects star-based ratings.

A card variant designed for displaying resource summaries with metadata.

A button with built-in state management for save operations (idle, saving, saved, error).

A toast notification that reflects save operation status with built-in state transitions.

A collapsible side panel for navigation or supplemental content.

A separator used to visually group items in a Sidebar.

A vertical navigation component for primary application navigation.

Placeholder loading states that mimic the layout of content being loaded.

A compact inline chart for visualizing trends in small spaces.

A guided multi-step process indicator and navigator.

A slider variant for selecting from discrete, ordered steps.

A kanban-style board for organizing tasks across columns.

A coach-mark component for highlighting features and providing in-app tutorials.

A multi-line text input for longer-form input.

A time range picker visualized over a histogram of data density.

A hierarchical tree view for navigating nested data structures.

Visualization for uptime status across days, weeks, or other time periods.

A picker for selecting a specific week within a calendar year.

The Button component provides an interactive UI element that the user can click to trigger an action. It is an essential compon...

The CheckBox component is a UI element used for binary selection, allowing users to toggle between two states: checked and unch...

The ChoiceGroup component allows users to select a single option from a set of mutually exclusive choices, similar to a group o...

The ColorPicker component provides a native browser widget for selecting colors. It is part of the Tesserae UI library's Compon...

The DatePicker is a UI component that allows users to select a date using the native browser date picker widget. As part of the...

The DateTimePicker component provides a native browser widget for selecting date and time values. It is designed for situations...

The Dropdown component renders an interactive list of options with a single visible selected item by default. When a user click...

EditableLabel is a UI component that displays text which can be clicked to switch into an inline editing mode. In this mode, us...

The GridPicker component creates an interactive grid of buttons, where each cell can have multiple states. It is used for build...

The HorizontalSeparator component is used to visually separate content into distinct groups with a horizontal rule. It can disp...

The Label component is used to provide a descriptive title or identifier for a UI element or group of elements. It is typically...

The NumberPicker component is a numeric input control that leverages the native HTML number input field. It provides a fluent A...

Picker is a versatile UI component used for selecting items from a list of suggestions. It provides support for both multi-sele...

The ProgressIndicator is a UI component used to visually represent the completion status of an operation when the total units o...

SearchBox provides a dedicated input field for searching through content. It is designed to capture search queries either when ...

The Slider component represents a range input control that allows users to select a numeric value within a specific range. It i...

The Spinner component is a visual indicator that displays an animated circle outline, suggesting that a background process is r...

The SplitView component creates a two-pane container that arranges two child components separated by a draggable splitter. This...

TextBlock is a display component used to render text in a consistent and customizable manner. It is part of the Components grou...

The TextBox component enables users to input text data in your application. It is designed for use in forms or any area where t...

The TextBreadcrumbs component is used as a navigational container that aggregates multiple TextBreadcrumb components. It displa...

The Toggle component represents a physical switch that allows users to turn a setting on or off. It is ideal for binary operati...

The ContextMenu component displays a contextual pop-up menu that appears relative to a target element or specific screen coordi...

A pivot variant that displays each tab as a selectable card with associated content.

A two-pane horizontal container with a draggable splitter for resizing each pane.

A selector-style pivot for switching between content panels.

A pivot using segmented control styling for switching between content panels.

A modal dialog organized with tabs for displaying multiple related content sections.

The Dialog component is a modal overlay that is used to display temporary content and gather user confirmation or input. It blo...

The Float component is part of the Surfaces group and is designed to create absolute-positioned overlays within other container...

The Layer component is a technical utility used to render content outside the main DOM tree, appending it at the end of the doc...

The Modal component provides a temporary overlay window that can be used to display contextual information or gather user input...

The Panel component creates a modal or non-modal overlay that presents contextual content, such as forms or informational messa...

The Pivot component is a tab-based container used to organize and display content panels within a user interface. It allows use...

ProgressModal is a modal dialog component designed for displaying progress information in a blocking UI overlay. It is part of ...

SectionStack is a container component used to organize content into distinct sections presented in a vertical layout. It handle...

The TutorialModal is a surface component used to display a guided tutorial or multi-step process to the user. It provides a str...

The NodeView component is a powerful utility for rendering interactive node-based flows. It is used to define and display nodes...

A picker for selecting colors from a predefined palette.

Utilities for working with theme color tokens and palette helpers.

A keyboard-driven command launcher for fast in-app actions.

Defer initialization of components while showing a progress indicator.

Helpers for creating themed gradients used in backgrounds and surfaces.

Bind keyboard shortcuts to actions across your application.

An in-app notification center for collecting and displaying app notifications.

The Toast component provides short-lived notifications that alert users with important messages, such as success, information, ...

The Validator is a utility component designed to orchestrate and centralize the validation of multiple UI elements. It register...