About

The Component Gallery is a collection of interface components from real-world design systems. I created it to help with some of the problems that I experience every day as a front-end developer:

  1. There are some interface problems that have already been solved: there’s no need to reinvent the wheel every time you start a new project, when the hard work has already been done by someone else.
  2. Naming things is hard: If you don’t know what to call a thing, looking at what other people are calling similar things is a great place to start.

Caveat: Don’t assume that an opinion or technique is correct, just because it’s popular. Be wary of information cascades and, if you can, always base your decisions on research. Definitely don’t just copy what everyone else is doing.1 There’s lots of research out there already—look for design systems that give reasoning for decisions based on real research.

FAQs

What is a component?

A component is a single, reusable chunk of a user interface.

Why components?

“Components is a damn fine way to build a website”

Chris Coyier

Designing interfaces around components, specifically components from a design system, has a number of benefits:

  1. Consistency: Using a design system can help maintain a consistent "look and feel" across multiple interfaces.
  2. Reusability: Instead of building something from scratch, reusing something that's already been tried, tested, and proven to work can speed up development.
  3. A common language: Design systems can help all teams involved in a project communicate effectively, using a shared set of names for components that everyone understands.

Can a component contain other components?

Yes, a component can contain other components, in fact this nesting of components to build interfaces is fundamental to methodologies such as Atomic Design.

Are Web Components components?

Web Components are a collection of browser features and JavaScript APIs that allow developers to define custom elements by extending native HTML elements. Web Components aren't just another framework, they're a standardised way to build components that work across browsers and devices, without the need to load a large JavaScript library.

What about React/Vue/Angular/Svelte components?

Yup.

What’s the difference between a Design System and a Component Library?

A successful design system is way more than a website showing a few components, even if components often play an important part. A good design system is a constantly evolving set of shared practices, covering a wide range of topics including: colour palettes, typography, processes, accessibility, tooling and 'tone of voice'. Design systems also require a human element: without people using and contributing to the system, it will fail. The components themselves should be supported by guidance on how, when, and when not to use a component.

Are components just for websites?

Absolutely not: component-based User-Interface design was around long before websites existed; the examples on this website have collected from the web because it's the easiest place to find public design systems. There also exist design systems designed primarily for mobile or desktop applications, although by utilising frameworks such as React Native and Electron, components can be cross-platform with the same components used on a website, a mobile app or a desktop app.

How do I go about making a design system?

There are lots of great resources to help you get started; here are just a few:

Books

to be continued…