← Back to inspiration

Free UI components with HTML and CSS

Accessible building blocks — tabs, cards, pagination, popovers, tooltips, dropdown menus, accordions, radio buttons, breadcrumbs, toggle switches, steppers, sidebars and loading spinners — each with a live demo, every state drawn, keyboard support and ARIA, in light and dark. Every component 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.

PlatformAllWebMobile
ScreensAllSign-in & onboardingDashboardsLists & dataShopping & paymentsAccount & adminMessages & mediaTools & AIIndustriesStates & feedbackEmailsStaff & operations
ComponentsUI components
WebsitesWebsite templatesWebsite sections
All ui componentsTabsCardsPaginationPopoverTooltipDropdown menuAccordionRadio buttonsBreadcrumbsToggle switchStepperSidebar navigationLoading spinner
StyleAllMinimalEditorialBrutalistLuxuryPlayfulCorporateRetroMonochrome

208 components

Theme

Tabs component — web, minimal (Fernway)
Tabs · web · minimal
Tabs component — web, editorial (Fernway)
Tabs · web · editorial
Tabs component — web, brutalist (Fernway)
Tabs · web · brutalist
Tabs component — web, luxury (Fernway)
Tabs · web · luxury
Tabs component — web, playful (Fernway)
Tabs · web · playful
Tabs component — web, corporate (Fernway)
Tabs · web · corporate
Tabs component — web, retro (Fernway)
Tabs · web · retro
Tabs component — web, monochrome (Fernway)
Tabs · web · monochrome
Tabs component — mobile, minimal (Fernway)
Tabs · mobile · minimal
Tabs component — mobile, editorial (Fernway)
Tabs · mobile · editorial
Tabs component — mobile, brutalist (Fernway)
Tabs · mobile · brutalist
Tabs component — mobile, luxury (Fernway)
Tabs · mobile · luxury
Tabs component — mobile, playful (Fernway)
Tabs · mobile · playful
Tabs component — mobile, corporate (Fernway)
Tabs · mobile · corporate
Tabs component — mobile, retro (Fernway)
Tabs · mobile · retro
Tabs component — mobile, monochrome (Fernway)
Tabs · mobile · monochrome
Cards component — web, minimal (Juniper Supply)
Cards · web · minimal
Cards component — web, editorial (Juniper Supply)
Cards · web · editorial
Cards component — web, brutalist (Juniper Supply)
Cards · web · brutalist
Cards component — web, luxury (Juniper Supply)
Cards · web · luxury
Cards component — web, playful (Juniper Supply)
Cards · web · playful
Cards component — web, corporate (Juniper Supply)
Cards · web · corporate
Cards component — web, retro (Juniper Supply)
Cards · web · retro
Cards component — web, monochrome (Juniper Supply)
Cards · web · monochrome
Cards component — mobile, minimal (Juniper Supply)
Cards · mobile · minimal
Cards component — mobile, editorial (Juniper Supply)
Cards · mobile · editorial
Cards component — mobile, brutalist (Juniper Supply)
Cards · mobile · brutalist
Cards component — mobile, luxury (Juniper Supply)
Cards · mobile · luxury
Cards component — mobile, playful (Juniper Supply)
Cards · mobile · playful
Cards component — mobile, corporate (Juniper Supply)
Cards · mobile · corporate
Cards component — mobile, retro (Juniper Supply)
Cards · mobile · retro
Cards component — mobile, monochrome (Juniper Supply)
Cards · mobile · monochrome
Pagination component — web, minimal (Fieldnote)
Pagination · web · minimal
Pagination component — web, editorial (Fieldnote)
Pagination · web · editorial
Pagination component — web, brutalist (Fieldnote)
Pagination · web · brutalist
Pagination component — web, luxury (Fieldnote)
Pagination · web · luxury
Pagination component — web, playful (Fieldnote)
Pagination · web · playful
Pagination component — web, corporate (Fieldnote)
Pagination · web · corporate
Pagination component — web, retro (Fieldnote)
Pagination · web · retro
Pagination component — web, monochrome (Fieldnote)
Pagination · web · monochrome
Pagination component — mobile, minimal (Fieldnote)
Pagination · mobile · minimal
Pagination component — mobile, editorial (Fieldnote)
Pagination · mobile · editorial
Pagination component — mobile, brutalist (Fieldnote)
Pagination · mobile · brutalist
Pagination component — mobile, luxury (Fieldnote)
Pagination · mobile · luxury
Pagination component — mobile, playful (Fieldnote)
Pagination · mobile · playful
Pagination component — mobile, corporate (Fieldnote)
Pagination · mobile · corporate
Pagination component — mobile, retro (Fieldnote)
Pagination · mobile · retro
Pagination component — mobile, monochrome (Fieldnote)
Pagination · mobile · monochrome
Popover component — web, minimal (Patchbay)
Popover · web · minimal
Popover component — web, editorial (Patchbay)
Popover · web · editorial
Popover component — web, brutalist (Patchbay)
Popover · web · brutalist
Popover component — web, luxury (Patchbay)
Popover · web · luxury
Popover component — web, playful (Patchbay)
Popover · web · playful
Popover component — web, corporate (Patchbay)
Popover · web · corporate
Popover component — web, retro (Patchbay)
Popover · web · retro
Popover component — web, monochrome (Patchbay)
Popover · web · monochrome
Popover component — mobile, minimal (Patchbay)
Popover · mobile · minimal
Popover component — mobile, editorial (Patchbay)
Popover · mobile · editorial
Popover component — mobile, brutalist (Patchbay)
Popover · mobile · brutalist
Popover component — mobile, luxury (Patchbay)
Popover · mobile · luxury
Popover component — mobile, playful (Patchbay)
Popover · mobile · playful
Popover component — mobile, corporate (Patchbay)
Popover · mobile · corporate
Popover component — mobile, retro (Patchbay)
Popover · mobile · retro
Popover component — mobile, monochrome (Patchbay)
Popover · mobile · monochrome
Tooltip component — web, minimal (Tallyfold)
Tooltip · web · minimal
Tooltip component — web, editorial (Tallyfold)
Tooltip · web · editorial
Tooltip component — web, brutalist (Tallyfold)
Tooltip · web · brutalist
Tooltip component — web, luxury (Tallyfold)
Tooltip · web · luxury
Tooltip component — web, playful (Tallyfold)
Tooltip · web · playful
Tooltip component — web, corporate (Tallyfold)
Tooltip · web · corporate
Tooltip component — web, retro (Tallyfold)
Tooltip · web · retro
Tooltip component — web, monochrome (Tallyfold)
Tooltip · web · monochrome
Tooltip component — mobile, minimal (Tallyfold)
Tooltip · mobile · minimal
Tooltip component — mobile, editorial (Tallyfold)
Tooltip · mobile · editorial
Tooltip component — mobile, brutalist (Tallyfold)
Tooltip · mobile · brutalist
Tooltip component — mobile, luxury (Tallyfold)
Tooltip · mobile · luxury
Tooltip component — mobile, playful (Tallyfold)
Tooltip · mobile · playful
Tooltip component — mobile, corporate (Tallyfold)
Tooltip · mobile · corporate
Tooltip component — mobile, retro (Tallyfold)
Tooltip · mobile · retro
Tooltip component — mobile, monochrome (Tallyfold)
Tooltip · mobile · monochrome
Dropdown menu component — web, minimal (Fernway)
Dropdown menu · web · minimal
Dropdown menu component — web, editorial (Fernway)
Dropdown menu · web · editorial
Dropdown menu component — web, brutalist (Fernway)
Dropdown menu · web · brutalist
Dropdown menu component — web, luxury (Fernway)
Dropdown menu · web · luxury
Dropdown menu component — web, playful (Fernway)
Dropdown menu · web · playful
Dropdown menu component — web, corporate (Fernway)
Dropdown menu · web · corporate
Dropdown menu component — web, retro (Fernway)
Dropdown menu · web · retro
Dropdown menu component — web, monochrome (Fernway)
Dropdown menu · web · monochrome
Dropdown menu component — mobile, minimal (Fernway)
Dropdown menu · mobile · minimal
Dropdown menu component — mobile, editorial (Fernway)
Dropdown menu · mobile · editorial
Dropdown menu component — mobile, brutalist (Fernway)
Dropdown menu · mobile · brutalist
Dropdown menu component — mobile, luxury (Fernway)
Dropdown menu · mobile · luxury
Dropdown menu component — mobile, playful (Fernway)
Dropdown menu · mobile · playful
Dropdown menu component — mobile, corporate (Fernway)
Dropdown menu · mobile · corporate
Dropdown menu component — mobile, retro (Fernway)
Dropdown menu · mobile · retro
Dropdown menu component — mobile, monochrome (Fernway)
Dropdown menu · mobile · monochrome
Accordion component — web, minimal (Steadyfit)
Accordion · web · minimal
Accordion component — web, editorial (Steadyfit)
Accordion · web · editorial
Accordion component — web, brutalist (Steadyfit)
Accordion · web · brutalist
Accordion component — web, luxury (Steadyfit)
Accordion · web · luxury
Accordion component — web, playful (Steadyfit)
Accordion · web · playful
Accordion component — web, corporate (Steadyfit)
Accordion · web · corporate
Accordion component — web, retro (Steadyfit)
Accordion · web · retro
Accordion component — web, monochrome (Steadyfit)
Accordion · web · monochrome
Accordion component — mobile, minimal (Steadyfit)
Accordion · mobile · minimal
Accordion component — mobile, editorial (Steadyfit)
Accordion · mobile · editorial
Accordion component — mobile, brutalist (Steadyfit)
Accordion · mobile · brutalist
Accordion component — mobile, luxury (Steadyfit)
Accordion · mobile · luxury
Accordion component — mobile, playful (Steadyfit)
Accordion · mobile · playful
Accordion component — mobile, corporate (Steadyfit)
Accordion · mobile · corporate
Accordion component — mobile, retro (Steadyfit)
Accordion · mobile · retro
Accordion component — mobile, monochrome (Steadyfit)
Accordion · mobile · monochrome
Radio buttons component — web, minimal (Mintwell)
Radio buttons · web · minimal
Radio buttons component — web, editorial (Mintwell)
Radio buttons · web · editorial
Radio buttons component — web, brutalist (Mintwell)
Radio buttons · web · brutalist
Radio buttons component — web, luxury (Mintwell)
Radio buttons · web · luxury
Radio buttons component — web, playful (Mintwell)
Radio buttons · web · playful
Radio buttons component — web, corporate (Mintwell)
Radio buttons · web · corporate
Radio buttons component — web, retro (Mintwell)
Radio buttons · web · retro
Radio buttons component — web, monochrome (Mintwell)
Radio buttons · web · monochrome
Radio buttons component — mobile, minimal (Mintwell)
Radio buttons · mobile · minimal
Radio buttons component — mobile, editorial (Mintwell)
Radio buttons · mobile · editorial
Radio buttons component — mobile, brutalist (Mintwell)
Radio buttons · mobile · brutalist
Radio buttons component — mobile, luxury (Mintwell)
Radio buttons · mobile · luxury
Radio buttons component — mobile, playful (Mintwell)
Radio buttons · mobile · playful
Radio buttons component — mobile, corporate (Mintwell)
Radio buttons · mobile · corporate
Radio buttons component — mobile, retro (Mintwell)
Radio buttons · mobile · retro
Radio buttons component — mobile, monochrome (Mintwell)
Radio buttons · mobile · monochrome
Breadcrumbs component — web, minimal (Juniper Supply)
Breadcrumbs · web · minimal
Breadcrumbs component — web, editorial (Juniper Supply)
Breadcrumbs · web · editorial
Breadcrumbs component — web, brutalist (Juniper Supply)
Breadcrumbs · web · brutalist
Breadcrumbs component — web, luxury (Juniper Supply)
Breadcrumbs · web · luxury
Breadcrumbs component — web, playful (Juniper Supply)
Breadcrumbs · web · playful
Breadcrumbs component — web, corporate (Juniper Supply)
Breadcrumbs · web · corporate
Breadcrumbs component — web, retro (Juniper Supply)
Breadcrumbs · web · retro
Breadcrumbs component — web, monochrome (Juniper Supply)
Breadcrumbs · web · monochrome
Breadcrumbs component — mobile, minimal (Juniper Supply)
Breadcrumbs · mobile · minimal
Breadcrumbs component — mobile, editorial (Juniper Supply)
Breadcrumbs · mobile · editorial
Breadcrumbs component — mobile, brutalist (Juniper Supply)
Breadcrumbs · mobile · brutalist
Breadcrumbs component — mobile, luxury (Juniper Supply)
Breadcrumbs · mobile · luxury
Breadcrumbs component — mobile, playful (Juniper Supply)
Breadcrumbs · mobile · playful
Breadcrumbs component — mobile, corporate (Juniper Supply)
Breadcrumbs · mobile · corporate
Breadcrumbs component — mobile, retro (Juniper Supply)
Breadcrumbs · mobile · retro
Breadcrumbs component — mobile, monochrome (Juniper Supply)
Breadcrumbs · mobile · monochrome
Toggle switch component — web, minimal (Fernway)
Toggle switch · web · minimal
Toggle switch component — web, editorial (Fernway)
Toggle switch · web · editorial
Toggle switch component — web, brutalist (Fernway)
Toggle switch · web · brutalist
Toggle switch component — web, luxury (Fernway)
Toggle switch · web · luxury
Toggle switch component — web, playful (Fernway)
Toggle switch · web · playful
Toggle switch component — web, corporate (Fernway)
Toggle switch · web · corporate
Toggle switch component — web, retro (Fernway)
Toggle switch · web · retro
Toggle switch component — web, monochrome (Fernway)
Toggle switch · web · monochrome
Toggle switch component — mobile, minimal (Fernway)
Toggle switch · mobile · minimal
Toggle switch component — mobile, editorial (Fernway)
Toggle switch · mobile · editorial
Toggle switch component — mobile, brutalist (Fernway)
Toggle switch · mobile · brutalist
Toggle switch component — mobile, luxury (Fernway)
Toggle switch · mobile · luxury
Toggle switch component — mobile, playful (Fernway)
Toggle switch · mobile · playful
Toggle switch component — mobile, corporate (Fernway)
Toggle switch · mobile · corporate
Toggle switch component — mobile, retro (Fernway)
Toggle switch · mobile · retro
Toggle switch component — mobile, monochrome (Fernway)
Toggle switch · mobile · monochrome
Stepper component — web, minimal (Mintwell)
Stepper · web · minimal
Stepper component — web, editorial (Mintwell)
Stepper · web · editorial
Stepper component — web, brutalist (Mintwell)
Stepper · web · brutalist
Stepper component — web, luxury (Mintwell)
Stepper · web · luxury
Stepper component — web, playful (Mintwell)
Stepper · web · playful
Stepper component — web, corporate (Mintwell)
Stepper · web · corporate
Stepper component — web, retro (Mintwell)
Stepper · web · retro
Stepper component — web, monochrome (Mintwell)
Stepper · web · monochrome
Stepper component — mobile, minimal (Mintwell)
Stepper · mobile · minimal
Stepper component — mobile, editorial (Mintwell)
Stepper · mobile · editorial
Stepper component — mobile, brutalist (Mintwell)
Stepper · mobile · brutalist
Stepper component — mobile, luxury (Mintwell)
Stepper · mobile · luxury
Stepper component — mobile, playful (Mintwell)
Stepper · mobile · playful
Stepper component — mobile, corporate (Mintwell)
Stepper · mobile · corporate
Stepper component — mobile, retro (Mintwell)
Stepper · mobile · retro
Stepper component — mobile, monochrome (Mintwell)
Stepper · mobile · monochrome
Sidebar navigation component — web, minimal (Wardline)
Sidebar navigation · web · minimal
Sidebar navigation component — web, editorial (Wardline)
Sidebar navigation · web · editorial
Sidebar navigation component — web, brutalist (Wardline)
Sidebar navigation · web · brutalist
Sidebar navigation component — web, luxury (Wardline)
Sidebar navigation · web · luxury
Sidebar navigation component — web, playful (Wardline)
Sidebar navigation · web · playful
Sidebar navigation component — web, corporate (Wardline)
Sidebar navigation · web · corporate
Sidebar navigation component — web, retro (Wardline)
Sidebar navigation · web · retro
Sidebar navigation component — web, monochrome (Wardline)
Sidebar navigation · web · monochrome
Sidebar navigation component — mobile, minimal (Wardline)
Sidebar navigation · mobile · minimal
Sidebar navigation component — mobile, editorial (Wardline)
Sidebar navigation · mobile · editorial
Sidebar navigation component — mobile, brutalist (Wardline)
Sidebar navigation · mobile · brutalist
Sidebar navigation component — mobile, luxury (Wardline)
Sidebar navigation · mobile · luxury
Sidebar navigation component — mobile, playful (Wardline)
Sidebar navigation · mobile · playful
Sidebar navigation component — mobile, corporate (Wardline)
Sidebar navigation · mobile · corporate
Sidebar navigation component — mobile, retro (Wardline)
Sidebar navigation · mobile · retro
Sidebar navigation component — mobile, monochrome (Wardline)
Sidebar navigation · mobile · monochrome
Loading spinner component — web, minimal (Lumen Desk)
Loading spinner · web · minimal
Loading spinner component — web, editorial (Lumen Desk)
Loading spinner · web · editorial
Loading spinner component — web, brutalist (Lumen Desk)
Loading spinner · web · brutalist
Loading spinner component — web, luxury (Lumen Desk)
Loading spinner · web · luxury
Loading spinner component — web, playful (Lumen Desk)
Loading spinner · web · playful
Loading spinner component — web, corporate (Lumen Desk)
Loading spinner · web · corporate
Loading spinner component — web, retro (Lumen Desk)
Loading spinner · web · retro
Loading spinner component — web, monochrome (Lumen Desk)
Loading spinner · web · monochrome
Loading spinner component — mobile, minimal (Lumen Desk)
Loading spinner · mobile · minimal
Loading spinner component — mobile, editorial (Lumen Desk)
Loading spinner · mobile · editorial
Loading spinner component — mobile, brutalist (Lumen Desk)
Loading spinner · mobile · brutalist
Loading spinner component — mobile, luxury (Lumen Desk)
Loading spinner · mobile · luxury
Loading spinner component — mobile, playful (Lumen Desk)
Loading spinner · mobile · playful
Loading spinner component — mobile, corporate (Lumen Desk)
Loading spinner · mobile · corporate
Loading spinner component — mobile, retro (Lumen Desk)
Loading spinner · mobile · retro
Loading spinner component — mobile, monochrome (Lumen Desk)
Loading spinner · 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

Hero
Navigation header
Feature grid
Bento features
How it works
Logo cloud
Stats band
Testimonials
Pricing
Comparison table
Scored comparison table
Integrations grid
Security and trust
FAQ
CTA banner
About team
Careers
Blog index
Changelog
Contact form
Footer

Website templates

Casual dining website templates
Agency website templates
Architecture website templates
Wedding website templates
Ecommerce website templates
Cafe and coffee shop website templates
Salon website templates
Real estate agency website templates
Construction website templates
Law firm website templates
Dental website templates
Gym website templates
School and education website templates
Nonprofit website templates
Travel website templates
Hotel website templates
SaaS landing page templates
AI website templates
Medical website templates
Cardiology website templates
Dermatology website templates
Therapist website templates
Physical therapy website templates
Veterinary website templates
Financial advisor website templates
Cleaning service website templates
HVAC website templates
Cybersecurity website templates
CRM landing page templates
Coaching website templates
Pest control website templates
Solar website templates
AI agent website templates
Preschool website templates
Apartment community website templates
Pediatric website templates
Orthodontics website templates
Fertility clinic website templates
Hospital website templates
Mental health clinic website templates
Optometry website templates
Pharmacy website templates
Real estate agent website templates
Property management website templates
Luxury real estate website templates
Commercial real estate website templates
Vacation rental website templates
Home builder website templates
Bakery website templates
Pizzeria website templates
Bar and pub website templates
Catering website templates
Food truck website templates
Fine dining website templates

Browse by category, device and style

Sign-in & onboarding
Dashboards
Lists & data
Shopping & payments
Account & admin
Messages & media
Tools & AI
Industries
States & feedback
Emails
Staff & operations
Website sections
Website templates
UI components
Web UI
Mobile app UI
Minimal style
Editorial style
Brutalist style
Luxury style
Playful style
Corporate style
Retro style
Monochrome 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.

Save to board