Product UI design references
Study 109 credited examples of real product screens and documentation across 12 categories. Browse by task and follow each example to its source.
SaaS dashboards
Fintech
Fitness and health
Developer tools and documentation
- WooCommerce · log browser
- WooCommerce · fatal error detail
- Webhook Tester · delivery result documented by Twenty
- GitHub Actions · Grafana breaking-change comment
- Zulip · code formatting reference
- DigitalOcean · Spaces access keys documented by Vendure
- Open WebUI · terminal selection
- Twenty · API documentation preview
AI chat and copilots
- Open WebUI · configuring a model connection
- Open WebUI · evaluating an arena response
- Open WebUI · generated code
- Open WebUI · structured explanation
- Open WebUI · search conversation history
- Open WebUI · model picker
- Open WebUI · shared thread reply
- LobeHub · conversation-mode diagram
- LibreChat · mobile context-window breakdown
Marketplaces
- Spree demo · independent seller directory
- Spree demo · Clearhaven Filters & Parts
- Spree · seller setup checklist
- Spree · seller context within an order
- Spree · commission and seller transfer
- Spree · listing under review
- Spree · seller balance
- Spree · buyer-facing collection
- Saleor · seller variant availability
- Spree · vendor fulfillment queue
Booking and scheduling
- OpenProject · adding work to a team plan
- Cal.com · booking-grid illustration
- Google Calendar · availability shown in Cal.com’s integration
- OpenProject · recurring meeting creation
- OpenProject · recurring series index
- OpenProject · month calendar
- OpenProject · changing scheduled dates
- OpenProject · finding a meeting
- OpenProject · participant responses
Client portals
Mobile feeds and communities
- Zulip · choosing the destination of a reply
- Mastodon for Android · home timeline
- Mastodon for Android · profile
- Mastodon for Android · composing a media post
- Mastodon for Android · community rules
- Mastodon for Android · illustrated post detail
- Zulip · mobile conversation
- Zulip · topic within a community channel
- OpenProject · notification feed to activity
E-commerce product pages
- Spree demo · automatic espresso machine
- Spree demo · dual-basket air fryer
- Spree demo · temperature-control kettle
- Spree · choosing a toaster finish
- Spree · product gallery and specifications
- WooCommerce · product-page payment controls
- WooCommerce · Iris & Co product template
- Saleor · choosing product gallery angles
- Saleor · media description for a product
- Open Food Facts · health details on a product
- Spree · verifying a product at checkout
Pricing pages
- EVpin · team-based value
- Clay · usage allowances
- Fibery · platform tiers
- Calendly · team scheduling plans
- Relume · free hosting and domain publishing
- Webflow · site and platform plans
- Basecamp · fixed-price package selector
- Wise · task-based fee lookup
- N26 · account plans
- Clerk · identity infrastructure plans