# UI Component (User Interface Component)

URL: https://softwaredictionary.org/terms/ui-component
Category: Web Development
Last updated: 2026-10-05
In Turkish: UI Bileşeni

In short: A UI component is a self-contained, reusable piece of an interface, such as a button, a form or a card, that bundles its markup, style and behavior.

## What is a UI component?

Modern interfaces are built from components: small pieces that each draw one part of the screen and can be combined into bigger ones. A button, a search box and a product card are components, and a page is a component made of many others. Each component takes inputs, often called props, and renders the same way for the same inputs, so it can be reused in many places.

A component bundles what belongs together: its markup, its styles and its behavior, such as what happens on a click. In React, Vue, Svelte and Angular, a component is a function or a file that returns markup; the browser's own Web Components standard lets you define custom HTML elements such as `<user-card>` that work with or without a framework. A component can keep its own state, such as whether a menu is open, and pass data down to the components inside it.

Components work like building blocks: each has a clear shape and a few ways to connect, and the same block turns up in many places. Teams collect their components in a design system or component library, so that a button looks and works the same on every page. A good component does one job, takes only the inputs it needs and can be tested on its own.

## Key takeaways

- A UI component is a reusable, self-contained piece of an interface.
- It takes inputs, called props, and renders its markup, styles and behavior from them.
- Pages are built by nesting components inside each other.
- Design systems collect components so they look and work the same everywhere.

## Example: One small component, reused with different inputs

```jsx
function Badge({ label, tone = "neutral" }) {
  return <span className={`badge badge-${tone}`}>{label}</span>;
}

function ProductStatus({ product }) {
  return (
    <p>
      {product.isNew && <Badge label="New" tone="success" />}
      {product.stock === 0 && <Badge label="Sold out" tone="danger" />}
    </p>
  );
}
```

## Frequently asked questions

**What is the difference between a component and a module?**

A module is a unit of code: a file that exports functions or values. A component is a unit of interface: something that draws part of the screen. A component usually lives in a module, but many modules, such as one full of date helpers, contain no components.

**What are props?**

Props, short for properties, are the inputs a parent passes to a component, like arguments to a function. A component reads its props but doesn't change them; a value that changes over time belongs in its own state.

## Sources

- [React documentation: Your First Component](https://react.dev/learn/your-first-component)
- [MDN: Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)

---

Software Dictionary: https://softwaredictionary.org/ · https://softwaredictionary.org/llms.txt