Component Details Panel

Clicking on any component opens the Component Details Panel — a side drawer that gives you full structural visibility into that component. It is organized into three tabs: Overview, Relations, and Tokens. It opens on Overview. The component’s health score is a card on Overview, and a click on it opens the full health breakdown in a panel of its own.

Component Details Drawer

Header and Footer

At the top and foot of the drawer, Grails provides origin and navigation controls depending on whether you are inspecting a Figma component or a code component:

Figma / Code switch — at the top, for a component matched with its code. It opens on the side you clicked, and lets you switch between Design and Code inside the same drawer.
On the Design side (Figma):
- Snowflake — a chip under the component’s name, when the component lives in a Figma file that is not a library.
- Remote ID — at the foot of the panel.
- File — below the Remote ID: the name of the component’s Figma file, when Grails knows it. The name links to the file in Figma when the real key is known.
- Open in Figma — below the File line, when there is a link to open.
On the Code side:
- Source details — at the top, the component’s file path in the repository (e.g. src/components/Button.tsx), the repository name, the short commit hash, and the export name.
- Open in the repository — a link that opens the file directly on GitHub at that commit, or opens the repository.

Overview Tab

The Overview tab is the primary view for inspecting a component’s structural definition and parameters, and how healthy it is.

Header Stats

At the top you find a row of cards:

Properties — total number of defined properties.
Variants — total number of designed variant combinations (on Figma component sets).
Health · CHI — the component’s Component Health Index: its score from 0 to 100 and its status (optimal, good, monitor or poor), in the colour of its band — green is healthy, amber warrants attention, red needs work. The card is a button: click it to open the health panel with the full breakdown (see below). On a phone the card takes the row under the other two.

If the component has no score yet, the card is muted and says why instead of showing a number: a component without structural data yet has no CHI, and one scored by an older version of the CHI engine shows “CHI score available after re-sync”. Syncing it from the Figma plugin (Design) or running grails-cli sync in the repository (Code) calculates it. A muted card has no click, since there is nothing to open. When you look at an older version of a component, the card shows that version’s score and does not open the health panel, which reads the current component.

Consolidated Properties List

Every property the component exposes is listed here. Grails supports properties captured from Figma and from code:

Type	Description
Variant	Categorical property with a fixed set of string values (e.g., `size = sm / md / lg`).
Boolean	An on/off toggle (e.g., `hasIcon = true / false`).
Text	An editable text string (e.g., `label = "Button"`).
Instance Swap / Slot	A slot that accepts a different component as content (e.g., an icon slot).
Number	A numeric property value.

Differences Between Design and Code

Design side: If the component is a component set, an interactive Variant Switcher lets you navigate between different variant states and inspect specific property values. A Modes section displays active variable modes (e.g., Light/Dark, Brand A/Brand B).
Code side: The code drawer does not need an interactive variant switcher or preferred values picker. Instead, it includes a Stories section at the end of the tab, listing the stories defined for this component in the repository.

Relations Tab

The Relations tab maps the dependency graph of the component — both inward (what it relies on) and outward (what relies on it) — and the patterns built with it.

Uses

Lists every component nested inside or rendered by this component, along with usage counts:

On the Figma side, each one is a link that opens its own drawer.
On the Code side, components declared within the repository are buttons that open their respective drawer. Components from external packages or not yet synced in the repository are grouped in a separate section with a dashed outline without drawer links.

If a component it uses changes its API (e.g., a renamed property), that change can propagate upward and affect this component’s behavior.

Used in

Lists every parent component that uses this component. This reverse-lookup is essential when evaluating the blast radius of a breaking change — if you modify a base component like Icon, you can instantly see all the components that depend on it.

Patterns

Lists the patterns built with this component, nearest first. Under each pattern’s name, a line says how it uses the component:

Uses it directly — one of the pattern’s sections draws the component.
Through a component — the pattern draws a component that uses this one.
Inside a pattern — the pattern contains another pattern that uses it.

A pattern that is not published yet is marked Draft. Click a pattern to open its page. The list is read the first time you open the tab, not when the panel opens, so you see “Loading patterns…” for a moment. If it could not be read, the tab says so; it never says “Not used in any pattern.” unless it checked and found none. The same section is on the Code side, for the patterns that use the matched component.

Used in stops at the direct parents. To follow the whole chain of what depends on the component, level by level, open the Graph tab of the component’s page in Docs.

Tokens Tab

The Tokens tab lists every design token bound to this component, organized by collection or family.

Token Adherence

At the top, a card shows the component’s Token Adherence: the percentage of its style values that use a token (or, on the Design side, a Figma style) instead of a hardcoded value. A bar draws the percentage — green from 75%, amber from 40%, red below — and a line counts what was measured (e.g., “19 of 20 style values use tokens or styles”), plus how many values at exactly zero were left out of the count. A component with no style values counts as fully adherent.

Inspect anatomy in Docs opens the component’s page in Docs on its Anatomy tab. From the Code side it opens the code side of that Anatomy. The card is not drawn for a component without a current score, and an older version of a component has no link, since the page shows the current one.

What You’ll See

Collection grouping — tokens are grouped by their variable collection or category (e.g., Colors, Spacing, Typography). When a collection has more than one mode, it displays an N Modes badge.
Alias path & Resolved value — shows the semantic alias chain and the final computed value (hex color, pixel value, etc.).
Color swatch — an inline preview for color tokens. A colour with opacity shows the hex of the underlying colour alongside the percentage (e.g., #000000 50%).
Interaction — on the Figma side, clicking a token opens its variable drawer. On the Code side, token rows are display-only since code tokens do not have individual variable drawers.
Code side details — on the Code side, token rows include a Used by line (e.g., Used by Button backgroundColor · padding.top) specifying which element and properties use the token, followed by a dedicated Hardcoded section listing raw literals (hex values, static paddings) flagged with dashed underlines.

Health Panel (Component Health Index)

The Health · CHI card on the Overview tab opens the health panel, with the component’s Component Health Index score and a detailed breakdown of its metrics:

Token Adherence — percentage of visual values properly bound to design tokens instead of hardcoded.
Complexity — structural layer depth and nesting evaluation.
Variant Grid & Toggles — structural API surface assessment.
Design Coverage — on code components, measures how well the component is exercised by stories in the repository. When a code component has no stories, Design Coverage displays a dash (–) / Not applicable, as there is nothing to measure from.

On the Design side the panel also says whether the component has a description and documentation sections. Metrics that need attention have a How to fix suggestion. The explanatory text and guidance adapt automatically to whether you are inspecting a design component from Figma or a code component from a repository. For the full story of the score, see the Component Health Index.