Design Systems Repo
PAID
Top design systems, tools, and documentation on Design Systems Repo—examples, enterprise lists, React and UX references. Open the site if the embed is limited.
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.
- Match your platform constraints: A marketing carousel pattern may not fit a data-heavy admin table without adaptation.
- Test accessibility yourself: Gallery screenshots do not replace keyboard, focus, and screen-reader validation in your build.
- 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
Have questions? We have answers.
Related tools
More tools from Learn & References.
Design principles
FREEProduct and digital design principles on principles.design—Airbnb, HubSpot, org design, web design system examples. Open the site if the embed is limited.
DesignSystems.com
FREEFigma’s design systems publication: articles, getting-started guides, Schema talks, design ops, and the Design Systems Repo; open the site if the embed is limited.
World Time Buddy
FREEWorld clock and time zone converter for comparing time zones at a glance and scheduling meetings across regions; open the site if the embed is limited.
Paper Sizes
FREEPaper sizes on papersizes.io—envelope dimensions, photo sizes, Legal, Tabloid, A5. Charts in mm and inches; open the site if the embed is limited.
Fluent 2 Design System
FREEMicrosoft Fluent 2 on fluent2.microsoft.design—Fluent UI components, iconography, cross-platform guidance. Open the site if the embed is limited.