TemplatesReady-to-use page templates to kickstart your project.
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
Table Page (Chart Shoe Store)Shoe store sales data table with a revenue area chart and product thumbnails.
PreviewUse
Table Page (Heatmap Status)Product status page with an outage heatmap and incident log table.
PreviewUse
Table Page (Matcha Store)Matcha store sales data table with a revenue area chart and product thumbnails.
PreviewUse