Docs
Base components
What are base components?
You know, the stuff in the pink containers.
As you browse the components, you might see that some of them have a little friend chilling in a pink, container below them. These are called base components.
Think of them as the "single source of truth" for the main component's structure. Their real purpose is to make component-wide updates fast and easy.
Any structural change you make to the base component — like changing the color or adjusting internal constraints — will instantly apply to every single variant built from it. It’s incredibly powerful.
Naming & visibility
We use a specific naming convention for base components called dot notation (.base /).
The period "." tells Figma to hide the component when the library is published. This is intentional. It prevents designers from using the base structures.
.base / breadcrumb / level
