Applying families to components

A colour family is the one-click way to style a component. The per-part override is the escape hatch — not the default path.

Apply a family

On a component (Developer/Designer view), use Apply family and pick one. The control recommends Component families for the interactive element and lists Surface families under "less common." The component restyles instantly, because it now references that family's variables.

A family like ghost or tertiary has no native shadcn variable of its own — it only takes effect when applied to a component. That's exactly why apply exists.

Override a part

Once a family is applied, override any single part — background, foreground, or border — without touching the family:

• Scope. Choose this instance only or all of this variant (e.g. every Primary button).
• Revert. An overridden part is marked; Revert restores the family value.

Overrides live on the component, never on the family, so the family stays the single source of truth and your override is always reversible.

Deleting a family that's in use

If you delete a family that's applied to one or more components, Tostada asks which family to fall back to first, then re-points those components — so a delete can never silently break a component.