Fluent 2 Design System
FREE
Microsoft Fluent 2: cross-platform components, iconography, Android patterns, and accessibility guidance on fluent2.microsoft.design in the browser.
Web design components from real design systems
Tool powered by Component Gallery on Component Gallery.
Browse webpage components and design system examples: carousel, tabs, accordion, dropdown, and color picker UI patterns on component.gallery in the browser.
What is Component Gallery?
Component Gallery (https://component.gallery/) is a curated index of interface patterns collected from published design systems. Designers searching for carousel website examples, tabs web design references, accordion website examples, or a color picker UI comparison often land here because each pattern links to real product implementations—not generic mockups. This site does not host the gallery or edit its entries.
What Component Gallery offers
Cross-system references for carousel, tabs, accordion, dropdown, color picker UI, and other web design elements.
Carousel and horizontal sliders
Compare carousel web design and in-page slider patterns across systems before you spec motion and breakpoints.
Tabs and segmented navigation
Review website design tabs and tab flows when information architecture needs clear sections.
Accordions, dropdowns, and menus
Study accordion website examples plus drop down menu patterns for FAQs, filters, and compact action lists.
Color picker UI and progress status
See how teams expose color picker UI in forms, plus progress tracking bar and status patterns for loading and steps.
Design system directory
The /design-systems/ area lists top design systems and web design system resources for deeper reading.
Works beside the design-system tools
After research, compare hubs on /design-system-hub or listings like /design-systems-repo in the same category.
How to use Component Gallery
Turn gallery browsing into actionable specs—search by pattern, compare systems, document decisions.
Search by component name
Start from the pattern you are shipping—tabs, carousel, accordion, dropdown, color picker—not from a single brand.
Open the component.gallery route
Navigate directly to the relevant /components/… page when the iframe allows full browsing.
Compare three to five systems
Note interaction, content density, and accessibility cues—not only visual style.
Document decisions in your system
Capture chosen behavior and link out to references for design and engineering reviews.
Open component.gallery in a new tab if needed
Some flows work better outside the iframe when deep-linking or copying long URLs.
Tips for component research
Use references without copying product-specific details.
- 01
Match your platform constraints
A marketing carousel pattern may not fit a data-heavy admin table without adaptation.
- 02
Test accessibility yourself
Gallery screenshots do not replace keyboard, focus, and screen-reader validation in your build.
- 03
Keep a short shortlist
Too many references slow decisions; prefer a few strong examples per pattern.
Who this is for
Teams building or maintaining interface libraries.
Design system leads
Benchmark carousel, tabs, and form controls before you publish system guidance.
Product and UX designers
Explore webpage components when wireframing new flows or refactoring navigation.
Front-end engineers
Align component APIs and states with patterns users already recognize from other products.
Content and research teams
Support pattern audits with a structured index instead of ad-hoc competitor screenshots.
Why open Component Gallery
Directory placement without replacing the official site.
Stable directory path
Link `/component-gallery` in specs; Hero attribution points to component.gallery.
Near other design-system routes
Continue to /design-system-hub or /design-systems-repo without losing research context.
does not curate the index
Entries and screenshots update on Component Gallery; we link to and document honest use.
Frequently Asked Questions
Quick answers about this tool—open a question to read more.
Related tools
More tools from Learn & References.
Checklist Design
FREEWebsite, web design, and UX checklists for pages, components, and flows. Signup, login, accordion, toggle, and full site reviews on checklist.design.
Design System Hub
FREECurated design systems from Apple, Ant Design, Shopify Polaris, and more—UX inspiration, component libraries, and best practices.
DesignSystems.com
FREEDesignSystems.com: create a design system, grid systems, spacing, iconography, and examples from Airbnb and more. Open if embed is limited.
Design Systems Repo
PAIDDesign Systems Repo: tools, docs, and examples—top design systems, enterprise lists, React systems, and UX design system samples.
Tubik Blog
FREETubik Blog: graphic design examples, illustration styles, UX keywords, and web design case studies from blog.tubikstudio.com in the browser.