Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.
Recently updated components
Popover
45 examples
An element that pops up from another element over other content; it differs from a tooltip in that it is usually triggered via click instead of hover and can contain interactive elements.
Rating
17 examples
Ratings let users see and/or set a star rating for a product or other item.
Accordion
101 examples
Other names: Arrow toggle, Collapse, Collapsible sections, Collapsible, Details, Disclosure, Expandable, Expander, ShowyHideyThing
An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
Quote
14 examples
Other names: Pull quote, Block quote
Quotes are used to display a quotation: either from a person or another outside source or to highlight a passage of the current document (a pull quote).
Pagination
58 examples
Pagination is the process of splitting information over multiple pages instead of showing it all on a single page; also the name for the interface component used for navigating between these pages.
Tabs
84 examples
Other names: Tabbed interface
Tabbed interfaces are a way of navigating between multiple panels, reducing clutter and fitting more into a smaller space.
Button
135 examples
Buttons trigger an action such as submitting a form or showing/hiding an interface component.
Breadcrumbs
50 examples
Other names: Breadcrumb trail
A list of links showing the location of the current page in the navigational hierarchy.
Recently updated Design Systems
Tech
- React
- Sass
Features
- Tone of voice
- Open source
- Usage guidelines
Cedar
Recreational Equipment, Inc.
Tech
- Vue
- Sass
- CSS Modules
Features
- Usage guidelines
- Code examples
- Open source
Tech
- Vue
Features
- Usage guidelines
- Code examples
- Open source
Tech
- React
- CSS-in-JS
Features
- Code examples
- Usage guidelines
- Open source