Design Inspiration
UI Pattern and Component Galleries for Developers
Collect UI, Navbar Gallery, UX Snaps, Page Flows, Component Gallery, Mobbin: what each pattern gallery collects, how to search it, and what is free.
A UI pattern gallery answers one narrow question: how do real products build this one piece? Not "show me a nice website", but "show me forty navbars with a mega menu" or "show me how apps handle the second screen of onboarding". If you know the name of the component or flow you are stuck on, these are the sites to open. Component Gallery and Navbar Gallery are free and need no account. Mobbin and Page Flows have the deepest libraries of real app screens and flows, and both sell paid plans. Collect UI and UX Snaps sit in between: free, but with a different job each.
This is a companion to our list of design inspiration sites for developers, which covers whole-site galleries and moodboard tools. Here the unit is the component, the section, or the flow. Pricing and library sizes below were checked on October 18, 2026.
Component Gallery: how design systems build the same component
Component Gallery is different from everything else here. It does not collect screenshots of products. It cross-references components as they appear in public design systems, so one page shows you how dozens of systems built and named an accordion, a combobox, or a tooltip. The site lists 60 components, 95 design systems and 2,671 examples. It is a project by Iain Bean.
How to search it: press ⌘K and type the component, or browse the component list. Each component page lists its alternative names (an accordion is also a "collapsible", "disclosure" or "expander"), which is quietly the most useful feature: it tells you what to search for in every other library. Design systems are tagged by technology and by features such as code examples and accessibility notes.
Free or paid: there is no account and no paid tier on the site.
Use it when you are building a component yourself and want to read how mature design systems handle its states, naming and accessibility before you write the API. See Component Gallery in the catalog.
Navbar Gallery: navigation bars only
Navbar Gallery is a collection of website navigation bars from real sites, each with a screenshot and a link to the live site.
How to search it: by navbar type. The types are Static, Dropdown, Mega Menu, Side Bar, Search Bar, Announcement, Full Screen and Breadcrumbs, and each entry carries icon tags for the types it uses. There is no search box, so pick a type and scroll.
Free or paid: free to browse, no sign-up. The site is sponsored by Mobbin.
Use it when you are choosing between a dropdown and a mega menu, or need to see how other sites fit an announcement bar above the nav without crowding it. Always click through to the live site, because hover and mobile behavior are where navbars fail. See Navbar Gallery in the catalog.
The same idea exists for other single sections. Footer collects footers sorted by style (typographic, grid, illustrative, dark and more). CTA Gallery sorts calls to action by type: button, form, modal, newsletter, pricing and others, with industry and mode filters. 404s filters error pages by style, interaction and industry. All three are free to browse. In the catalog: Footer, CTA Gallery, 404s.
Collect UI: daily UI shots by category
Collect UI is a daily UI inspiration feed with a category index on top. You can browse by category, by trending, or by designer, and anyone can submit a design.
How to search it: go to Categories and pick the screen or component type rather than scrolling the daily feed. The feed is for browsing; the categories are what make it a reference.
Free or paid: free to browse. There is an optional daily email.
Use it when you want many visual takes on one screen type quickly. Keep in mind that these are designer submissions, so many are concepts rather than shipped screens: real content lengths, error states and empty states are often missing. Borrow the layout, then check it against a shipped example. See Collect UI in the catalog.
UX Snaps: breakdowns that explain why
UX Snaps publishes UI and UX breakdowns of real apps, explaining what a screen does and why it works. Posts come as a "Quick Read" or a "Deep Dive", and new breakdowns are added weekly.
How to search it: it is closer to a publication than a database. Browse the breakdowns and use the tags, or subscribe to the weekly newsletter.
Free or paid: the site describes itself as always free.
Use it when you have found a pattern elsewhere and want the reasoning behind it, or when you need to argue for a design decision with something better than "it looks good". See UX Snaps in the catalog.
Page Flows: complete user flows
Page Flows collects user flows from real products, step by step: onboarding, checkout and other tasks, on iOS and on the web.
How to search it: by flow type (for example, onboarding), or by product. Search by task when you are designing a process, and by product when a competitor already solved it.
Free or paid: it is a paid product; check its pricing page for current plans.
Use it when you are designing a multi-step process, such as a signup, an upgrade, or a cancellation, and need to know how many steps others take and what they ask for at each one. See Page Flows in the catalog.
Mobbin: the large library of shipped app screens
Mobbin is a searchable library of screenshots from shipped iOS and web apps, grouped into apps, sites, screens, flows, animations and UI elements. Its homepage lists 621,500 screens, with new ones added every week. It also offers an MCP connection so an AI agent can query the library, on Pro and Team plans.
How to search it: start from the UI element or screen type (paywall, settings, empty state) rather than the app name, then narrow down. Flows let you follow one task across screens, much like Page Flows.
Free or paid: you can join for free. Paid plans are Pro, Team and Enterprise, billed quarterly or yearly.
Use it when you want evidence from many shipped products at once, especially for mobile. If you design or build app UI weekly, this is the one paid subscription on the list that pays for itself. See Mobbin in the catalog.
One more for web sections: Kage
Kage indexes real product interfaces by component (navigation, hero, pricing table, FAQ, footer) with counts per component, and also by page type, style, industry, color and stack (Next.js, Tailwind CSS, Framer). It has a search page and can turn a design into a prompt for Claude Code, Codex or Cursor. See Kage in the catalog.
Side-by-side comparison
| Gallery | What it collects | How you search | Price |
|---|---|---|---|
| Component Gallery | Components across public design systems | ⌘K search, component list | Free |
| Navbar Gallery | Website navbars | By navbar type | Free |
| Footer, CTA Gallery, 404s | One web section each | By type, style, industry | Free |
| Collect UI | Daily UI shots, many concepts | Categories, trending, designers | Free |
| UX Snaps | Written breakdowns of real apps | Browse, tags, newsletter | Free |
| Page Flows | Step-by-step flows, iOS and web | Flow type, product | Paid |
| Mobbin | Shipped iOS and web screens and flows | Screens, UI elements, flows, apps | Free sign-up, paid plans |
| Kage | Real web sections by component | Component, style, stack, search | No pricing listed |
Find a pattern in 5 minutes
This is the routine we use when a component is blocking a build.
- Name it (30 seconds). Write the component or flow in two or three words: "mega menu", "cancel subscription flow", "empty state with import". If you cannot name it, look it up in Component Gallery first; the alternative names tell you what other sites call it.
- Pick one source by unit (30 seconds). A single web section goes to Navbar Gallery, Footer, CTA Gallery or Kage. A component you are building from scratch goes to Component Gallery. A screen in an app goes to Mobbin. A multi-step process goes to Page Flows. One source, not five.
- Collect five real examples (2 minutes). Filter to the pattern, skip anything that looks like a concept, and save five shipped examples. Five is enough to see what is standard; twenty turns into browsing.
- Write down what they share (1 minute). Order of elements, number of steps, where the primary action sits, what happens on mobile. The shared parts are the convention users expect; the odd one out is either a mistake or an idea.
- Sketch your version (1 minute). Rebuild the structure in your own design system and tokens. Keep the convention, change the surface.
FAQ
What is Collect UI?
Collect UI is a free daily UI inspiration site with a category index, trending page and designer profiles. Use the categories to see many takes on one screen type. Many shots are designer concepts, so check the layout against a shipped product before you build it.
What is Navbar Gallery?
Navbar Gallery is a free collection of website navigation bars from real sites, browsable by type: static, dropdown, mega menu, sidebar, search bar, announcement, full screen and breadcrumbs. Each entry links to the live site so you can test hover and mobile behavior.
What is UX Snaps used for?
UX Snaps publishes free, weekly breakdowns of real apps that explain why a screen works. Use it for the reasoning behind a pattern, not for raw volume of examples.
Is Page Flows free?
It is a paid product, so check its pricing page for what each plan includes before you subscribe.
What is the Component Gallery?
Component Gallery (component.gallery) compares how public design systems build and name the same UI component, with examples for each. It is free and is the best starting point when you are writing a component rather than choosing a layout.
Mobbin or Page Flows?
Mobbin if you want breadth: a very large library of shipped screens, UI elements and flows. Page Flows if your problem is one multi-step process and you want to study it step by step. Mobbin lets you join for free; Page Flows is a paid plan.
Every gallery here, plus the whole-site ones, is in the inspiration gallery with screenshots, so you can pick the right source before you open a single tab.