Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Responsive Masonry Layout Research Notes
Complete a responsive masonry layout for a research notes scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runOrder Status Flip Transition
Complete the page-flip state transition in an order status scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runEvent Booking Time Slot Booking Form
A completed time-slot booking form for an event reservation scenario: includes realistic content, interactive controls, clear state feedback, and cross-size layout.
Open and runTeam Directory Expandable Records
Complete the expandable records for a team directory scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runSticky Sidebar Layout for Research Notes
Complete a sticky sidebar layout in a research-notes scenario: include real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runOrder status spring control feedback
Create elastic control feedback in an order-status scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runEvent booking conditional survey
Complete a conditional questionnaire in an event booking scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runTeam Directory Masonry Notes
Complete a masonry notes layout in a team directory scenario: include real content, actionable controls, clear status feedback, and responsive behavior across sizes.
Open and runResearch Notes Full-Width Overlapping Layout
Complete a full-bleed layout in a research notes scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and runOrder Status Notification Pop-up Feedback
Complete notification pop-up feedback for an order status scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runResearch Notes Adaptive Gallery
Complete the adaptive gallery in the research notes scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.
Open and runOrder Status Content Reveal Animation
Complete the content reveal animation in an order-status scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runResearch Notes Master-Detail Content Layout
Complete the master-detail content layout for a research notes scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runOrder Status Orbital Status Animation
Complete an orbital status animation for the order-status scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runBento Grid Layout for Product Documentation
Complete a bento grid layout for the product documentation scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runSplit-screen narrative layout for product documentation
Complete a split-screen narrative layout in the product documentation scene: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runSmart Home Quick Date Picker
Complete fast date selection in a smart home scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.
Open and runBike Shed Color Swatch Selector
Complete color swatch selection in a bike shed scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runClinic check-in auto-draft form
Complete an auto-draft form for a clinic check-in scenario: include realistic content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runSupport Center Bottom Quick Navigation
Complete bottom quick navigation in a support center scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runAccount Security Bottom Action Sheet
Complete a bottom action sheet for the account security scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runArchive Shelf Bookmark Organizer
Complete the bookmark organizer in an archive-shelf scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runCourse Attendance Bulk Selection Table
Complete a bulk selection table in a class attendance scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runArchive reader adaptive gallery
Complete an adaptive gallery for an archive reader scenario, including real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and run