Component

You might say

Turn this repeated product area into a component so one change updates every instance.

A component is a unit that groups a reusable piece of interface with the behavior it owns.For example, a product card can be shared by the home page, search results, and saved items when all show an image, price, and purchase action. An input field can also be a component. Components divide interface responsibility; not every tiny label needs to become one.

Know first

HTML

UI Component

How one product card is shared across pages

HomeCopied markup

WAVE

Noise-cancelling headphones¥ 899

Search resultsCopied markup

WAVE

Noise-cancelling headphones¥ 899

The same card is maintained twice.

What a component owns

Keep repeated responsibility together: A card's structure, styles, and click behavior can be maintained together, so a price format or button-label change does not require edits on three pages.

Pages compose components: A page arranges navigation, cards, and filters for its current task. The same component can receive different product data while retaining consistent interaction and appearance.

Control what components display with parameters: Components accept parameters (called Props in React) to control what they display. For example, a product card component receives product name, price, and image from the outside. When you tell AI "make this component accept a title parameter", you're describing Props.

Quick checkChoose the best answer

The event page, homepage, and search page all need cards with the same rules. Which approach makes later changes consistent?

Put the image, title, state, and click behavior in one event-card component, with each page passing its own dataCopy the card code into every page, then edit titles and buttons separatelyPut every page and feature into one component named Website

You can say this to an AI Agent

Turn the repeated event card into a component. Use it on the home, event, and search pages while keeping each page's image, title, and state as inputs. Afterward, check that the card looks and behaves consistently on all three pages.

Learn next

1State→2Responsive Design→

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.