Component Instance
A copy of a component that stays connected to its source, so a change at the source reaches every place the component is used.
An instance is a live reference, not a copy. Change the source component and every instance updates. That single property is what makes a design system worth maintaining: a fix to a button's focus state propagates instead of being reapplied 400 times. Instances accept overrides — text, visibility, variant — which is how one component serves many contexts without forking.
Detaching is the decision that undoes it. A detached instance looks identical the day it is made and diverges silently from then on: it misses the accessibility fix, the token update, the spacing correction. Most detaches happen because the component lacked a property somebody needed. That is a signal to add the property, not to cut the link — and a design file with many detached instances is a design system with a coverage problem, not a discipline problem.
In practice
An audit of a product's design files found 140 detached button instances. Tracing them showed 90% were detached to change one thing: icon position. Adding an `iconPosition` variant to the source component removed the reason, and the next focus-state fix reached every screen instead of most of them.
Where teams get it wrong
- Detaching to make one small change, which silently opts out of every future fix.
- Treating frequent detaching as a discipline problem rather than a missing component property.
- Overrides so numerous that the instance no longer resembles its source.
- Nested instances several levels deep, where nobody can tell what is overriding what.
- Design-file components that have drifted from the coded ones, so the link is an illusion anyway.
( Learn more )
Related terms
All terms- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.
- Component LibraryA shared, versioned set of reusable interface components that designers and engineers build from instead of recreating elements per screen.
- Design TokenA named variable holding one design decision — a colour, spacing step, radius or type size — so the value can change everywhere from one place.
- Atomic DesignA methodology organising an interface into five levels — atoms, molecules, organisms, templates and pages — so components compose predictably.