XDS Sandbox

Components & Patterns

Card Examples

XDS components showcased in realistic card compositions

Table Overview

Data table patterns and configurations

Side Navigation

Side navigation layout patterns

Top Navigation

Top navigation bar with menu integration

Mega Menu

Full-width dropdown navigation menu

Link Patterns

Flexible link component with router integration

Motion Examples

Duration and easing tokens applied to common animation patterns

App Shell

Experiment with app shell layouts and navigation

Component Overview

General component composition examples

Templates

AI Chat Conversation

AI assistant conversation view with tool calls, system messages, markdown, code blocks, multi-bubble grouping, and a resizable artifact preview panel for generated documents

AI Chat Landing

AI assistant landing page with chat composer, greeting, and category toggles

Analytics Dashboard

Analytics dashboard with KPI cards, charts, and data tables

Basic Login

Auth form with email and password inputs

Blank

Minimal page scaffold

Card Grid

Browsable grid of components organized by category with tabs and filters

Centered Hero

Centered headline, description, and CTA buttons above a wide hero image.

Checkout Form

Secure checkout page with billing info, card details, and order summary.

Classic Gallery

Responsive image gallery with a centered intro header and category filter tabs.

Contact Form

Marketing lead-capture form with pill toggles, dropdowns, and full-width CTA.

Documentation Catalog

Documentation landing page with hero banner and component category grid organized by Core, Layout, Navigation, and Form.

Documentation Design

Component documentation page with live preview, usage guide, best practices table, and code examples.

Documentation Technical

Getting started guide with install steps, AI assistance prompt card, theming setup, and next steps.

File Explorer

Column-based file browser inspired by macOS Finder

Gallery Hero

Centered headline, description, and CTA buttons above a three-image gallery grid.

Grouped Table

Grouped data table with collapsible status sections, PowerSearch, and a resizable detail panel.

IDE

Code editor workspace with file explorer, tabbed editor, terminal panel, and properties sidebar, all resizable and collapsible.

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

Matcha Sales Table

Matcha store sales data table with a revenue area chart and product thumbnails.

Mixed Gallery

Masonry-style image gallery with varying image sizes.

Order Detail

Order detail page with timeline and line items

Outage Heatmap Table

Product status page with an outage heatmap and incident log table.

Page Editor

Block-based page builder with sidebar config and live preview

Portfolio Dashboard

Investment portfolio dashboard with KPI metrics, area chart, and top asset holdings

Product Detail

Product page with image gallery and collapsible sections

Product Gallery

Card grid of products with images, titles, descriptions, and prices

Searchable Table

Data table page with power search filtering and action toolbar.

Settings Dialog

Account settings in a modal dialog with sidebar navigation and multi-section content

Settings Form

Account settings as a single scrolling form with profile, password, and advanced configuration sections

Settings Panels

Account settings with nav-switched panels, inline row editing, and multi-section privacy controls

Shoe Sales Table

Shoe store sales data table with a revenue area chart and product thumbnails.

Side Gallery

Text and CTA on the left with an image collage on the right

Simple Table

Data table with actions

Theme Showcase

Real-world product surfaces (store, checkout, chat, inventory) used to preview a theme in the playground

Two-column Form

Hero header with form card layout for data collection

Themes

Neutral Palette

Neutral theme — pure grayscale spine, OKLCH categorical palette, vivid T60 semantic badges, soft T90 categorical pastels, Figtree typography

Daily Palette

Daily theme — warm earthy cream tones, PT Serif headings, Figtree body, pill-shaped buttons

Stone Palette

Stone theme tonal palettes, badges, banners, inputs, and buttons in light and dark mode

Y2K Palette

Y2K pop theme — sharp corners, cream body, neon lime accent, Crimson Text display type

Gothic Palette

Gothic dark-only theme — atmospheric blue-gray, distressed display heading, pastel categorical accents

Butter Palette

Butter theme — golden buttery palette with blue accents, Sarina display, Outfit body & headings

Color Studio

Generate and explore color palettes from an accent color or image

Tools

CodeBlock Perf

Compare highlight modes and scroll performance

Foundations

Token reference docs with live theme previews — color, spacing, typography, and more

Media Mode

Compare luminance algorithms (BT.709 / WCAG 2 / APCA) for dark/light surface detection

Dictation Lab

Test voice dictation, tune sound effects, and explore animation