Examples Library
Choose a complete case study to view the result, modify the source, and run it in the browser.
Filterable card wall for reading list
Complete a filterable card wall for the reading list scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runInventory Ledger Multi-Column Sort Table
Complete a multi-column sortable table in an inventory ledger scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.
Open and runArchitectural Journal Bento Grid Layout
Complete a bento grid layout in a journal scenario: real content, actionable controls, clear state feedback, and layouts that adapt across sizes.
Open and runTea Brand Narrative Hero Section
Narrative hero section for a tea beverage brand scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runLibrary Operations KPI Overview
Complete the key metrics overview in the library operations scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runFlower Shop Cart Calculator
Complete the shopping cart calculator in a flower shop scenario: includes realistic content, interactive controls, clear status feedback, and a responsive layout.
Open and runResponsive Type Scale for Mountain Poems
Complete a responsive type scale in a mountain poetry collection scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runMulti-Stage Loader for File Upload
Complete a multi-stage loader in a file upload scene: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runDeep-Sea Interactive Particle Field
Complete an interactive particle field in a deep-sea scene: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runInteractive air quality bar chart
Complete an interactive bar chart for an air quality scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runDevice Lab Viewport Inspector Panel
Complete the viewport information panel in a device lab scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runFamily Night Portable Calculator
Complete a portable calculator for a family night scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runMeeting room preference toggle matrix
Complete the preference toggle matrix in a meeting room scenario: includes realistic content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runVolunteer Registration Multi-Step Form
Complete a multi-step form flow in the volunteer signup scenario: it includes realistic content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runMuseum Guide Breadcrumb Navigation
Complete the breadcrumb navigation in the museum guide scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runDocument Review Side Drawer
Complete a side drawer for the document review scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runReading List Kanban Board
Complete the task board in a reading-list scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runInventory Ledger Filterable Table
Complete the combined filter table in an inventory ledger scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runSplit-Screen Narrative Layout for an Architecture Journal
Complete a split-screen narrative layout for an architecture journal scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runTea Brand Pricing Page
Complete the pricing plans page for the tea brand scenario: include real content, interactive controls, clear state feedback, and responsive layout across sizes.
Open and runLibrary Operations Trend Analysis Panel
Complete a trend analysis dashboard for library operations: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runFlower Shop Checkout Steps Flow
Complete a checkout step flow for a flower shop scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runMountain Poem Font Weight Hierarchy Study
Complete a font-weight hierarchy experiment in a mountain-poem zine setting: including real content, interactive controls, clear state feedback, and cross-size layout.
Open and runFile upload button morph transition
Complete the button morph transition in a file upload scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and run