Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Expandable Reading List Records
Create expandable records in the reading list scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runInventory ledger comparison table
Complete a comparison table for an inventory ledger scenario: include realistic content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runArchitectural Journal sticky sidebar layout
Complete the sticky sidebar layout in an architecture journal scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runTea Brand Subscription Landing Page
Build a subscription conversion page for a tea brand context: it includes real content, actionable controls, clear state feedback, and layouts that adapt across sizes.
Open and runLibrary Operations Calendar Heatmap Panel
Complete a calendar heatmap dashboard in a library operations scenario: include real content, interactive controls, clear status feedback, and a responsive layout across sizes.
Open and runFlower Shop Order Progress Tracker
Complete order progress tracking in the flower shop scenario: it includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runMountain Field Poetry Collection Rhythm Marquee Text
Complete rhythm marquee text in a mountain poetry collection scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runFile upload elastic control feedback
Complete elastic control feedback in file upload scenarios: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runDeep Sea Confetti Burst Effect
Complete confetti burst effects in deep-sea scenarios: includes real content, actionable controls, clear state feedback, and cross-size layouts.
Open and runAir quality matrix heatmap
Complete a matrix heatmap in an air-quality scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.
Open and runDevice Lab Page Visibility Log
Complete a page visibility record in the device lab scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runFamily Night Expense Splitter
Complete the expense splitter in the family night scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runMeeting Room Plan Card Selection
Complete the option card selection for a meeting room scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runVolunteer Signup Conditional Survey
Complete a conditional survey in a volunteer signup scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runMuseum guide section-based navigation
Complete section-spy navigation in a museum guide scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and runDocument Review Context Actions
Complete a contextual actions form for a document review scenario: include real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runReading List Masonry Notes
Completed a waterfall notes layout for reading list scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runInventory ledger relationship matrix table
A relationship matrix table completed for an inventory ledger scenario: real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runArchitectural Journal Full-Width Interleaved Layout
Complete a full-bleed interleaving layout for an architecture journal scenario: includes real content, interactive controls, clear status feedback, and layouts across screen sizes.
Open and runTea brand event agenda page
Complete an event agenda page for a tea beverage brand scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runLibrary Operations Incident Response Board
Complete the incident response board in a library operations scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runFlower Shop Quote Builder
Complete a quote builder for the flower shop scenario: includes realistic content, actionable controls, clear state feedback, and responsive layouts.
Open and runOutlined Title Design for a Mountain Poetry Collection
Complete an outlined title design in a mountain-poem collection setting: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runFile Upload Notification Pop Feedback
Complete notification pop-up feedback for file upload scenarios: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and run