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
Accordion
57 examples
Other names: Collapsible sections, Arrow toggle, Expander, Disclosure, Details, 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 complete content.
Quote
8 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
34 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
49 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
82 examples
Buttons trigger an action such as submitting a form or showing/hiding an interface component.
Breadcrumbs
32 examples
Other names: Breadcrumb trail
A list of links showing the location of the current page in the navigational hierarchy.
Rich text editor
2 examples
Other names: RTE, wysiwyg editor
An interface for editing “rich text” content (i.e. with formatting), usually through a WYSIWYG interface.
Button group
22 examples
Other names: Toolbar
A wrapper for multiple, related buttons.
Recently updated Design Systems
Decathlon Design System
- Usage guidelines
- Code examples
- Accessibility
Radix Primitives
Modulz
- Code examples
ONS Design System
Office for National Statistics
- Code examples
- Usage guidelines
- Accessibility
giffgaff design system
- Usage guidelines
- Code examples
Oxygen
Repsol
- Code examples
- Usage guidelines
NHS Digital service manual
- Code examples
- Usage guidelines
- Research
- Tone of voice
No Style Design System
NewsKit
News Corp
- Code examples
- Usage guidelines