Craft what you imagine.
AI ChatAI assistant conversation view with tool calls, system messages, markdown, code …
PreviewUse
AI Chat (Artifact)AI chat interface with a resizable chat panel on the left and an artifact previe…
PreviewUse
AI Chat (Landing Page)AI assistant landing page with chat composer, greeting, and category toggles
PreviewUse
Coming Soon
Centered HeroCentered headline, description, and CTA buttons above a full-width image.
PreviewUse
Classic GalleryClean 2×2 image grid with uniform sizing
PreviewUse
Component ReferenceComponent documentation page with live preview, usage guide, best practices tabl…
PreviewUse
Contact FormMarketing lead-capture form with pill toggles, dropdowns, and full-width CTA.
PreviewUse
DashboardAnalytics dashboard with KPI cards, charts, and data tables
PreviewUse
Dashboard (Portfolio)Investment portfolio dashboard with KPI metrics, area chart, and top asset holdi…
PreviewUse
Detail PageOrder detail page with timeline and line items
PreviewUse
Documentation HomeDocumentation landing page with hero banner and component category grid organize…
PreviewUse
File ExplorerColumn-based file browser inspired by macOS Finder
PreviewUse
Form (Two-Column)Hero header with form card layout for data collection
PreviewUse
Coming Soon
Gallery HeroCentered headline, description, and CTA buttons above a three-image gallery grid…
PreviewUse
IDECode editor workspace with file explorer, tabbed editor, terminal panel, and pro…
PreviewUse
LibraryBrowsable grid of XDS components organized by category with tabs and filters
PreviewUse
LoginAuth form with email and password inputs
PreviewUse
Login (Card)Centered login card with social sign-in and email form
PreviewUse
Login (Split)Split-screen login with form and cover image
PreviewUse
Login (SSO)SSO login with email-based provider detection
PreviewUse
Mixed GalleryMasonry-style image gallery with varying image sizes
PreviewUse
Page EditorBlock-based page builder with sidebar config and live preview
PreviewUse
Payment FormSecure checkout page with billing info, card details, and order summary.
PreviewUse
Product DetailProduct page with image gallery and collapsible sections
PreviewUse
Product GalleryCard grid of products with images, titles, descriptions, and prices
PreviewUse
SettingsAccount settings page with profile, password, and advanced configuration section…
PreviewUse
Settings (Dialog)Account settings in a modal dialog with sidebar navigation and multi-section con…
PreviewUse
Settings (Sidebar)Account settings with sidebar navigation, inline editing, and multi-section priv…
PreviewUse
Setup GuideGetting started guide with install steps, AI assistance prompt card, theming set…
PreviewUse
Side GalleryText and CTA on the left with an image collage on the right
PreviewUse
Coming Soon
TableData table with actions
PreviewUse
Table (Grouped)Grouped data table with collapsible status sections, PowerSearch, and detail pan…
PreviewUse
Table PageData table page with power search filtering and action toolbar.
PreviewUse
AlertDialog — DeleteA delete button that asks the user to confirm before deleting.
Preview
AppShellA basic app shell with content padding.
Preview
AspectRatioThree aspect ratio containers: 1:1, 4:3, and 16:9.
Preview
AvatarAvatars at every size with an image, initials fallback, and a status dot. A quic…
Preview
AvatarStatusDotAvatarStatusDot renders a presence indicator on an Avatar, with variants for pos…
Preview
Badge — VariantsAll semantic and color badge variants in a single view. Use semantic variants fo…
Preview
Banner — StatusesAll four status banners stacked — info, success, warning, and error. A quick vis…
Preview
BreadcrumbItemBreadcrumbItem represents a single step in a breadcrumb trail, supporting links,…
Preview
BreadcrumbsA breadcrumb trail showing page hierarchy with linked ancestors and a current pa…
Preview
Button — VariantsAll four button variants side by side — primary, secondary, ghost, and destructi…
Preview
CalendarAn interactive single-date calendar with a selected date. Click any day to chang…
Preview
CardA card with a heading and body text showing the default container style.
Preview
CarouselA horizontal carousel of cards with scroll-snap and navigation buttons. Scroll o…
Preview
CenterContent centered horizontally and vertically inside a fixed-height container.
Preview
ChatComposer
Preview
ChatComposerDrawerComposer drawer with file tokens, a collapsible toggle, and header actions. Use …
Preview
ChatComposerInput
Preview
ChatDictationButtonInteractive dictation button connected to the SpeechRecognition API via useXDSCh…
Preview
ChatLayout
Preview
ChatLayoutScrollButtonScroll button in hidden, visible, and expanded (with label) states. The button f…
Preview
ChatMessageA user multi-bubble group with delivery status and an assistant ghost response w…
Preview
ChatMessageBubbleGrouped user bubbles with filled styling and a ghost-variant agent response, wit…
Preview
ChatMessageListBasic AI chat conversation with user and assistant messages. The simplest way to…
Preview
ChatMessageMetadataThree-message conversation showcasing error status with retry, delivery status, …
Preview
ChatSendButtonReady, custom icon, and streaming states of the send button.
Preview
ChatSystemMessageSystem messages for date dividers, status updates, and informational notices. Sh…
Preview
ChatTokenizedText
Preview
ChatToolCalls
Preview
CheckboxInputInteractive checkboxes showing checked, unchecked, and indeterminate states with…
Preview
CheckboxList
Preview
CheckboxListItemCheckbox list items with labels, descriptions, and different states including di…
Preview
ClickableCardA clickable card that navigates on click. Nested interactive elements work indep…
Preview
CodeInline code snippets inside a sentence showing how Code renders alongside body t…
Preview
CodeBlockA syntax-highlighted TypeScript code block with line numbers, a title bar, and a…
Preview
CollapsibleAn accordion group with three collapsible sections in single mode — opening one …
Preview
CollapsibleGroupCollapsibleGroup coordinates multiple Collapsible components so that expanding o…
Preview
CommandPaletteBasic command palette with static items and keyboard navigation.
Preview
CommandPaletteFooterCommand palette footer with custom tip content.
Preview
CommandPaletteGroupCommand palette groups in both data-driven (auxiliaryData.group) and composed (X…
Preview
CommandPaletteItemCommand palette items with custom content via renderItem and as composed XDSComm…
Preview
DateInputA date input field with a calendar popover. Type a date or click the calendar ic…
Preview
DialogModal dialog with a header, body content, and close button.
Preview
DialogHeaderDialogHeader provides a structured header for dialogs with slots for title, subt…
Preview
Divider — VariantsHorizontal dividers in subtle and strong variants, plus a labeled divider. A qui…
Preview
DropdownMenuA button that opens a dropdown menu with action items. The menu starts open for …
Preview
DropdownMenuItemDropdown menu with custom-rendered items using XDSDropdownMenuItem for icons and…
Preview
EmptyStateA no-results empty state with an icon, descriptive message, and a call-to-action…
Preview
FieldA form field wrapping a text input with a label, description, and validation sta…
Preview
FieldLabelStandalone field labels demonstrating required, optional, tooltip, and icon vari…
Preview
FieldStatusField status messages in error, warning, and success states with attached and de…
Preview
FormLayoutA vertical form layout with text input fields.
Preview
Grid
Preview
GridSpanGridSpan lets a grid item span multiple columns or rows within an XDSGrid, enabl…
Preview
Heading
Preview
HoverCardA hover card that shows a user profile preview when hovering over a trigger butt…
Preview
HStackDemonstrates XDSHStack arranging items horizontally with different gaps and alig…
Preview
Icon
Preview
IconButtonAn icon button with a wrench icon.
Preview
Kbd
Preview
Layout
Preview
LayoutContentLayoutContent is the scrollable main content area within a Layout, providing aut…
Preview
LayoutFooterLayoutFooter is a fixed footer slot within a Layout, pinned to the bottom for pe…
Preview
LayoutHeaderLayoutHeader is a fixed header slot within a Layout, pinned to the top for title…
Preview
LayoutPanelLayoutPanel is a sidebar slot within a Layout, used for navigation, detail views…
Preview
LinkA standalone link.
Preview
List
Preview
ListItemList items with icons, descriptions, and end content slots demonstrating the ful…
Preview
MarkdownRich markdown content with headings, lists, and formatting.
Preview
MediaTheme — Inverted SurfacesContent rendered over inverted surfaces — dark backgrounds (media, overlays, toa…
Preview
MetadataList
Preview
MetadataListItemMetadata list items displaying labeled values in various formats including text,…
Preview
MobileNav
Preview
MobileNavToggleDemonstrates XDSMobileNavToggle as a standalone hamburger button for opening the…
Preview
MoreMenuA basic three-dot menu with simple action items.
Preview
MultiSelector
Preview
NavIconCircular icon containers for navigation headers with accent backgrounds.
Preview
NumberInputA number input for quantity entry.
Preview
OverflowListA list of buttons that collapses overflowing items into a +N indicator.
Preview
Pagination — VariantsAll four display variants stacked — dots, compact, count, and pages. A quick vis…
Preview
Popover
Preview
PowerSearchToken-based filter bar with enum and text fields, pre-populated with sample filt…
Preview
ProgressBarA progress bar filled to 60%.
Preview
RadioList
Preview
RadioListItemRadio list items with labels, descriptions, and different states including disab…
Preview
ResizableHorizontal resizable split with a draggable handle between two panels.
Preview
Section — VariantsAll three background variants stacked — section (default surface), muted, and tr…
Preview
SegmentedControl
Preview
SegmentedControlItemSegmented control items with text labels and icons, including a disabled item.
Preview
SelectableCardA plan picker with single-select radio behavior. Cards show an accent border whe…
Preview
Selector
Preview
SelectorOptionSelector with custom-rendered options using XDSSelectorOption for icons and desc…
Preview
SideNav
Preview
SideNavCollapseButtonDemonstrates XDSSideNavCollapseButton inside a collapsible SideNav.
Preview
SideNavHeadingDemonstrates XDSSideNavHeading with an app name, logo icon, superheading, and su…
Preview
SideNavItemDemonstrates XDSSideNavItem with selected, icon, disabled, and nested states.
Preview
SideNavSectionDemonstrates XDSSideNavSection with titled groups of navigation items.
Preview
SkeletonA skeleton loading placeholder.
Preview
SliderA slider control set to 50%.
Preview
SpinnerA large spinner indicator.
Preview
Stack — DirectionsBadges arranged horizontally and vertically in side-by-side cards.
Preview
StackItemStackItem can be used within XDSHStack or XDSVStack for more granular control ov…
Preview
StatusDotA positive status dot indicator.
Preview
SwitchA toggle switch for enabling notifications.
Preview
SyntaxTheme — PresetsThe same code block rendered with three different syntax themes — GitHub Light, …
Preview
TabTab is an individual tab item within a TabList, supporting labels, icons, select…
Preview
TableData-driven table with proportional and pixel column widths and hover highlighti…
Preview
TabList
Preview
TabMenuTabMenu is an overflow menu within a TabList that groups additional tab options …
Preview
Text
Preview
TextAreaA text area with placeholder text.
Preview
TextInput
Preview
Theme — Side by SideTwo theme providers wrapping identical content to show how XDSTheme changes the …
Preview
ThumbnailA thumbnail with an image and label.
Preview
TimeInputA time input field.
Preview
Timestamp
Preview
Toast
Preview
ToggleButton
Preview
ToggleButtonGroupToggleButtonGroup manages a set of ToggleButtons with single-select or multi-sel…
Preview
Token
Preview
TokenizerA tokenizer with preset tags and search source.
Preview
Toolbar — Three SlotA toolbar with start, center, and end content using the three-column grid layout…
Preview
Tooltip
Preview
TopNav
Preview
TopNavHeadingDemonstrates XDSTopNavHeading with a logo and text, both as a plain display and …
Preview
TopNavItemDemonstrates XDSTopNavItem with selected, icon, disabled, and default states.
Preview
TopNavMegaMenuDemonstrates XDSTopNavMegaMenu with items and a featured card in the mega menu p…
Preview
TopNavMegaMenuFeaturedCardDemonstrates XDSTopNavMegaMenuFeaturedCard with a title, description, and CTA li…
Preview
TopNavMegaMenuItemDemonstrates XDSTopNavMegaMenuItem with icons, titles, and descriptions inside a…
Preview
TopNavMenuDemonstrates XDSTopNavMenu with a hover-triggered dropdown containing items with…
Preview
TreeList
Preview
TreeListBranchesTree with expandable branches at multiple nesting levels.
Preview
TreeListItemTree items with descriptions, icons, badges, selection, disabled state, and nest…
Preview
Typeahead
Preview
TypeaheadItemTypeahead with custom item rendering using XDSTypeaheadItem for avatars and desc…
Preview
VStackDemonstrates XDSVStack arranging items vertically with different gaps.
Preview