A headless component provides **behavior, state, and accessibility logic without forcing a specific visual design**. The main idea is to separate: ```text How a component behaves ``` from: ```text How a component looks ``` ### Traditional Styled Component Imagine a dropdown component that hardcodes everything: ```jsx function Dropdown() { return (

...

); } ``` It may provide useful behavior, but consumers have limited control over its appearance and structure. ### Headless Approach A headless implementation can expose behavior through a Hook: ```jsx function useDropdown() { const [open, setOpen] = useState(false); function toggle() { setOpen((value) => !value); } function close() { setOpen(false); } return { open, toggle, close }; } ``` A consumer decides how to render it: ```jsx function CustomDropdown() { const { open, toggle, close } = useDropdown(); return (

{open && (

)}

); } ``` The reusable logic does not dictate colors, spacing, or branding. ### Headless Components Can Use Compound Components Too A headless API might look like: ```jsx Options Edit Delete ``` Internally it could provide: ```text Open/close state Keyboard navigation Focus management ARIA attributes Outside-click handling ``` while consumers provide their own [CSS](/courses/css). ### Why Headless Components Are Useful They are especially useful for: ```text Design systems Component libraries White-label products Applications with custom branding Reusable accessible primitives ``` The same behavior can power completely different visual designs. ### Headless Does Not Mean Logic-Free In fact, a headless component may contain significant behavior: ```text Focus management Keyboard interaction Accessibility State coordination Positioning logic Selection logic ``` What it intentionally avoids is imposing visual presentation. ### Headless Component vs Custom Hook A custom Hook is one possible way to build headless behavior: ```jsx const dropdown = useDropdown(); ``` but headless design is a broader architectural idea. A headless API could use: ```text Custom Hooks Compound Components Render Props Context ``` as long as behavior and presentation remain sufficiently separated. ### Tradeoff Headless components give consumers more flexibility, but they also require consumers to provide more presentation work. Compare: ```text Fully styled component → faster to use → less visual freedom Headless component → more setup/styling → much greater design freedom ``` ### Interview-Ready Answer A headless component provides reusable behavior, state, and often accessibility logic without enforcing a particular visual design. Consumers control the markup and styling while reusing the underlying behavior. Headless patterns are especially useful for design systems and reusable component libraries and can be implemented using custom [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback), compound components, Context, or render props.