Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Exhibit Usage Table Composite Filter Table
Build a composite filter table for an exhibit usage table scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runClass Briefing Magazine Editorial Grid
Complete a magazine editorial grid in a classroom briefing scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runPet Week FAQ Conversion Hub
Complete an FAQ conversion section for a pet week scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runCommunity Service Calendar Heatmap Panel
Complete the calendar heatmap panel in a community service scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runLoft Task Shelf Rating Scale
Complete a rating scale flow for the loft task shelf scenario: includes realistic content, actionable controls, clear state feedback, and layouts that adapt across sizes.
Open and runRoster scheduling budget setup sheet
Complete the budget configuration sheet for a residential schedule scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runCity Services Command Palette
Complete a command palette in a city services scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runGreenhouse inspection status banner
Complete a status banner for a greenhouse inspection scenario: include realistic content, actionable controls, clear status feedback, and cross-size layouts.
Open and runCourse Clips Accordion Content List
Complete the collapsible content list in the course clips scenario: with real content, interactive controls, clear status feedback, and cross-size layouts.
Open and runFestival Budget Inline-Edit Table
Build an inline-edit table for festival budget scenarios: includes realistic content, actionable controls, clear state feedback, and responsive layouts.
Open and runClass Handbook Full-Bleed Layout
A full-bleed interleaved layout completed for the classroom handbook scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runpodcast briefing feature tour page
Complete a feature tour page in a podcast briefing scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout.
Open and runDelivery Network Cohort Retention Panel
Complete a grouped retention panel for a delivery network scenario: includes realistic content, actionable controls, clear status feedback, and cross-size layout.
Open and runCare visit pass subscription plan selection
Complete subscription plan selection in a care visit pass scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runCare Notes Poetry Grid Layout
Complete poetry grid typography in the care notes scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runOutpatient Reminder Multi-Stage Loader
Complete a multi-stage loader for an outpatient reminder scenario: include real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runCoral Dock Gradient Mesh Experiment
Complete a gradient mesh experiment in a coral dock scene: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runPublic Briefing Waveform Builder
Create a waveform visualizer for a public briefing scenario: include real content, interactive controls, clear status feedback, and a responsive layout.
Open and runPublic screen system color scheme detection
Complete system color-scheme detection in a public display scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across screen sizes.
Open and runPublic Quiz Pomodoro Timer
Complete a Pomodoro timer for a civic quiz scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runCreative Lab Segmented Selector
Complete the segmented control in the Creative Lab scenario: include real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runResidential Support Request Conditional Survey
Complete the conditional survey in the home support note scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runCourse Portal Mega Menu Group
Create a grouped mega menu for the course portal scenario: including real content, interactive controls, clear state feedback, and responsive layouts.
Open and runGrant Review Confirmation Dialog
Complete the confirmation dialog in a grant review scenario: includes realistic content, actionable controls, clear status feedback, and layouts that adapt across sizes.
Open and run