Tesserae UI Components Library

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

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

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

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

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

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

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

A single expand / collapse section, with a clickable header that reveals its body content. Used standalone for "show more" affordances, o...

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

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

A full-bleed background container used to host a centered card or hero section, typically as the application shell. Combine it with `Card...

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

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

One small fact on a line of them: an optional mark, followed by optional text

A two-line list item that pairs a bold title with a lighter subtitle, with an optional leading icon in a rounded-square background.

A heading used to label a section of a form or page, with optional subtitle and trailing actions. Pairs well with [SectionStack](../surfa...

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

Renders Markdown text as sanitized HTML. The component uses the bundled marked and DOMPurify libraries (via the Markdown helper) so...

A rendered unified diff, line-by-line or side-by-side

Bind keyboard shortcuts to actions across your application.

Removed. A Button with an href is the link now; this page records what maps to what.

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

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

A button that maintains a checked state. Created by calling .ToToggle() on an existing Button, so all standard button styling (icons,...

A group of icon buttons of which exactly one is selected at a time, like a segmented control. Each item carries a UIcons glyph, a toolt...

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

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

A menu surface composed of clickable items, optional headers, dividers and arbitrarily deep nested submenus. Built on top of the [Popover...

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

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

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

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

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

EditableArea is an inline editing component for multi-line text. It displays formatted text until the user enters edit mode, then swaps t...

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

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

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

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

The Option component represents a single mutually exclusive choice inside a ChoiceGroup. In the public API, the helper method is `Choic...

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

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

A form input that lets the user assemble a list of short string values ("tags" or "chips") by typing them in and confirming each with a d...

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

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

A slider variant for selecting from discrete, ordered steps.

Displays and collects star-based ratings.

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

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

Pick files from a dialog, or drop them onto a target area.

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

A composite picker for selecting a contiguous range of dates ("from" → "to"). Internally composed of two DatePicker instances joined by...

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

The TimePicker component provides a native browser control for selecting a time. It stores the selected value as a DateTimeOffset and i...

A component for selecting a month from a year view.

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

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

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

A two-way-bound editing form generated from a typed object's public properties

An inline question with choice buttons that locks once answered

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

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 top navigation bar for displaying brand, navigation links, and command actions.

A vertical navigation component for primary application navigation.

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

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

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

A selector-style pivot for switching between content panels.

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

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

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

The compact “‹ 3 of 7 ›” control, for stepping through a set one at a time

A guided multi-step process indicator and navigator.

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

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

A bordered table of label/value rows, for the metadata block of a preview

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

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

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

A Stack whose items can be reordered by drag and drop, reporting the new order.

A hierarchical tree view for navigating nested data structures.

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

A kanban-style board for organizing tasks across columns.

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

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

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

A flexible input field combining search and command palette behaviors.

A search-result row: icon tile, title, excerpt, footer and the full view behind it

Line, area, bar and pie charts drawn from typed series

A compact inline chart for visualizing trends in small spaces.

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

A stacked horizontal bar showing how weighted segments add up to a total

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

A flow-chart surface with draggable nodes and auto-routed arrows

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

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

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

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

Tooltips on any component, wrapping Tippy.js — text, HTML or a component.

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

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

A circular progress indicator showing completion of an operation.

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

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

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

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

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

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

A reusable, anchored overlay surface used to display arbitrary IComponent content next to another component (the anchor). Popovers are...

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...

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

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

A conversational interface for displaying message threads and sending messages.

A card describing one piece of context attached to a conversation, and the group that folds several of them behind one summary

Inline tool-call indicator that expands accordion-style to show the associated content. The content component is created lazily the first...

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

A card variant designed for displaying resource summaries with metadata.

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

An animated pixel-art avatar that can perch on another component

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

A responsive image element with optional sizing, fit-mode and lazy-loading support. Use the fluent helpers to set fit behaviour (Cover,...

A fanning stack of page thumbnails, as the preview rail of a result

An iframe that renders untrusted HTML or external URLs in a locked-down context

Utilities for working with theme color tokens and palette helpers.

Switch between light and dark and customise the theme palette via CSS variables.

A picker for selecting colors from a predefined palette.

Helpers for creating themed gradients used in backgrounds and surfaces.

The Icon component renders a visual glyph using either the strongly typed UIcons set or an Emoji. It is useful for reinforcing action...

A strongly typed UIcons enum over the bundled UIcons icon set.

A strongly typed Emoji enum over the bundled Emoji.css set.

Lightweight state containers that notify components when a value changes.

Renders content asynchronously, running the task on first render.

Defer initialization of components while showing a progress indicator.

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

Tap, double-tap, long-press, pan, pinch and rotate recognition on any component.

A component that fires an action when it scrolls into the viewport. Useful for triggering lazy loading, telemetry, infinite-scroll pagina...

The interface every component implements, and the fluent extension methods shared across all of them.

Build your own component by implementing IComponent or deriving from ComponentBase.

Call JavaScript and browser APIs from C# through the Transpose compiler.

Bundle a third-party JavaScript library and wrap it as a Tesserae component.