“Headless” in React refers to a design pattern where UI components are separated into two parts:

  1. Logic/State Management - The “headless” part that handles all the business logic, state, and behavior
  2. UI/Presentation - The visual components that you style and customize

​
How Headless Components Work

Headless components provide all the functionality without any default styling or visual elements. They give you:

  • Data processing
  • State management
  • Business logic

But leave the UI completely up to you.

The hardest parts of building complex UIs usually revolve around state, events, side-effects, data computation/management. By removing these concerns from the markup, styles and implementation details, our logic and components can be more modular and reusable.

— TanStack