Compound Components Pattern

This is the REQUIRED pattern for ALL UI components. Always use compound components by default.

When to Use This Pattern

Use this pattern for simple, presentational components where:

• Children don't need to share or modify state
• CSS coordination is the main concern
• Components are purely visual building blocks

For complex, stateful compound components (forms, dialogs with external actions, components where siblings need shared state), see the vercel-composition-patterns skill.

What are Compound Components?

Compound components are small, single-purpose components that compose together. Each component wraps exactly ONE HTML element and has ONE responsibility. They are combined like building blocks.

For more information, see the components.build docs.