The Component Gallery: Jouw Go-To Resource voor Interfacecomponenten

Welkom bij The Component Gallery! Deze site is ontworpen als dé referentie voor iedereen die component-gebaseerde user interfaces bouwt. Dit up-to-date archief laat een scala aan interfacecomponenten zien, geïnspireerd door voorbeelden uit de wereld van design systems.

Recent Bijgewerkte Componenten

Popover

Voorbeelden: 45
Een element dat verschijnt vanuit een ander element bovenop andere content; het verschilt van een tooltip omdat het meestal wordt geactiveerd door te klikken in plaats van te hoveren en kan interactieve elementen bevatten.

Rating

Voorbeelden: 17
Met ratings kunnen gebruikers een sterbeoordeling geven aan een product of item.

Accordion

Voorbeelden: 102
Andere namen: Arrow toggle, Collapse, Collapsible sections, Details, Disclosure, Expandable. Een accordion is een verticale stapel interactieve koppen die je kunt gebruiken om meer informatie te tonen of te verbergen; elk item kan 'ingeklapt' worden met een kort label zichtbaar of 'uitgeklapt' worden om de volledige content te tonen.

Quote

Voorbeelden: 14
Andere namen: Pull quote, Block quote. Quotes worden gebruikt om een citaat weer te geven: ofwel van een persoon of een andere externe bron, of om een passage uit het huidige document te benadrukken.

Pagination

Voorbeelden: 58
Pagination is het proces van het splitsen van informatie over meerdere pagina's in plaats van alles op één pagina te tonen; ook de naam voor het interfacecomponent dat gebruikt wordt om tussen deze pagina's te navigeren.

Tabs

Voorbeelden: 85
Andere namen: Tabbed interface. Tabbed interfaces zijn een manier om tussen meerdere panelen te navigeren, waardoor je rommel kunt verminderen en meer in een kleinere ruimte kunt passen.

Button

Voorbeelden: 136
Knoppen activeren een actie zoals het indienen van een formulier of het tonen/verbergen van een interfacecomponent.

Breadcrumbs

Voorbeelden: 51
Andere namen: Breadcrumb trail. Een lijst met links die de locatie van de huidige pagina in de navigatiestructuur toont.

Bekijk Alle Componenten

Recent Bijgewerkte Design Systems

• Nessie

  • Nederlandse Spoorwegen
  • Nessie op Storybook
  • Tech: Web Components, Tailwind CSS

• PatternFly

  • Red Hat
  • PatternFly op Figma
  • PatternFly op GitHub
  • Tech: React, Sass

• Morningstar Design System

  • Morningstar Design System op Storybook
  • Tech: Vue

• Cedar

  • Recreational Equipment, Inc.
  • Cedar op GitHub
  • Tech: Vue, Sass, CSS Modules

• Headless UI

  • Tailwind Labs
  • Headless UI op GitHub
  • Tech: React, Vue

• Gestalt

  • Pinterest
  • Gestalt op GitHub
  • Tech: React, CSS

• Geist Design System

  • Vercel
  • Tech: React

• Pajamas

  • GitLab
  • Pajamas op Figma
  • Pajamas op GitLab
  • Pajamas op Storybook
  • Tech: Vue

Conclusie

The Component Gallery is een must-have tool voor designers en developers die hun user interfaces willen verbeteren met goed ontworpen componenten. Of je nu een nieuwe applicatie bouwt of een bestaande update, dit archief biedt een schat aan resources om je workflow te stroomlijnen en de gebruikerservaring te verbeteren.