Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Reading List Contact Index
Complete a contact index in a reading-list scenario: real content, actionable controls, clear state feedback, and layouts across sizes.
Open and runInventory Ledger Bulk Selection Table
Complete a bulk-selection table for an inventory ledger scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runArchitectural Journal Master-Detail Content Layout
Complete a master-detail content layout in the context of an architecture journal: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and runTea brand product comparison page
Complete a product comparison page for a tea brand scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runLibrary Operations Pipeline Board
Complete a pipeline board in a library operations scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.
Open and runFlower Shop Return/Exchange Request Flow
Complete a return or exchange request flow in a flower shop scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runReading line-length adjustment for a mountain-and-field poetry collection
Complete reading line-length adjustment in the mountain poetry collection scenario: includes real content, interactive controls, clear state feedback, and cross-size layout.
Open and runFile Upload Orbit Status Animation
Complete the orbital status animation in a file upload scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runDeep-sea cursor trail effect
Create a pointer trail effect in a deep-sea scene: includes real content, actionable controls, clear state feedback, and layouts across sizes.
Open and runAir Quality Waveform Plotter
Complete a waveform visualizer in an air-quality scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runDevice Lab Language and Time Zone Panel
Complete the language and time zone panel for the device lab scenario: include real content, actionable controls, clear status feedback, and a responsive layout.
Open and runFamily Night Random Picker
Complete a random picker for a family night scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runReading Mode Segmented Picker
Complete a segmented control for the reading mode scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.
Open and runInstant Validation Form for Course Registration
Complete a live-validation form for a course enrollment scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runResponsive Main Menu for Knowledge Base
Complete a responsive top menu in a knowledge base scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runTask Center Confirmation Dialog
Complete the confirmation dialog in a task-center scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runFilterable Card Wall for Design Tasks
Complete the filterable card wall in the design-tasks scenario: includes real content, interactive controls, clear status feedback, and layouts for multiple sizes.
Open and runMulti-column sortable course scores table
Complete the multi-column sortable table in a course grades scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runCommunity Portal Bento Grid Layout
Complete the Bento-style grid layout in a community portal scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runCreative Festival Narrative Hero
Complete a narrative hero section for a creative festival scenario: include real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runClinic scheduling KPI overview
Complete a key metrics overview for outpatient scheduling scenarios: includes real content, actionable controls, clear state feedback, and layouts that adapt across sizes.
Open and runBike Rental Cart Calculator
Complete a shopping cart calculator in a bike rental scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runResponsive type scale for city magazines
Create a responsive type scale in a city magazine setting, including real content, actionable controls, clear state feedback, and layouts across sizes.
Open and runMulti-stage Loader for Focus Tool
Complete a multi-stage loader in the focus tool scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and run