ComponentsExplore real-world component showcases and examples.
AlertDialog — DeleteA delete button that asks the user to confirm before deleting.
AppShellA basic app shell with content padding.
AspectRatioThree aspect ratio containers: 1:1, 4:3, and 16:9.
AvatarAvatars at every size with an image, initials fallback, and a status dot. A quic…
AvatarGroupOverlapping avatar rows with max limit and server-side overflow count. Shows tea…
AvatarStatusDotAvatarStatusDot renders a presence indicator on an Avatar, with variants for pos…
Badge — VariantsAll semantic and color badge variants in a single view. Use semantic variants fo…
Banner — StatusesAll four status banners stacked — info, success, warning, and error. A quick vis…
Blockquote — ShowcaseBlockquote with and without citation. A quick visual reference for the blockquot…
BreadcrumbItemBreadcrumbItem represents a single step in a breadcrumb trail, supporting links,…
BreadcrumbsA breadcrumb trail showing page hierarchy with linked ancestors and a current pa…
Button — VariantsAll four button variants side by side — primary, secondary, ghost, and destructi…
ButtonGroup
CalendarAn interactive single-date calendar with a selected date. Click any day to chang…
CardA card with a heading and body text showing the default container style.
CarouselA horizontal carousel of cards with scroll-snap and navigation buttons. Scroll o…
CenterContent centered horizontally and vertically inside a fixed-height container.
ChatComposer
ChatComposerDrawerComposer drawer with file tokens, a collapsible toggle, and header actions. Use …
ChatComposerInput
ChatDictationButtonInteractive dictation button connected to the SpeechRecognition API via useXDSCh…
ChatLayout
ChatLayoutScrollButtonScroll button in hidden, visible, and expanded (with label) states. The button f…
ChatMessageA user multi-bubble group with delivery status and an assistant ghost response w…
ChatMessageBubbleGrouped user bubbles with filled styling and a ghost-variant agent response, wit…
ChatMessageListBasic AI chat conversation with user and assistant messages. The simplest way to…
ChatMessageMetadataThree-message conversation showcasing error status with retry, delivery status, …
ChatSendButtonReady, custom icon, and streaming states of the send button.
ChatSystemMessageSystem messages for date dividers, status updates, and informational notices. Sh…
ChatTokenizedText
ChatToolCalls
CheckboxInputInteractive checkboxes showing checked, unchecked, and indeterminate states with…
CheckboxList
CheckboxListItemCheckbox list items with labels, descriptions, and different states including di…
CircularProgressA circular progress ring filled to 75% with a center label.
ClickableCardA clickable card that navigates on click. Nested interactive elements work indep…
CodeInline code snippets inside a sentence showing how Code renders alongside body t…
CodeBlockA syntax-highlighted TypeScript code block with line numbers, a title bar, and a…
CollapsibleAn accordion group with three collapsible sections in single mode — opening one …
CollapsibleGroupCollapsibleGroup coordinates multiple Collapsible components so that expanding o…
CommandPaletteBasic command palette with static items and keyboard navigation.
CommandPaletteFooterCommand palette footer with custom tip content.
CommandPaletteGroupCommand palette groups in both data-driven (auxiliaryData.group) and composed (X…
CommandPaletteItemCommand palette items with custom content via renderItem and as composed XDSComm…
ContextMenuA right-click area that opens a context menu with action items.
DateInputA date input field with a calendar popover. Type a date or click the calendar ic…
DateRangeInputA date range picker with a button trigger and dual-month calendar popover with p…
DateTimeInputA combined date and time picker. Click to open a calendar popover with a time in…
DialogModal dialog with a header, body content, and close button.
DialogHeaderDialogHeader provides a structured header for dialogs with slots for title, subt…
Divider — VariantsHorizontal dividers in subtle and strong variants, plus a labeled divider. A qui…
DropdownMenuA button that opens a dropdown menu with action items. The menu starts open for …
DropdownMenuItemDropdown menu with custom-rendered items using XDSDropdownMenuItem for icons and…
EmptyStateA no-results empty state with an icon, descriptive message, and a call-to-action…
FieldA form field wrapping a text input with a label, description, and validation sta…
FieldLabelStandalone field labels demonstrating required, optional, tooltip, and icon vari…
FieldStatusField status messages in error, warning, and success states with attached and de…
FileInput
FormLayoutA vertical form layout with text input fields.
Grid
GridSpanGridSpan lets a grid item span multiple columns or rows within an XDSGrid, enabl…
Heading
HoverCardA hover card that shows a user profile preview when hovering over a trigger butt…
HStackDemonstrates XDSHStack arranging items horizontally with different gaps and alig…
Icon
IconButtonAn icon button with a wrench icon.
InputGroup
Item
Kbd
Layout
LayoutContentLayoutContent is the scrollable main content area within a Layout, providing aut…
LayoutFooterLayoutFooter is a fixed footer slot within a Layout, pinned to the bottom for pe…
LayoutHeaderLayoutHeader is a fixed header slot within a Layout, pinned to the top for title…
LayoutPanelLayoutPanel is a sidebar slot within a Layout, used for navigation, detail views…
LightboxA fullscreen image viewer with caption.
LinkA standalone link.
List
ListItemList items with icons, descriptions, and end content slots demonstrating the ful…
MarkdownRich markdown content with headings, lists, and formatting.
MediaTheme — Inverted SurfacesContent rendered over inverted surfaces — dark backgrounds (media, overlays, toa…
MetadataList
MetadataListItemMetadata list items displaying labeled values in various formats including text,…
MobileNav
MobileNavToggleDemonstrates XDSMobileNavToggle as a standalone hamburger button for opening the…
MoreMenuA basic three-dot menu with simple action items.
MultiSelector
NavIconCircular icon containers for navigation headers with accent backgrounds.
NumberInputA number input for quantity entry.
OverflowListA list of buttons that collapses overflowing items into a +N indicator.
Pagination — VariantsAll four display variants stacked — dots, compact, count, and pages. A quick vis…
Popover
PowerSearchToken-based filter bar with enum and text fields, pre-populated with sample filt…
ProgressBarA progress bar filled to 60%.
RadioList
RadioListItemRadio list items with labels, descriptions, and different states including disab…
ResizableHorizontal resizable split with a draggable handle between two panels.
Section — VariantsAll three background variants stacked — section (default surface), muted, and tr…
SegmentedControl
SegmentedControlItemSegmented control items with text labels and icons, including a disabled item.
SelectableCardA plan picker with single-select radio behavior. Cards show an accent border whe…
Selector
SelectorOptionSelector with custom-rendered options using XDSSelectorOption for icons and desc…
SideNav
SideNavCollapseButtonDemonstrates XDSSideNavCollapseButton inside a collapsible SideNav.
SideNavHeadingDemonstrates XDSSideNavHeading with an app name, logo icon, superheading, and su…
SideNavItemDemonstrates XDSSideNavItem with selected, icon, disabled, and nested states.
SideNavSectionDemonstrates XDSSideNavSection with titled groups of navigation items.
SkeletonA skeleton loading placeholder.
SliderA slider control set to 50%.
SpinnerA large spinner indicator.
Stack — DirectionsBadges arranged horizontally and vertically in side-by-side cards.
StackItemStackItem can be used within XDSHStack or XDSVStack for more granular control ov…
StatusDotA positive status dot indicator.
StepperA horizontal stepper with three steps, the second step active.
SwitchA toggle switch for enabling notifications.
SyntaxTheme — PresetsThe same code block rendered with three different syntax themes — GitHub Light, …
TabTab is an individual tab item within a TabList, supporting labels, icons, select…
TableData-driven table with proportional and pixel column widths and hover highlighti…
TabList
TabMenuTabMenu is an overflow menu within a TabList that groups additional tab options …
Text
TextAreaA text area with placeholder text.
TextInput
Theme — Side by SideTwo theme providers wrapping identical content to show how XDSTheme changes the …
ThumbnailA thumbnail with an image and label.
TimeInputA time input field.
Timestamp
Toast
ToggleButton
ToggleButtonGroupToggleButtonGroup manages a set of ToggleButtons with single-select or multi-sel…
Token
TokenizerA tokenizer with preset tags and search source.
Toolbar — Three SlotA toolbar with start, center, and end content using the three-column grid layout…
Tooltip
TopNav
TopNavHeadingDemonstrates XDSTopNavHeading with a logo and text, both as a plain display and …
TopNavItemDemonstrates XDSTopNavItem with selected, icon, disabled, and default states.
TopNavMegaMenuDemonstrates XDSTopNavMegaMenu with items and a featured card in the mega menu p…
TopNavMegaMenuFeaturedCardDemonstrates XDSTopNavMegaMenuFeaturedCard with a title, description, and CTA li…
TopNavMegaMenuItemDemonstrates XDSTopNavMegaMenuItem with icons, titles, and descriptions inside a…
TopNavMenuDemonstrates XDSTopNavMenu with a hover-triggered dropdown containing items with…
TreeList
TreeListBranchesTree with expandable branches at multiple nesting levels.
TreeListItemTree items with descriptions, icons, badges, selection, disabled state, and nest…
Typeahead
TypeaheadItemTypeahead with custom item rendering using XDSTypeaheadItem for avatars and desc…
VStackDemonstrates XDSVStack arranging items vertically with different gaps.