UI states: empty, error, loading and success

Empty states, 404s, skeleton loading, success screens, toasts, dialogs and form errors. 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 states & feedback Empty state 404 error Loading skeleton Success confirmation Toast / snackbar with undo Confirm dialog (destructive)Side drawer Command palette Date range picker Form validation errors

StyleAll Minimal Editorial Brutalist Luxury Playful Corporate Retro Monochrome

208 screens

Theme

Empty state (inbox zero) — web, minimal (Fernway)

Empty state · web · minimal

Empty state (inbox zero) — web, editorial (Fernway)

Empty state · web · editorial

Empty state (inbox zero) — web, brutalist (Fernway)

Empty state · web · brutalist

Empty state (inbox zero) — web, luxury (Fernway)

Empty state · web · luxury

Empty state (inbox zero) — web, playful (Fernway)

Empty state · web · playful

Empty state (inbox zero) — web, corporate (Fernway)

Empty state · web · corporate

Empty state (inbox zero) — web, retro (Fernway)

Empty state · web · retro

Empty state (inbox zero) — web, monochrome (Fernway)

Empty state · web · monochrome

Empty state (inbox zero) — mobile, minimal (Fernway)

Empty state · mobile · minimal

Empty state (inbox zero) — mobile, editorial (Fernway)

Empty state · mobile · editorial

Empty state (inbox zero) — mobile, brutalist (Fernway)

Empty state · mobile · brutalist

Empty state (inbox zero) — mobile, luxury (Fernway)

Empty state · mobile · luxury

Empty state (inbox zero) — mobile, playful (Fernway)

Empty state · mobile · playful

Empty state (inbox zero) — mobile, corporate (Fernway)

Empty state · mobile · corporate

Empty state (inbox zero) — mobile, retro (Fernway)

Empty state · mobile · retro

Empty state (inbox zero) — mobile, monochrome (Fernway)

Empty state · mobile · monochrome

404 page not found — web, minimal (Fernway)

404 error · web · minimal

404 page not found — web, editorial (Fernway)

404 error · web · editorial

404 page not found — web, brutalist (Fernway)

404 error · web · brutalist

404 page not found — web, luxury (Fernway)

404 error · web · luxury

404 page not found — web, playful (Fernway)

404 error · web · playful

404 page not found — web, corporate (Fernway)

404 error · web · corporate

404 page not found — web, retro (Fernway)

404 error · web · retro

404 page not found — web, monochrome (Fernway)

404 error · web · monochrome

404 page not found — mobile, minimal (Fernway)

404 error · mobile · minimal

404 page not found — mobile, editorial (Fernway)

404 error · mobile · editorial

404 page not found — mobile, brutalist (Fernway)

404 error · mobile · brutalist

404 page not found — mobile, luxury (Fernway)

404 error · mobile · luxury

404 page not found — mobile, playful (Fernway)

404 error · mobile · playful

404 page not found — mobile, corporate (Fernway)

404 error · mobile · corporate

404 page not found — mobile, retro (Fernway)

404 error · mobile · retro

404 page not found — mobile, monochrome (Fernway)

404 error · mobile · monochrome

Loading skeleton · web · minimal

Loading skeleton · web · editorial

Loading skeleton · web · brutalist

Loading skeleton · web · luxury

Loading skeleton · web · playful

Loading skeleton · web · corporate

Loading skeleton · web · retro

Loading skeleton · web · monochrome

Loading skeleton · mobile · minimal

Loading skeleton · mobile · editorial

Loading skeleton · mobile · brutalist

Loading skeleton · mobile · luxury

Loading skeleton · mobile · playful

Loading skeleton · mobile · corporate

Loading skeleton · mobile · retro

Loading skeleton · mobile · monochrome

Invites sent confirmation — web, minimal (Fernway)

Success confirmation · Invite sent · web · minimal

Password reset confirmation — web, minimal (Fernway)

Success confirmation · Password reset · web · minimal

Plan upgraded confirmation — web, minimal (Fernway)

Success confirmation · Plan upgraded · web · minimal

Subscription cancelled confirmation — web, minimal (Fernway)

Success confirmation · Subscription cancelled · web · minimal

Invites sent confirmation — web, editorial (Fernway)

Success confirmation · Invite sent · web · editorial

Password reset confirmation — web, editorial (Fernway)

Success confirmation · Password reset · web · editorial

Plan upgraded confirmation — web, editorial (Fernway)

Success confirmation · Plan upgraded · web · editorial

Subscription cancelled confirmation — web, editorial (Fernway)

Success confirmation · Subscription cancelled · web · editorial

Invites sent confirmation — web, brutalist (Fernway)

Success confirmation · Invite sent · web · brutalist

Password reset confirmation — web, brutalist (Fernway)

Success confirmation · Password reset · web · brutalist

Plan upgraded confirmation — web, brutalist (Fernway)

Success confirmation · Plan upgraded · web · brutalist

Subscription cancelled confirmation — web, brutalist (Fernway)

Success confirmation · Subscription cancelled · web · brutalist

Invites sent confirmation — web, luxury (Fernway)

Success confirmation · Invite sent · web · luxury

Password reset confirmation — web, luxury (Fernway)

Success confirmation · Password reset · web · luxury

Plan upgraded confirmation — web, luxury (Fernway)

Success confirmation · Plan upgraded · web · luxury

Subscription cancelled confirmation — web, luxury (Fernway)

Success confirmation · Subscription cancelled · web · luxury

Invites sent confirmation — web, playful (Fernway)

Success confirmation · Invite sent · web · playful

Password reset confirmation — web, playful (Fernway)

Success confirmation · Password reset · web · playful

Plan upgraded confirmation — web, playful (Fernway)

Success confirmation · Plan upgraded · web · playful

Subscription cancelled confirmation — web, playful (Fernway)

Success confirmation · Subscription cancelled · web · playful

Invites sent confirmation — web, corporate (Fernway)

Success confirmation · Invite sent · web · corporate

Password reset confirmation — web, corporate (Fernway)

Success confirmation · Password reset · web · corporate

Plan upgraded confirmation — web, corporate (Fernway)

Success confirmation · Plan upgraded · web · corporate

Subscription cancelled confirmation — web, corporate (Fernway)

Success confirmation · Subscription cancelled · web · corporate

Invites sent confirmation — web, retro (Fernway)

Success confirmation · Invite sent · web · retro

Password reset confirmation — web, retro (Fernway)

Success confirmation · Password reset · web · retro

Plan upgraded confirmation — web, retro (Fernway)

Success confirmation · Plan upgraded · web · retro

Subscription cancelled confirmation — web, retro (Fernway)

Success confirmation · Subscription cancelled · web · retro

Invites sent confirmation — web, monochrome (Fernway)

Success confirmation · Invite sent · web · monochrome

Password reset confirmation — web, monochrome (Fernway)

Success confirmation · Password reset · web · monochrome

Plan upgraded confirmation — web, monochrome (Fernway)

Success confirmation · Plan upgraded · web · monochrome

Subscription cancelled confirmation — web, monochrome (Fernway)

Success confirmation · Subscription cancelled · web · monochrome

Invites sent confirmation — mobile, minimal (Fernway)

Success confirmation · Invite sent · mobile · minimal

Password reset confirmation — mobile, minimal (Fernway)

Success confirmation · Password reset · mobile · minimal

Plan upgraded confirmation — mobile, minimal (Fernway)

Success confirmation · Plan upgraded · mobile · minimal

Subscription cancelled confirmation — mobile, minimal (Fernway)

Success confirmation · Subscription cancelled · mobile · minimal

Invites sent confirmation — mobile, editorial (Fernway)

Success confirmation · Invite sent · mobile · editorial

Password reset confirmation — mobile, editorial (Fernway)

Success confirmation · Password reset · mobile · editorial

Plan upgraded confirmation — mobile, editorial (Fernway)

Success confirmation · Plan upgraded · mobile · editorial

Subscription cancelled confirmation — mobile, editorial (Fernway)

Success confirmation · Subscription cancelled · mobile · editorial

Invites sent confirmation — mobile, brutalist (Fernway)

Success confirmation · Invite sent · mobile · brutalist

Password reset confirmation — mobile, brutalist (Fernway)

Success confirmation · Password reset · mobile · brutalist

Plan upgraded confirmation — mobile, brutalist (Fernway)

Success confirmation · Plan upgraded · mobile · brutalist

Subscription cancelled confirmation — mobile, brutalist (Fernway)

Success confirmation · Subscription cancelled · mobile · brutalist

Invites sent confirmation — mobile, luxury (Fernway)

Success confirmation · Invite sent · mobile · luxury

Password reset confirmation — mobile, luxury (Fernway)

Success confirmation · Password reset · mobile · luxury

Plan upgraded confirmation — mobile, luxury (Fernway)

Success confirmation · Plan upgraded · mobile · luxury

Subscription cancelled confirmation — mobile, luxury (Fernway)

Success confirmation · Subscription cancelled · mobile · luxury

Invites sent confirmation — mobile, playful (Fernway)

Success confirmation · Invite sent · mobile · playful

Password reset confirmation — mobile, playful (Fernway)

Success confirmation · Password reset · mobile · playful

Plan upgraded confirmation — mobile, playful (Fernway)

Success confirmation · Plan upgraded · mobile · playful

Subscription cancelled confirmation — mobile, playful (Fernway)

Success confirmation · Subscription cancelled · mobile · playful

Invites sent confirmation — mobile, corporate (Fernway)

Success confirmation · Invite sent · mobile · corporate

Password reset confirmation — mobile, corporate (Fernway)

Success confirmation · Password reset · mobile · corporate

Plan upgraded confirmation — mobile, corporate (Fernway)

Success confirmation · Plan upgraded · mobile · corporate

Subscription cancelled confirmation — mobile, corporate (Fernway)

Success confirmation · Subscription cancelled · mobile · corporate

Invites sent confirmation — mobile, retro (Fernway)

Success confirmation · Invite sent · mobile · retro

Password reset confirmation — mobile, retro (Fernway)

Success confirmation · Password reset · mobile · retro

Plan upgraded confirmation — mobile, retro (Fernway)

Success confirmation · Plan upgraded · mobile · retro

Subscription cancelled confirmation — mobile, retro (Fernway)

Success confirmation · Subscription cancelled · mobile · retro

Invites sent confirmation — mobile, monochrome (Fernway)

Success confirmation · Invite sent · mobile · monochrome

Password reset confirmation — mobile, monochrome (Fernway)

Success confirmation · Password reset · mobile · monochrome

Plan upgraded confirmation — mobile, monochrome (Fernway)

Success confirmation · Plan upgraded · mobile · monochrome

Subscription cancelled confirmation — mobile, monochrome (Fernway)

Success confirmation · Subscription cancelled · mobile · monochrome

Toast with undo (task deleted) — web, minimal (Fernway)

Toast / snackbar with undo · web · minimal

Toast with undo (task deleted) — web, editorial (Fernway)

Toast / snackbar with undo · web · editorial

Toast with undo (task deleted) — web, brutalist (Fernway)

Toast / snackbar with undo · web · brutalist

Toast with undo (task deleted) — web, luxury (Fernway)

Toast / snackbar with undo · web · luxury

Toast with undo (task deleted) — web, playful (Fernway)

Toast / snackbar with undo · web · playful

Toast with undo (task deleted) — web, corporate (Fernway)

Toast / snackbar with undo · web · corporate

Toast with undo (task deleted) — web, retro (Fernway)

Toast / snackbar with undo · web · retro

Toast with undo (task deleted) — web, monochrome (Fernway)

Toast / snackbar with undo · web · monochrome

Toast with undo (task deleted) — mobile, minimal (Fernway)

Toast / snackbar with undo · mobile · minimal

Toast with undo (task deleted) — mobile, editorial (Fernway)

Toast / snackbar with undo · mobile · editorial

Toast with undo (task deleted) — mobile, brutalist (Fernway)

Toast / snackbar with undo · mobile · brutalist

Toast with undo (task deleted) — mobile, luxury (Fernway)

Toast / snackbar with undo · mobile · luxury

Toast with undo (task deleted) — mobile, playful (Fernway)

Toast / snackbar with undo · mobile · playful

Toast with undo (task deleted) — mobile, corporate (Fernway)

Toast / snackbar with undo · mobile · corporate

Toast with undo (task deleted) — mobile, retro (Fernway)

Toast / snackbar with undo · mobile · retro

Toast with undo (task deleted) — mobile, monochrome (Fernway)

Toast / snackbar with undo · mobile · monochrome

Confirm delete dialog (destructive) — web, minimal (Fernway)

Confirm dialog (destructive) · web · minimal

Confirm delete dialog (destructive) — web, editorial (Fernway)

Confirm dialog (destructive) · web · editorial

Confirm delete dialog (destructive) — web, brutalist (Fernway)

Confirm dialog (destructive) · web · brutalist

Confirm delete dialog (destructive) — web, luxury (Fernway)

Confirm dialog (destructive) · web · luxury

Confirm delete dialog (destructive) — web, playful (Fernway)

Confirm dialog (destructive) · web · playful

Confirm delete dialog (destructive) — web, corporate (Fernway)

Confirm dialog (destructive) · web · corporate

Confirm delete dialog (destructive) — web, retro (Fernway)

Confirm dialog (destructive) · web · retro

Confirm delete dialog (destructive) — web, monochrome (Fernway)

Confirm dialog (destructive) · web · monochrome

Confirm delete dialog (destructive) — mobile, minimal (Fernway)

Confirm dialog (destructive) · mobile · minimal

Confirm delete dialog (destructive) — mobile, editorial (Fernway)

Confirm dialog (destructive) · mobile · editorial

Confirm delete dialog (destructive) — mobile, brutalist (Fernway)

Confirm dialog (destructive) · mobile · brutalist

Confirm delete dialog (destructive) — mobile, luxury (Fernway)

Confirm dialog (destructive) · mobile · luxury

Confirm delete dialog (destructive) — mobile, playful (Fernway)

Confirm dialog (destructive) · mobile · playful

Confirm delete dialog (destructive) — mobile, corporate (Fernway)

Confirm dialog (destructive) · mobile · corporate

Confirm delete dialog (destructive) — mobile, retro (Fernway)

Confirm dialog (destructive) · mobile · retro

Confirm delete dialog (destructive) — mobile, monochrome (Fernway)

Confirm dialog (destructive) · mobile · monochrome

Side drawer over a data table (record details) — web, minimal (Tallyfold)

Side drawer · web · minimal

Side drawer over a data table (record details) — web, editorial (Tallyfold)

Side drawer · web · editorial

Side drawer over a data table (record details) — web, brutalist (Tallyfold)

Side drawer · web · brutalist

Side drawer over a data table (record details) — web, luxury (Tallyfold)

Side drawer · web · luxury

Side drawer over a data table (record details) — web, playful (Tallyfold)

Side drawer · web · playful

Side drawer over a data table (record details) — web, corporate (Tallyfold)

Side drawer · web · corporate

Side drawer over a data table (record details) — web, retro (Tallyfold)

Side drawer · web · retro

Side drawer over a data table (record details) — web, monochrome (Tallyfold)

Side drawer · web · monochrome

Side drawer over a data table (record details) — mobile, minimal (Tallyfold)

Side drawer · mobile · minimal

Side drawer over a data table (record details) — mobile, editorial (Tallyfold)

Side drawer · mobile · editorial

Side drawer over a data table (record details) — mobile, brutalist (Tallyfold)

Side drawer · mobile · brutalist

Side drawer over a data table (record details) — mobile, luxury (Tallyfold)

Side drawer · mobile · luxury

Side drawer over a data table (record details) — mobile, playful (Tallyfold)

Side drawer · mobile · playful

Side drawer over a data table (record details) — mobile, corporate (Tallyfold)

Side drawer · mobile · corporate

Side drawer over a data table (record details) — mobile, retro (Tallyfold)

Side drawer · mobile · retro

Side drawer over a data table (record details) — mobile, monochrome (Tallyfold)

Side drawer · mobile · monochrome

Command palette (open) — web, minimal (Fernway)

Command palette · web · minimal

Command palette (open) — web, editorial (Fernway)

Command palette · web · editorial

Command palette (open) — web, brutalist (Fernway)

Command palette · web · brutalist

Command palette (open) — web, luxury (Fernway)

Command palette · web · luxury

Command palette (open) — web, playful (Fernway)

Command palette · web · playful

Command palette (open) — web, corporate (Fernway)

Command palette · web · corporate

Command palette (open) — web, retro (Fernway)

Command palette · web · retro

Command palette (open) — web, monochrome (Fernway)

Command palette · web · monochrome

Command palette (open) — mobile, minimal (Fernway)

Command palette · mobile · minimal

Command palette (open) — mobile, editorial (Fernway)

Command palette · mobile · editorial

Command palette (open) — mobile, brutalist (Fernway)

Command palette · mobile · brutalist

Command palette (open) — mobile, luxury (Fernway)

Command palette · mobile · luxury

Command palette (open) — mobile, playful (Fernway)

Command palette · mobile · playful

Command palette (open) — mobile, corporate (Fernway)

Command palette · mobile · corporate

Command palette (open) — mobile, retro (Fernway)

Command palette · mobile · retro

Command palette (open) — mobile, monochrome (Fernway)

Command palette · mobile · monochrome

Date range picker (open) — web, minimal (Tallyfold)

Date range picker · web · minimal

Date range picker (open) — web, editorial (Tallyfold)

Date range picker · web · editorial

Date range picker (open) — web, brutalist (Tallyfold)

Date range picker · web · brutalist

Date range picker (open) — web, luxury (Tallyfold)

Date range picker · web · luxury

Date range picker (open) — web, playful (Tallyfold)

Date range picker · web · playful

Date range picker (open) — web, corporate (Tallyfold)

Date range picker · web · corporate

Date range picker (open) — web, retro (Tallyfold)

Date range picker · web · retro

Date range picker (open) — web, monochrome (Tallyfold)

Date range picker · web · monochrome

Date range picker (open) — mobile, minimal (Tallyfold)

Date range picker · mobile · minimal

Date range picker (open) — mobile, editorial (Tallyfold)

Date range picker · mobile · editorial

Date range picker (open) — mobile, brutalist (Tallyfold)

Date range picker · mobile · brutalist

Date range picker (open) — mobile, luxury (Tallyfold)

Date range picker · mobile · luxury

Date range picker (open) — mobile, playful (Tallyfold)

Date range picker · mobile · playful

Date range picker (open) — mobile, corporate (Tallyfold)

Date range picker · mobile · corporate

Date range picker (open) — mobile, retro (Tallyfold)

Date range picker · mobile · retro

Date range picker (open) — mobile, monochrome (Tallyfold)

Date range picker · mobile · monochrome

Form with inline validation errors — web, minimal (Fernway)

Form validation errors · web · minimal

Form with inline validation errors — web, editorial (Fernway)

Form validation errors · web · editorial

Form with inline validation errors — web, brutalist (Fernway)

Form validation errors · web · brutalist

Form with inline validation errors — web, luxury (Fernway)

Form validation errors · web · luxury

Form with inline validation errors — web, playful (Fernway)

Form validation errors · web · playful

Form with inline validation errors — web, corporate (Fernway)

Form validation errors · web · corporate

Form with inline validation errors — web, retro (Fernway)

Form validation errors · web · retro

Form with inline validation errors — web, monochrome (Fernway)

Form validation errors · web · monochrome

Form with inline validation errors — mobile, minimal (Fernway)

Form validation errors · mobile · minimal

Form with inline validation errors — mobile, editorial (Fernway)

Form validation errors · mobile · editorial

Form with inline validation errors — mobile, brutalist (Fernway)

Form validation errors · mobile · brutalist

Form with inline validation errors — mobile, luxury (Fernway)

Form validation errors · mobile · luxury

Form with inline validation errors — mobile, playful (Fernway)

Form validation errors · mobile · playful

Form with inline validation errors — mobile, corporate (Fernway)

Form validation errors · mobile · corporate

Form with inline validation errors — mobile, retro (Fernway)

Form validation errors · mobile · retro

Form with inline validation errors — mobile, monochrome (Fernway)

Form validation errors · 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.

UI states: empty, error, loading and success

Browse by pattern

Browse by category, device and style

Save to board