Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Deep-Sea Organic Fluid Shapes
Complete organic fluid shapes in a deep-sea setting: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runAir quality trend line chart
Complete the trend line chart for the air quality scenario: include real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runDevice Lab media query observer
Complete the media query inspector in a Device Lab scenario: includes real content, actionable controls, clear state feedback, and layouts across sizes.
Open and runFamily Night Quick Quiz
Complete a quick knowledge quiz in a family-night scenario: include real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runMeeting room range adjuster
Complete a range adjuster in a meeting-room scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runVolunteer Signup Local Suggestions Input
Complete local suggestion input for a volunteer signup scenario: includes real content, actionable controls, clear state feedback, and layouts across sizes.
Open and runMuseum Guide Workspace Tabs
Complete workspace tabs in a museum guide scenario: includes realistic content, actionable controls, clear status feedback, and cross-size layouts.
Open and runDocument review message stack
In a document review scenario, complete a message toast stack: includes real content, actionable controls, clear status feedback, and multi-size layouts.
Open and runReading List Activity Timeline
Complete an activity timeline for a reading-list scenario: real content, actionable controls, clear status feedback, and layouts that work across sizes.
Open and runInventory Ledger Paged Data Table
Complete a paginated data table for an inventory ledger scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runClassic three-column architectural layout
Complete the classic three-column layout in an architecture journal scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runTea Brand FAQ Conversion Area
Complete the Q&A conversion section in a tea brand scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runLibrary Operations Live Activity Feed
Complete a real-time activity feed in a library operations setting: with real content, interactive controls, clear status feedback, and a responsive layout.
Open and runFlower Shop Promotion Builder
Complete the promotion builder in a flower shop scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runFluid Typography for Mountain Poems
Build fluid headline typography for a mountain poetry collection scenario: with realistic content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runCircular File Upload Progress Feedback
Complete ring progress feedback in a file upload scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runDeep-sea gradient mesh experiment
Complete a gradient mesh experiment in a deep-sea scene: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runAir Quality Donut Chart
Complete a donut chart for an air-quality scenario: include real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runDevice Lab Local Storage Notes
Complete a local storage note for a device lab scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runFamily Night Memory Matching Game
Complete a flip-card memory game in a family-night scenario: includes real content, interactive controls, clear state feedback, and a responsive layout across sizes.
Open and runMeeting Room Rating Scale
Complete a rating scale for a meeting room scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and runVolunteer Signup Password Strength Feedback
Complete password strength feedback in a volunteer signup scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runMuseum Guide Command Palette
Complete the command palette for a museum tour scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runDocument Review Help Popover
Complete a help popover for a document review scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and run