SuperAPI AI Directory
Partner with us中文AI newsFavorites
All toolsAI designThe Component Gallery

The Component Gallery

The Component Gallery is a continuously updated reference library of interface components, with content based on real examples from various design systems, intended for anyone building user interfaces. The site brings together 60 components, 95 design systems, and 2,671 examples to help users understand the definitions, aliases, and practical usage of common interface components. For example, a carousel (Carousel / Content slider) is used to display one or more content slides at a time, with navigation controlled by swiping, scrolling, or buttons; a tree view (Tree view) is used to display nested hierarchical information; a popover (Popover) pops up above other elements, is usually triggered by a click, and can contain interactive elements; rating (Rating) lets users view or set a star rating; an accordion (Accordion) is a collapsible vertical stack of headings; quote (Quote) is used to display quotations from others or from the current document; pagination (Pagination) is used to split information across multiple pages and navigate between them; tabs (Tabs) are used to switch between multiple panels. The site also lists numerous design systems and their tech stacks and features, such as Polaris, Elastic UI framework, Sainsbury's Design System, Ariakit, SubZero, Web Awesome, Red Hat design system, HeroUI, covering technologies such as Figma, React, Web Components, CSS-in-JS, Tailwind CSS, Sass, and provides code examples, usage guidelines, accessibility, tone, and other entries.

Open website

About this tool

The Component Gallery is an interface component reference library, positioned as a reference resource for anyone building user interfaces. Its content is based on examples from the world of design systems and is kept up to date.

Purpose The site is intended to serve as a reference for interface components, helping users understand the names, meanings, and usage of common components.

Scale and Content According to the official text, the site includes 60 components, 95 design systems, and 2,671 examples.

Component Examples The site provides definitions and aliases for components. The following are the components explicitly listed in the official text:

  • Carousel (Carousel / Content slider): a way to display multiple content slides at a time (one or more), with navigation between slides controlled by swiping, scrolling, or buttons.
  • Tree view (Tree view): used to display nested hierarchical information, such as directories or directory structures.
  • Popover (Popover): an element that pops up above another element; unlike a tooltip, it is usually triggered by a click rather than hover, and can contain interactive elements.
  • Rating (Rating): lets users view and/or set a star rating for a product or other item.
  • Accordion (Accordion): aliases include Arrow toggle, Collapse, Collapsible sections, Collapsible, Details, Disclosure, Expandable, Expander, ShowyHideyThing. It is a vertical stack of interactive headings used to toggle the display of more information; each item can be "collapsed" to show only a short label, or "expanded" to show the full content.
  • Quote (Quote): aliases Pull quote, Block quote. Used to display a quotation, which can come from a person or another external source, or to highlight a passage within the current document (pull quote).
  • Pagination (Pagination): the process of splitting information across multiple pages instead of displaying it all on a single page; it is also used to refer to the interface component that navigates between these pages.
  • Tabs (Tabs): alias Tabbed interface. A way to navigate between multiple panels, reducing clutter and fitting more content into a smaller space.

Design System Examples The site includes and lists design systems along with their related links, tech stacks, and features. Entries explicitly listed in the official text include:

  • Polaris: associated with Figma, Shopify, technology is Web Components, features include Code examples, Usage guidelines, Accessibility, Tone of voice.
  • Elastic UI framework: linked to GitHub and Figma, technologies are React, CSS-in-JS, features include Code examples, Open source.
  • Sainsbury's Design System: linked to Storybook, technologies are React, Sass, features include Usage guidelines, Code examples, Tone of voice.
  • Ariakit: linked to GitHub, technology is React, features include Code examples, Open source, Accessibility.
  • SubZero: linked to Storybook, Figma, belongs to Axis Bank, features include Accessibility issues.
  • Web Awesome: linked to GitHub, technology is Web Components, features include Open source, Code examples.
  • Red Hat design system: linked to GitHub, technology is Web Components, features include Code examples, Usage guidelines.
  • HeroUI: linked to GitHub, technologies are React, Tailwind CSS, features include Code examples, Open source.

How to use Specific usage steps or operating instructions are not provided in the official text, so they are not currently available.

Applicable scenarios The official text states that it is intended for anyone building user interfaces and can serve as a reference for interface components.

Limitations The official text does not provide information such as fees, pricing, platform restrictions, or performance guarantees, so these are not currently available.

Related tools

Browse category