Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Design Task Activity Timeline
Complete an activity timeline for a design task scenario: includes realistic content, actionable controls, clear state feedback, and cross-size layouts.
Open and runCourse Scores Paginated Data Table
Build a paginated data table for course grade scenarios: includes real content, interactive controls, clear status feedback, and layouts across sizes.
Open and runClassic Three-Column Community Portal Layout
Complete a classic three-column layout for a community portal scenario: including real content, actionable controls, clear state feedback, and layouts across sizes.
Open and runCreative Festival FAQ Conversion Section
Complete the FAQ conversion area for the creative festival scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts.
Open and runClinic scheduling live activity feed
Complete the real-time activity feed for the clinic scheduling scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runBike Rental Promotion Builder
Complete the promotion builder in a bike-rental scenario: includes realistic content, actionable controls, clear status feedback, and responsive cross-size layouts.
Open and runCity Magazine Fluid Headline Typography
Complete fluid headline typography in a city magazine scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runFocus Tool Ring Progress Feedback
Complete the circular progress feedback in a focus tool scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runNight Garden Gradient Mesh Experiment
Complete the gradient mesh experiment in a night garden scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runLearning Progress Donut Chart
Complete the donut chart in the learning progress scene: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and runPresentation space local storage note
Complete Local Storage Notes for the presentation space scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runMemory Match Study Break Game
Complete a card-flip memory game in a break-between-classes scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.
Open and runRating scale for reading mode
Complete the rating scale in the reading mode scenario: includes real content, operable controls, clear status feedback, and responsive layouts.
Open and runCourse Registration Password Strength Feedback
Deliver password strength feedback in a course enrollment scenario: include realistic content, actionable controls, clear status feedback, and responsive layouts.
Open and runKnowledge Base Command Palette
Complete a command palette in a knowledge base scenario: includes real content, interactive controls, clear state feedback, and a cross-size layout.
Open and runTask Center Help Popover
Build a help popover for a task center scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runDesign Task Collapsible Content List
Complete the accordion content list in a design tasks scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runCourse score column visibility control
In a course scores scenario, complete column visibility control: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runCommunity Portal Dashboard Shell
Complete the dashboard shell in a community portal scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runCreative festival testimonial wall
Complete the word-of-mouth story wall for a creative festival scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runOutpatient Scheduling Operations Command Center
Complete an operations command center for an outpatient scheduling scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runBike Rental Service Booking Flow
Complete the service reservation flow in the bike rental scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runCity Magazine Drop Cap Layout
Create a drop cap layout for a city magazine scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runFocus Tool Skeleton Screen Transition
Complete the skeleton screen transition in a focus tool scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and run