Component API for Styling: Props, Slots, and CSS Variables

A component's styling surface is how consumers change its look: variants (props), slots (structure), and overrides (CSS variables or classes). Design it so the component stays maintainable and consumers don't depend on internal markup. This post covers patterns for senior frontends.

Variant props

Variants are predefined looks (e.g. size="sm", variant="primary"). The component maps them to internal classes or CSS custom properties. Consumers pick from a small set; you control the implementation.