Craft

Browse templates, component showcases, and examples. Copy the source code to get started.

Page Templates (33)

AI ChatAI assistant conversation view with tool calls, system messages, markdown, code blocks, and multi-bubble grouping
AI Chat (Landing Page)AI assistant landing page with chat composer, greeting, and category toggles
Blank PageMinimal page scaffold
Centered HeroCentered headline, description, and CTA buttons above a full-width image.Coming Soon
Classic GalleryClean 2×2 image grid with uniform sizing
Component ReferenceComponent documentation page with live preview, usage guide, best practices table, and code examples.
Contact FormMarketing lead-capture form with pill toggles, dropdowns, and full-width CTA.
DashboardAnalytics dashboard with KPI cards, charts, and data tables
Dashboard (Portfolio)Investment portfolio dashboard with KPI metrics, area chart, and top asset holdings
Detail PageOrder detail page with timeline and line items
Documentation HomeDocumentation landing page with hero banner and component category grid organized by Core, Layout, Navigation, and Form.
File ExplorerColumn-based file browser inspired by macOS Finder
Form (Two-Column)Hero header with form card layout for data collection
Gallery HeroCentered headline, description, and CTA buttons above a three-image gallery grid.Coming Soon
IDECode editor workspace with file explorer, tabbed editor, terminal panel, and properties sidebar — all resizable and collapsible.
LibraryBrowsable grid of XDS components organized by category with tabs and filters
LoginAuth form with email and password inputs
Login (Card)Centered login card with social sign-in and email form
Login (Split)Split-screen login with form and cover image
Login (SSO)SSO login with email-based provider detection
Mixed GalleryMasonry-style image gallery with varying image sizes
Page EditorBlock-based page builder with sidebar config and live preview
Payment FormSecure checkout page with billing info, card details, and order summary.
Product DetailProduct page with image gallery and collapsible sections
Product GalleryCard grid of products with images, titles, descriptions, and prices
SettingsAccount settings page with profile, password, and advanced configuration sections
Settings (Dialog)Account settings in a modal dialog with sidebar navigation and multi-section content
Settings (Sidebar)Account settings with sidebar navigation, inline editing, and multi-section privacy controls
Setup GuideGetting started guide with install steps, AI assistance prompt card, theming setup, and next steps.
Side GalleryText and CTA on the left with an image collage on the right
TableData table with actionsComing Soon
Table (Grouped)Grouped data table with collapsible status sections, PowerSearch, and detail panelComing Soon
Table PageData table page with power search filtering and action toolbar.Coming Soon

Component Showcases (132)

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 quick visual reference for choosing the right size.
AvatarStatusDotAvatarStatusDot renders a presence indicator on an Avatar, with variants for positive, neutral, and negative states. The dot size automatically coordinates with the Avatar size.
Badge — VariantsAll semantic and color badge variants in a single view. Use semantic variants for status and color variants for categories.
Banner — StatusesAll four status banners stacked — info, success, warning, and error. A quick visual reference for choosing the right status.
BreadcrumbItemBreadcrumbItem represents a single step in a breadcrumb trail, supporting links, icons, current-page markers, and custom link components.
BreadcrumbsA breadcrumb trail showing page hierarchy with linked ancestors and a current page.
Button — VariantsAll four button variants side by side — primary, secondary, ghost, and destructive. A quick visual reference for choosing the right variant.
CalendarAn interactive single-date calendar with a selected date. Click any day to change the selection.
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 or click the arrows to browse.
CenterContent centered horizontally and vertically inside a fixed-height container.
ChatComposer
ChatComposerDrawerComposer drawer with file tokens, a collapsible toggle, and header actions. Use as a starting point for any chat composer with attachments.
ChatComposerInput
ChatDictationButtonInteractive dictation button connected to the SpeechRecognition API via useXDSChatDictation. Click the mic to dictate into the composer.
ChatLayout
ChatLayoutScrollButtonScroll button in hidden, visible, and expanded (with label) states. The button fades in when the user scrolls up and expands when new messages arrive.
ChatMessageA user multi-bubble group with delivery status and an assistant ghost response with avatar, name, timestamp, and model info.
ChatMessageBubbleGrouped user bubbles with filled styling and a ghost-variant agent response, with timestamps and delivery status.
ChatMessageListBasic AI chat conversation with user and assistant messages. The simplest way to render a message list with alternating sender bubbles, metadata, and a date divider.
ChatMessageMetadataThree-message conversation showcasing error status with retry, delivery status, and full footer actions with model label.
ChatSendButtonReady, custom icon, and streaming states of the send button.
ChatSystemMessageSystem messages for date dividers, status updates, and informational notices. Shows both default and divider variants in a realistic conversation flow.
ChatTokenizedText
ChatToolCalls
CheckboxInputInteractive checkboxes showing checked, unchecked, and indeterminate states with descriptions.
CheckboxList
CheckboxListItemCheckbox list items with labels, descriptions, and different states including disabled.
ClickableCardA clickable card that navigates on click. Nested interactive elements work independently.
CodeInline code snippets inside a sentence showing how Code renders alongside body text.
CodeBlockA syntax-highlighted TypeScript code block with line numbers, a title bar, and a copy button.
CollapsibleAn accordion group with three collapsible sections in single mode — opening one closes the others.
CollapsibleGroupCollapsibleGroup coordinates multiple Collapsible components so that expanding one can automatically collapse the others, creating accordion behavior.
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 (XDSCommandPaletteGroup + XDSCommandPaletteItem) forms.
CommandPaletteItemCommand palette items with custom content via renderItem and as composed XDSCommandPaletteItem with icons, highlighted, selected, and disabled states.
DateInputA date input field with a calendar popover. Type a date or click the calendar icon to pick one.
DialogModal dialog with a header, body content, and close button.
DialogHeaderDialogHeader provides a structured header for dialogs with slots for title, subtitle, close button, and optional start or end content.
Divider — VariantsHorizontal dividers in subtle and strong variants, plus a labeled divider. A quick visual reference for separator styles.
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 descriptions.
EmptyStateA no-results empty state with an icon, descriptive message, and a call-to-action button.
FieldA form field wrapping a text input with a label, description, and validation status.
FieldLabelStandalone field labels demonstrating required, optional, tooltip, and icon variations.
FieldStatusField status messages in error, warning, and success states with attached and detached variants.
FormLayoutA vertical form layout with text input fields.
Grid
GridSpanGridSpan lets a grid item span multiple columns or rows within an XDSGrid, enabling masonry-style and asymmetric layouts.
Heading
HoverCardA hover card that shows a user profile preview when hovering over a trigger button. Starts open for preview.
HStackDemonstrates XDSHStack arranging items horizontally with different gaps and alignments.
Icon
IconButtonAn icon button with a wrench icon.
Kbd
Layout
LayoutContentLayoutContent is the scrollable main content area within a Layout, providing automatic padding and scroll containment between the header and footer.
LayoutFooterLayoutFooter is a fixed footer slot within a Layout, pinned to the bottom for persistent actions like form buttons or navigation.
LayoutHeaderLayoutHeader is a fixed header slot within a Layout, pinned to the top for titles, navigation, and action buttons.
LayoutPanelLayoutPanel is a sidebar slot within a Layout, used for navigation, detail views, or secondary content alongside the main content area.
LinkA standalone link.
List
ListItemList items with icons, descriptions, and end content slots demonstrating the full ListItem API.
MarkdownRich markdown content with headings, lists, and formatting.
MetadataList
MetadataListItemMetadata list items displaying labeled values in various formats including text, badges, and links.
MobileNav
MobileNavToggleDemonstrates XDSMobileNavToggle as a standalone hamburger button for opening the mobile navigation drawer.
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 visual reference for choosing the right variant.
Popover
PowerSearchToken-based filter bar with enum and text fields, pre-populated with sample filters.
ProgressBarA progress bar filled to 60%.
RadioList
RadioListItemRadio list items with labels, descriptions, and different states including disabled.
ResizableHorizontal resizable split with a draggable handle between two panels.
Section — VariantsAll three background variants stacked — section (default surface), wash (muted), and transparent. A quick visual reference for choosing the right variant.
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 when selected.
Selector
SelectorOptionSelector with custom-rendered options using XDSSelectorOption for icons and descriptions.
SideNav
SideNavCollapseButtonDemonstrates XDSSideNavCollapseButton inside a collapsible SideNav.
SideNavHeadingDemonstrates XDSSideNavHeading with an app name, logo icon, superheading, and subheading.
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 over individual item sizing and alignment, but is optional — stack children work without it.
StatusDotA positive status dot indicator.
SwitchA toggle switch for enabling notifications.
TabTab is an individual tab item within a TabList, supporting labels, icons, selected icons, and end content slots.
TableData-driven table with proportional and pixel column widths and hover highlighting.
TabList
TabMenuTabMenu is an overflow menu within a TabList that groups additional tab options into a dropdown, showing the selected option\
Text
TextAreaA text area with placeholder text.
TextInput
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-select behavior for options like view modes or filters.
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. Use when you need a centered title or heading with navigation and actions on either side.
Tooltip
TopNav
TopNavHeadingDemonstrates XDSTopNavHeading with a logo and text, both as a plain display and as a clickable link.
TopNavItemDemonstrates XDSTopNavItem with selected, icon, disabled, and default states.
TopNavMegaMenuDemonstrates XDSTopNavMegaMenu with items and a featured card in the mega menu panel.
TopNavMegaMenuFeaturedCardDemonstrates XDSTopNavMegaMenuFeaturedCard with a title, description, and CTA link inside a mega menu.
TopNavMegaMenuItemDemonstrates XDSTopNavMegaMenuItem with icons, titles, and descriptions inside a mega menu.
TopNavMenuDemonstrates XDSTopNavMenu with a hover-triggered dropdown containing items with icons and descriptions.
TreeList
TreeListBranchesTree with expandable branches at multiple nesting levels.
TreeListItemTree items with descriptions, icons, badges, selection, disabled state, and nested expand/collapse. TreeList is data-driven — no composed children API.
Typeahead
TypeaheadItemTypeahead with custom item rendering using XDSTypeaheadItem for avatars and descriptions.
VStackDemonstrates XDSVStack arranging items vertically with different gaps.