List, table and form UI examples

Data tables, list and detail views, kanban boards, calendars, search results and multi-step forms. Every screen is an original design by Made Good Designs with its HTML code and a DESIGN.md of colour, type and spacing tokens, so you (or your AI coding agent) can build from it directly. Free to copy and adapt. See also all 3266 UI screens and 27 multi-step flows.

PlatformAll Web Mobile

ScreensAll Sign-in & onboarding Dashboards Lists & data Shopping & payments Account & admin Messages & media Tools & AI Industries States & feedback Emails Staff & operations

ComponentsUI components

WebsitesWebsite templates Website sections

All lists & data Data table Analytics charts Detail view List view Kanban board Calendar Split view (master-detail)Multi-step form wizard

StyleAll Minimal Editorial Brutalist Luxury Playful Corporate Retro Monochrome

128 screens

Theme

Data table (customers) — web, minimal (Tallyfold)

Data table · web · minimal

Data table (customers) — web, editorial (Tallyfold)

Data table · web · editorial

Data table (customers) — web, brutalist (Tallyfold)

Data table · web · brutalist

Data table (customers) — web, luxury (Tallyfold)

Data table · web · luxury

Data table (customers) — web, playful (Tallyfold)

Data table · web · playful

Data table (customers) — web, corporate (Tallyfold)

Data table · web · corporate

Data table (customers) — web, retro (Tallyfold)

Data table · web · retro

Data table (customers) — web, monochrome (Tallyfold)

Data table · web · monochrome

Data table (customers) — mobile, minimal (Tallyfold)

Data table · mobile · minimal

Data table (customers) — mobile, editorial (Tallyfold)

Data table · mobile · editorial

Data table (customers) — mobile, brutalist (Tallyfold)

Data table · mobile · brutalist

Data table (customers) — mobile, luxury (Tallyfold)

Data table · mobile · luxury

Data table (customers) — mobile, playful (Tallyfold)

Data table · mobile · playful

Data table (customers) — mobile, corporate (Tallyfold)

Data table · mobile · corporate

Data table (customers) — mobile, retro (Tallyfold)

Data table · mobile · retro

Data table (customers) — mobile, monochrome (Tallyfold)

Data table · mobile · monochrome

Analytics report (charts) — web, minimal (Tallyfold)

Analytics charts · web · minimal

Analytics report (charts) — web, editorial (Tallyfold)

Analytics charts · web · editorial

Analytics report (charts) — web, brutalist (Tallyfold)

Analytics charts · web · brutalist

Analytics report (charts) — web, luxury (Tallyfold)

Analytics charts · web · luxury

Analytics report (charts) — web, playful (Tallyfold)

Analytics charts · web · playful

Analytics report (charts) — web, corporate (Tallyfold)

Analytics charts · web · corporate

Analytics report (charts) — web, retro (Tallyfold)

Analytics charts · web · retro

Analytics report (charts) — web, monochrome (Tallyfold)

Analytics charts · web · monochrome

Analytics report (charts) — mobile, minimal (Tallyfold)

Analytics charts · mobile · minimal

Analytics report (charts) — mobile, editorial (Tallyfold)

Analytics charts · mobile · editorial

Analytics report (charts) — mobile, brutalist (Tallyfold)

Analytics charts · mobile · brutalist

Analytics report (charts) — mobile, luxury (Tallyfold)

Analytics charts · mobile · luxury

Analytics report (charts) — mobile, playful (Tallyfold)

Analytics charts · mobile · playful

Analytics report (charts) — mobile, corporate (Tallyfold)

Analytics charts · mobile · corporate

Analytics report (charts) — mobile, retro (Tallyfold)

Analytics charts · mobile · retro

Analytics report (charts) — mobile, monochrome (Tallyfold)

Analytics charts · mobile · monochrome

Task list (My tasks) — web, minimal (Fernway)

List view · web · minimal

Task list (My tasks) — web, editorial (Fernway)

List view · web · editorial

Task list (My tasks) — web, brutalist (Fernway)

List view · web · brutalist

Task list (My tasks) — web, luxury (Fernway)

List view · web · luxury

Task list (My tasks) — web, playful (Fernway)

List view · web · playful

Task list (My tasks) — web, corporate (Fernway)

List view · web · corporate

Task list (My tasks) — web, retro (Fernway)

List view · web · retro

Task list (My tasks) — web, monochrome (Fernway)

List view · web · monochrome

Task list (My tasks) — mobile, minimal (Fernway)

List view · mobile · minimal

Task list (My tasks) — mobile, editorial (Fernway)

List view · mobile · editorial

Task list (My tasks) — mobile, brutalist (Fernway)

List view · mobile · brutalist

Task list (My tasks) — mobile, luxury (Fernway)

List view · mobile · luxury

Task list (My tasks) — mobile, playful (Fernway)

List view · mobile · playful

Task list (My tasks) — mobile, corporate (Fernway)

List view · mobile · corporate

Task list (My tasks) — mobile, retro (Fernway)

List view · mobile · retro

Task list (My tasks) — mobile, monochrome (Fernway)

List view · mobile · monochrome

Detail view · web · minimal

Detail view · web · editorial

Detail view · web · brutalist

Detail view · web · luxury

Detail view · web · playful

Detail view · web · corporate

Detail view · web · retro

Detail view · web · monochrome

Detail view · mobile · minimal

Task detail — mobile, editorial (Fernway)

Detail view · mobile · editorial

Task detail — mobile, brutalist (Fernway)

Detail view · mobile · brutalist

Detail view · mobile · luxury

Detail view · mobile · playful

Task detail — mobile, corporate (Fernway)

Detail view · mobile · corporate

Detail view · mobile · retro

Task detail — mobile, monochrome (Fernway)

Detail view · mobile · monochrome

Kanban board · web · minimal

Kanban board · web · editorial

Kanban board · web · brutalist

Kanban board · web · luxury

Kanban board · web · playful

Kanban board · web · corporate

Kanban board · web · retro

Kanban board · web · monochrome

Kanban board · mobile · minimal

Kanban board · mobile · editorial

Kanban board · mobile · brutalist

Kanban board · mobile · luxury

Kanban board · mobile · playful

Kanban board · mobile · corporate

Kanban board · mobile · retro

Kanban board · mobile · monochrome

Calendar (week view) — web, minimal (Fernway)

Calendar · web · minimal

Calendar (week view) — web, editorial (Fernway)

Calendar · web · editorial

Calendar (week view) — web, brutalist (Fernway)

Calendar · web · brutalist

Calendar (week view) — web, luxury (Fernway)

Calendar · web · luxury

Calendar (week view) — web, playful (Fernway)

Calendar · web · playful

Calendar (week view) — web, corporate (Fernway)

Calendar · web · corporate

Calendar (week view) — web, retro (Fernway)

Calendar · web · retro

Calendar (week view) — web, monochrome (Fernway)

Calendar · web · monochrome

Calendar (week view) — mobile, minimal (Fernway)

Calendar · mobile · minimal

Calendar (week view) — mobile, editorial (Fernway)

Calendar · mobile · editorial

Calendar (week view) — mobile, brutalist (Fernway)

Calendar · mobile · brutalist

Calendar (week view) — mobile, luxury (Fernway)

Calendar · mobile · luxury

Calendar (week view) — mobile, playful (Fernway)

Calendar · mobile · playful

Calendar (week view) — mobile, corporate (Fernway)

Calendar · mobile · corporate

Calendar (week view) — mobile, retro (Fernway)

Calendar · mobile · retro

Calendar (week view) — mobile, monochrome (Fernway)

Calendar · mobile · monochrome

Multi-step form wizard · web · minimal

Multi-step form wizard · web · editorial

Multi-step form wizard · web · brutalist

Multi-step form wizard · web · luxury

Multi-step form wizard · web · playful

Multi-step form wizard · web · corporate

Multi-step form wizard · web · retro

Multi-step form wizard · web · monochrome

Multi-step form wizard · mobile · minimal

Multi-step form wizard · mobile · editorial

Multi-step form wizard · mobile · brutalist

Multi-step form wizard · mobile · luxury

Multi-step form wizard · mobile · playful

Multi-step form wizard · mobile · corporate

Multi-step form wizard · mobile · retro

Multi-step form wizard · mobile · monochrome

Master–detail split view (docs list and detail pane) — web, minimal (Fernway)

Split view (master-detail) · web · minimal

Master–detail split view (docs list and detail pane) — web, editorial (Fernway)

Split view (master-detail) · web · editorial

Master–detail split view (docs list and detail pane) — web, brutalist (Fernway)

Split view (master-detail) · web · brutalist

Master–detail split view (docs list and detail pane) — web, luxury (Fernway)

Split view (master-detail) · web · luxury

Master–detail split view (docs list and detail pane) — web, playful (Fernway)

Split view (master-detail) · web · playful

Master–detail split view (docs list and detail pane) — web, corporate (Fernway)

Split view (master-detail) · web · corporate

Master–detail split view (docs list and detail pane) — web, retro (Fernway)

Split view (master-detail) · web · retro

Master–detail split view (docs list and detail pane) — web, monochrome (Fernway)

Split view (master-detail) · web · monochrome

Master–detail split view (docs list and detail pane) — mobile, minimal (Fernway)

Split view (master-detail) · mobile · minimal

Master–detail split view (docs list and detail pane) — mobile, editorial (Fernway)

Split view (master-detail) · mobile · editorial

Master–detail split view (docs list and detail pane) — mobile, brutalist (Fernway)

Split view (master-detail) · mobile · brutalist

Master–detail split view (docs list and detail pane) — mobile, luxury (Fernway)

Split view (master-detail) · mobile · luxury

Master–detail split view (docs list and detail pane) — mobile, playful (Fernway)

Split view (master-detail) · mobile · playful

Master–detail split view (docs list and detail pane) — mobile, corporate (Fernway)

Split view (master-detail) · mobile · corporate

Master–detail split view (docs list and detail pane) — mobile, retro (Fernway)

Split view (master-detail) · mobile · retro

Master–detail split view (docs list and detail pane) — mobile, monochrome (Fernway)

Split view (master-detail) · mobile · monochrome

Browse by pattern

App screens

Dashboard
Data table
Analytics charts
Login
Sign up
Forgot password
Two-factor code
Welcome
Onboarding step
Permissions request
Home
Feed
List view
Detail view
Kanban board
Calendar
File manager
Search results
Editor toolbar
AI chat assistant
Chat list
Chat thread
Video call
Image viewer
Map view
Video player
Create post
Class schedule
Booking details
Booking confirmed
Product detail
Cart
Checkout
Order confirmation
Settings
Profile
Notifications center
Team members
Roles permissions
Audit log
API keys
Integrations
Billing plans
Invoice
Paywall upgrade
Cancel subscription
Empty state
404 error
Loading skeleton
Success confirmation
AI workspace
AI settings
Version history
Approval queue
Doctor directory
Telehealth visit
Clinic home
Music player
Playlist
Portfolio home
Case study
Security dashboard
Project tracker
Course dashboard
Multi-step form wizard
Bank onboarding
Product scan
Split view (master-detail)
Canvas editor
Floor plan
Voice call
Toast / snackbar with undo
Confirm dialog (destructive)
Side drawer
Command palette
Date range picker
Form validation errors
Sign-in error
Card declined at checkout
Find a pro (home services)
Book a home-service visit
Job tracker
Account email
Order email
Shift scheduler
Leave calendar
Time-off request
Multi-location operations dashboard
Inventory stock
Savings goal
Onboarding carousel

UI components

Tabs
Cards
Pagination
Popover
Tooltip
Dropdown menu
Accordion
Radio buttons
Breadcrumbs
Toggle switch
Stepper
Sidebar navigation
Loading spinner

Website sections

Website templates

Browse by category, device and style

Building with an AI coding agent? Every screen here is also in the free Made Good Designs MCP server: ask Claude, Cursor or ChatGPT to search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.

List, table and form UI examples

Browse by pattern

Browse by category, device and style

Save to board