Component gallery

alert · texuli

Inline feedback for a page section (status or error).

Open docs for Alert

alert-dialog · texuli

Modal confirm/cancel dialog for consequential actions.

Open docs for AlertDialog

analytics-grid · texuli

Auto-fit KPI and widget grid for dashboard screens.

Open docs for AnalyticsGrid

badge · texuli

A compact status or category label.

Open docs for Badge

banner · texuli

Full-width notice across a page or app shell.

Open docs for Banner

blocks-code · @texuli/blocks

Validated, highlighted code.

Open docs for Code blocks

blocks-data · @texuli/blocks

Validated tables, statistics, key metrics and chart content blocks.

Open docs for Data blocks

blocks-diagram · @texuli/blocks

Validated flow, tree, board and terminal diagrams.

Open docs for Diagram blocks

blocks-embed · @texuli/blocks

Validated link previews (URL policy) and embed-app shells. Texuli never runs app JSON; hosts mount via mountEmbed with a sandboxed iframe contract.

Open docs for Embed blocks

blocks-interactive · @texuli/blocks

Validated polls, quizzes, calculators and checklists.

Open docs for Interactive blocks

blocks-map · @texuli/blocks

Validated map points and routes.

Open docs for Map blocks

blocks-media · @texuli/blocks

Validated image, figure, video and gallery content blocks.

Open docs for Media blocks

blocks-structure · @texuli/blocks

Validated layouts and calls to action.

Open docs for Structure blocks

blocks-text · @texuli/blocks

Validated heading, paragraph, list, quote and callout content.

Open docs for Text blocks

breadcrumb · texuli

Hierarchy trail with URL-policy links.

Open docs for Breadcrumb

button · texuli

A pressable action control with loading and optional link rendering.

Open docs for Button

button-group · texuli

Groups related buttons with shared borders and orientation.

Open docs for ButtonGroup

callout · texuli

Emphasized documentation-style tip with a strong start edge.

Open docs for Callout

card · texuli

A surface for grouping related content with optional link behavior.

Open docs for Card

charts-area · @texuli/charts

A categorical area chart with an accessible data table.

Open docs for Area chart

charts-bar · @texuli/charts

A categorical bar chart with a zero baseline and accessible data table.

Open docs for Bar chart

charts-bubble · @texuli/charts

A scatter plot where point size can encode another measure.

Open docs for Bubble chart

charts-bullet · @texuli/charts

A compact value, range and target comparison.

Open docs for Bullet chart

charts-canvas-renderer · @texuli/charts

A low-level canvas mark renderer for dense chart series.

Open docs for Canvas chart renderer

charts-cartesian · @texuli/charts

The general line, area, bar, stacked bar or combo chart renderer.

Open docs for Cartesian chart

charts-combo · @texuli/charts

A categorical chart that combines bar and line series.

Open docs for Combo chart

charts-donut · @texuli/charts

A part-to-whole chart with a central opening and data table.

Open docs for Donut chart

charts-funnel · @texuli/charts

A conversion funnel with step values and accessible table.

Open docs for Funnel chart

charts-gauge · @texuli/charts

A radial value gauge with thresholds and an accessible data table.

Open docs for Gauge chart

charts-geo-map · @texuli/charts

A tiled geographic choropleth with a tabular data alternative.

Open docs for Geographic map

charts-geo-point-map · @texuli/charts

Geographic points positioned on a tiled map.

Open docs for Geographic point map

charts-heatmap · @texuli/charts

A matrix of labeled cells with an accessible data table.

Open docs for Heatmap

charts-line · @texuli/charts

A categorical line chart with accessible values.

Open docs for Line chart

charts-network · @texuli/charts

A node and connection graph with an accessible table.

Open docs for Network graph

charts-pie · @texuli/charts

A part-to-whole chart with an accessible data table.

Open docs for Pie chart

charts-progress-ring · @texuli/charts

A compact radial progress indicator with a data table.

Open docs for Progress ring

charts-sankey · @texuli/charts

A weighted flow diagram with an accessible table.

Open docs for Sankey chart

charts-scatter · @texuli/charts

A quantitative scatter plot with an accessible data table.

Open docs for Scatter chart

charts-sparkline · @texuli/charts

A compact line, area or bar trend chart.

Open docs for Sparkline

charts-stacked-bar · @texuli/charts

A categorical stacked bar chart with accessible values.

Open docs for Stacked bar chart

charts-sunburst · @texuli/charts

A hierarchical part-to-whole chart with an accessible table.

Open docs for Sunburst chart

charts-treemap · @texuli/charts

A hierarchical part-to-whole chart with an accessible table.

Open docs for Treemap chart

checkbox · texuli

A binary or indeterminate checkbox with optional label.

Open docs for Checkbox

chip · texuli

A toggleable filter chip (pressed state).

Open docs for Chip

code · texuli

Inline or block code with escaped text (no HTML).

Open docs for Code

combobox · texuli

A text input that filters a list of options, for one value or several.

Open docs for Combobox

command-palette · texuli

Dialog-hosted command palette with search and recent items.

Open docs for CommandPalette

context-menu · texuli

Pointer-anchored menu (right-click, long-press, Menu key).

Open docs for ContextMenu

context-menu-trigger · texuli

Region that opens the context menu.

Open docs for ContextMenu.Trigger

deck-slide · texuli

One slide in a deck: a title, content blocks and speaker notes.

Open docs for Deck slide

description · texuli

Help text associated with a field control.

Open docs for Description

detail-panel · texuli

Non-modal detail panel alongside content.

Open docs for DetailPanel

dialog · texuli

Modal dialog with title, optional description, body and footer.

Open docs for Dialog

drawer · texuli

Bottom or edge drawer with optional drag dismiss.

Open docs for Drawer

dropdown-menu · texuli

Menu button pattern with items, checkboxes, radios and submenus.

Open docs for DropdownMenu

dropdown-menu-content · texuli

Floating menu surface for dropdown items.

Open docs for DropdownMenu.Content

dropdown-menu-item · texuli

Menu item with optional icon and shortcut chrome.

Open docs for DropdownMenu.Item

dropdown-menu-trigger · texuli

Styled button that opens a dropdown menu.

Open docs for DropdownMenu.Trigger

empty-state · texuli

Placeholder when a list or panel has nothing to show yet.

Open docs for Empty state

error-state · texuli

Full-panel failure with optional retry.

Open docs for Error state

field · texuli

Label, description and error wiring for a single control.

Open docs for Field

field-error · texuli

An alert-role error message for a field.

Open docs for FieldError

form · texuli

A form shell with layout, validation hook and error map.

Open docs for Form

hover-card · texuli

Preview panel that opens on hover or focus.

Open docs for HoverCard

hover-card-content · texuli

Styled hover-card surface.

Open docs for HoverCard.Content

icon-button · texuli

An icon-only button that requires an accessible name.

Open docs for IconButton

inline-text · @texuli/catalog

A plain text run for the slot of a slot-only component (button, label, badge).

Open docs for Inline text

input · texuli

A single-line text (or file) control with optional clear.

Open docs for Input

input-group · texuli

An input with start/end adornments and optional clear.

Open docs for InputGroup

kbd · texuli

Inline keyboard key affordance.

Open docs for Kbd

kpi · texuli

A formatted metric with unit, previous-period delta and optional link.

Open docs for KPI

label · texuli

A form label with optional required marker and sr-only mode.

Open docs for Label

layout-card · texuli

Content card frame for grouped agent-authored blocks.

Open docs for Card layout

layout-chrome · texuli

Shared brand, actions, user and skip-link chrome for desktop layouts.

Open docs for LayoutChrome

layout-deck · texuli

Slide deck frame for sequenced content.

Open docs for Deck layout

layout-drawer · texuli

Mobile navigation drawer built on the dialog primitive.

Open docs for LayoutDrawer

layout-grid · texuli

Responsive content grid for agent-authored tiles.

Open docs for Grid layout

layout-page · texuli

Full page content frame for agent-authored documents.

Open docs for Page layout

layout-settings · texuli

Settings section list plus detail pane.

Open docs for Settings layout

media-composition-canvas · @texuli/media

A validated layered composition rendered to a canvas.

Open docs for Canvas composition

media-composition-svg · @texuli/media

A validated, structured vector composition.

Open docs for SVG composition

media-image · @texuli/media

A responsive image with URL validation, loading states and actions.

Open docs for Responsive image

menubar · texuli

Application menubar with roving top-level items.

Open docs for Menubar

menubar-trigger · texuli

Top-level menubar item that opens a menu.

Open docs for Menubar.Trigger

multi-select · texuli

A combobox for several values, shown as removable chips.

Open docs for MultiSelect

nav-icon · texuli

Renders a nav model icon by name or component.

Open docs for NavIcon

navigation-menu · texuli

Site or app navigation with expandable triggers and links.

Open docs for NavigationMenu

pagination · texuli

Page controls for long lists.

Open docs for Pagination

popover · texuli

Non-modal floating panel anchored to a trigger.

Open docs for Popover

popover-content · texuli

Styled popover surface with optional arrow.

Open docs for Popover.Content

radio · texuli

One option inside a RadioGroup.

Open docs for Radio

radio-group · texuli

A set of exclusive radio options with keyboard roving.

Open docs for RadioGroup

responsive-modal · texuli

Dialog on large screens, drawer/sheet on small screens.

Open docs for ResponsiveModal

select · texuli

A single-value select root with size and variant chrome.

Open docs for Select

select-content · texuli

The positioned listbox surface for Select items.

Open docs for Select.Content

select-group · texuli

Groups related Select items under an optional label.

Open docs for Select.Group

select-item · texuli

One selectable option inside Select.Content.

Open docs for Select.Item

select-label · texuli

A non-interactive heading inside a Select group.

Open docs for Select.Label

select-portal · texuli

Portals Select.Content out of overflow-clipped ancestors.

Open docs for Select.Portal

select-separator · texuli

A visual divider between Select groups or items.

Open docs for Select.Separator

select-trigger · texuli

The button that opens a Select listbox.

Open docs for Select.Trigger

select-value · texuli

Shows the selected label or a placeholder inside the trigger.

Open docs for Select.Value

select-viewport · texuli

Scrollable viewport inside Select.Content.

Open docs for Select.Viewport

sheet · texuli

Edge-anchored modal panel (drawer-like sheet).

Open docs for Sheet

sidebar · texuli

Collapsible app rail with sections, badges and safe links.

Open docs for Sidebar

split-view · texuli

Master-detail split with list and detail panes.

Open docs for SplitView

stat · texuli

A single metric with optional delta, trend and sparkline slot.

Open docs for Stat

stepper · texuli

Horizontal or vertical progress through ordered steps.

Open docs for Stepper

switch · texuli

An immediate on/off setting control.

Open docs for Switch

table · texuli

A responsive data table with density, stacking and sticky header options.

Open docs for Table

tag · texuli

A labeled chip that can be removed.

Open docs for Tag

text-counter · texuli

An input or textarea that shows remaining characters near the limit.

Open docs for TextCounter

textarea · texuli

A multi-line text control with optional autosize.

Open docs for Textarea

timeline · texuli

Vertical or horizontal chronological list of events.

Open docs for Timeline

toaster · texuli

Live region that renders toast notifications from the shared store.

Open docs for Toaster

tooltip · texuli

Short delayed hint on hover or focus.

Open docs for Tooltip