Components

A collapsible content component

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

Annotated text editor

A component that represents a user

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

A component to display a badge

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

A card component with optional headers and footers

A slideshow component for cycling through elements

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

A component to display a chat

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

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

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

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

A toolbar for housing commands

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

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

A component to edit cron expressions

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

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

A component that animates changes

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

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

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

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

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

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

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

A component to display a grid

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

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

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

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

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

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

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

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

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

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

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

A component to display a message

A component to display a metric

A control to select a year and month

A navigation bar component

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

An omnibox search component

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

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

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

A component to navigate through pages

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

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

A component to display a plan

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

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

A circular progress indicator

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

An inline question with choice buttons that locks once answered

A component for collecting or displaying star ratings

A card to display a resource

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

The SaveButton component is a specialized button designed to handle the various states of a saving operation. It automatically manages th...

A toast notification for save operations

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

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

A visual separator for sidebar items

A sidebar navigation component

A vertical icon-only navigation rail

A placeholder component for loading state

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

A compact inline trend chart

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

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

A component to display a step-by-step process

A slider that snaps to discrete named steps

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

A board for managing tasks

An onboarding walkthrough that highlights UI elements one by one

A control to input multiple lines of text

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

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

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

A histogram control for selecting a time range

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

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

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

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

A component that displays a hierarchical list

The Uptime component is part of the Tesserae UI library.

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

A control to select an ISO week number