Running right now
Real components on this page. Switch the theme above and watch them follow.
Components
Theme Playground
Pick a source colour and watch every tonal palette and component re-theme live. Copy the tokens out.
Design Tokens
Core design values including colors, typography, spacing, and shape tokens.
State Layers
Material Design 3 interaction states with hover, focus, and press effects.
Motion & Animation
Duration tokens, easing curves, and animation utilities for smooth transitions.
Elevation
Programmatic elevation control for Material Design 3 shadow levels.
Top App Bar
App-level title, navigation, and actions with scroll collapse.
Bottom App Bar
Primary actions at the bottom with standard or FAB cutout variant.
Navigation Bar
Bottom navigation for 3-5 top-level destinations.
Navigation Rail
Vertical navigation for 3-7 destinations with optional header and FAB.
Navigation Drawer
Modal and standard navigation drawer with persistent state and keyboard support.
Advanced Menus
Mega and cascading menu patterns built on top of ds-menu.
Tabs
Organize content into separate views with primary and secondary tab styles.
Divider
Thin line for separating content in lists and layouts with full-width, inset, and middle variants.
Button
Filled, outlined, elevated, tonal, and text button variants with Material Design 3 styling.
Button Group
Group related actions horizontally or vertically with ds-button-group.
Split Button
Primary action with dropdown menu for related options.
Text Field
Single-line input with filled and outlined variants, validation, and character counter.
Textarea
Multi-line text input with auto-resize and character counter.
Checkbox
Binary selection control with checked, unchecked, and indeterminate states.
Radio
Single selection from multiple options with keyboard navigation and radio group management.
Switch
Toggle for binary on/off states with smooth animations and optional icons.
Slider
Continuous, discrete, and range sliders for value selection.
Chip
Compact elements for input, filtering, tags, and suggestions.
Combobox
Dropdown selection with built-in search and filtering support.
Date Picker
Calendar-based date selection with input field.
Time Picker
Clock interface for time selection with 12/24 hour format.
Form
Form wrapper with validation, state management, and error handling.
FAB
Floating Action Button for primary screen actions.
List
Continuous vertical index of items with one-line, two-line, or three-line variants and selection support.
Data Table
Sortable, filterable, paginated table with row selection.
Virtual Scroll
High-performance list rendering for 1,000+ items with virtual scrolling.
Card
Surface for displaying content and actions on a single topic.
Carousel
Horizontally scrolling content with navigation and indicators.
Dialog
Modal dialogs for confirmations, alerts, and forms.
Menu
Dropdown and context menus for actions and options.
Bottom Sheet
Content and actions panel that slides in from the bottom.
Side Sheet
Navigation and content panel that slides in from left or right.
Badge
Small status or count indicators for overlays and lists.
Tooltip
Brief floating labels that provide descriptions on hover or focus.
Snackbar
Brief messages for feedback and notifications at the bottom of the screen.
Banner
Prominent, persistent messaging with optional actions and variants.
Progress Indicators
Linear and circular progress indicators for loading states.
Icon
Material Symbols with customizable size, weight, and fill variants.
Responsive Image
Web component for responsive images with lazy loading, art direction, and aspect ratio preservation to prevent layout shift.
Search
Search input with autocomplete suggestions, filtering, and keyboard navigation.
Search View
Full-screen search experience with filtering, suggestions, and recent searches.
Text Wrapper
Typography utility for consistent MD3 typescale styling.
Scrollbar
Custom-styled scrollbars with MD3 design tokens.
Focus Ring Utility
Reusable focus-visible styling for keyboard users with token overrides.
Drag & Drop Utility
Comprehensive drag-and-drop with mouse, touch, and keyboard support for sortable lists and drop zones.
Animation Presets Library
31 CSS animation presets using MD3 motion tokens with promise-based API and sequence support.
Composed Example: Account Settings
Not a component reference page — a realistic settings screen built entirely from the library, proving navigation, forms, dialogs, and theming all compose correctly together.
Project README
What this is, how to run it, and where everything lives.
Build Conventions
Component patterns, demo page requirements, and testing standards.
Roadmap
Direction, phase themes, current status, and explicit non-goals.
Tokens Reference
Source-of-truth for color, type, spacing, and shape tokens.
State Layers Guide
Usage and ramp values for hover, focus, pressed, and disabled states.
Motion Principles
Durations, easings, and choreography examples for MD3 motion.
Why Vanilla Web Components
What building on browser primitives instead of a framework actually costs, and what it buys back.
Shadow DOM & Theming
Encapsulation and site-wide theming look like opposites. How one CSS mechanism resolves the tension.
The Form-Association Pattern
Getting a Shadow DOM component into native FormData — and the bugs that applying it everywhere turned up.
What Accessibility Actually Cost
Building the axe harness this week found real bugs that 2,000+ passing unit tests never caught. Here's what and why.