Inventory
One row per construct that earns a page — 125 of 870 join rows — sorted by how often the product uses it, most first. It is the page to open when you do not yet know what you are looking for, and the usage column is the honest answer to which of these matter: the top is what the product is genuinely built from, and the bottom is used once or never.
**A construct earns a page if it is a React library module, or declares a .c-* class root, or has a Storybook module.** Union, not intersection. An intersection would be a coverage finding rather than an existence test, and a construct missing from this list is a gap nobody can see.
The 745 excluded rows are local application components: real code, and not design system.
Compound members are not rows either. A member is attached to a parent component and cannot be imported on its own, so it is named on its parent's page under Members rather than listed here.
Each row ticks or dashes the five axes, so a column can be scanned for gaps instead of opening pages one at a time. A dash records an absence and does not diagnose it — a component with no Figma entry may not need one.
| construct | react | css | story | figma | guidance | uses |
|---|---|---|---|---|---|---|
Table | library | .c-table | ✓ | — | ✓ | 752 |
Button | library | .c-button | ✓ | ✓ | — | 626 |
Box | library | .c-box | ✓ | — | — | 494 |
Link | local | .c-link | — | — | — | 311 |
Form | local | .c-form | ✓ | — | ✓ | 310 |
c-side-nav | — | .c-side-nav | — | — | ✓ | 274 |
Page | library | — | ✓ | — | — | 234 |
Tooltip | library | — | ✓ | — | — | 225 |
c-heading | — | .c-heading | — | — | — | 213 |
Icon | library | .c-icon | ✓ | ✓ | ✓ | 151 |
InlineCode | library | .c-inline-code | ✓ | — | — | 116 |
Overlay | library | .c-overlay | — | — | ✓ | 111 |
HighlightedCodeWithActions | library | — | ✓ | — | — | 108 |
DescriptionList | library | .c-description-list | ✓ | — | — | 92 |
FormLabel | library | — | — | — | — | 90 |
FormField | library | — | — | — | — | 89 |
FormattedTime | local | — | ✓ | — | — | 88 |
c-pagebar | — | .c-pagebar | — | — | ✓ | 85 |
Message | library | .c-message | ✓ | ✓ | — | 84 |
ExternalLink | library | — | ✓ | — | — | 80 |
LoadingAnimation | library | — | — | — | — | 76 |
Badge | library | .c-pill | ✓ | ✓ | — | 73 |
DefaultRestChart | library | — | — | — | — | 70 |
Dropdown | library | .c-dropdown | ✓ | — | ✓ | 64 |
c-formv2 | — | .c-formv2 | — | — | — | 61 |
Input | library | — | — | — | — | 59 |
ButtonGroup | library | .c-button-group | ✓ | — | — | 53 |
FormattedDuration | local | — | ✓ | — | — | 52 |
IconBox | local | .c-icon-box | ✓ | ✓ | — | 44 |
BlankSlate | library | — | — | — | — | 43 |
HoverCard | library | — | ✓ | — | — | 41 |
Breadcrumbs | library | .c-breadcrumbs | ✓ | — | — | 38 |
c-p | — | .c-p | — | — | — | 38 |
Code | library | .c-code | ✓ | — | — | 32 |
FormattedFileSize | local | — | ✓ | — | — | 32 |
c-textfield | — | .c-textfield | — | ✓ | ✓ | 32 |
Checkbox | library | .c-checkbox | ✓ | ✓ | — | 31 |
LoadingSpinner | library | .c-spinner | ✓ | — | — | 30 |
EmptyState | library | — | ✓ | — | — | 28 |
FormattedNumber | local | — | ✓ | — | — | 28 |
FormattedTimeAgo | local | — | ✓ | — | — | 26 |
FormattedHumanNumber | local | — | ✓ | — | — | 25 |
Tabs | library | .c-tabs | ✓ | — | — | 25 |
Radio | library | .c-radio | — | ✓ | — | 24 |
Select | library | .c-select | ✓ | ✓ | ✓ | 24 |
Meter | library | .c-bar | ✓ | ✓ | — | 23 |
Container | library | .c-container | — | — | — | 20 |
Avatar | local | .c-avatar | ✓ | ✓ | — | 19 |
FormattedPercent | local | — | ✓ | — | — | 17 |
EnvironmentLabel | local | — | ✓ | — | — | 16 |
FormattedComparisonOperator | local | — | ✓ | — | — | 15 |
DescriptionCodeList | library | — | ✓ | — | — | 14 |
c-ul | — | .c-ul | — | — | — | 14 |
RadioGroup | library | — | ✓ | — | — | 13 |
c-virtual-table | — | .c-virtual-table | — | — | — | 13 |
PopOver | library | — | ✓ | — | — | 10 |
CellValueActions | library | — | — | — | — | 9 |
KeyboardShortcut | library | — | ✓ | — | — | 8 |
Markdown | library | .c-markdown | ✓ | — | — | 8 |
AvatarStack | local | .c-avatar-stack | ✓ | — | — | 7 |
CopyIconButton | library | — | ✓ | — | — | 7 |
ErrorState | library | — | ✓ | — | — | 7 |
FormattedImpactPercent | local | — | ✓ | — | — | 7 |
SeverityIcon | library | — | — | — | — | 7 |
CopyText | library | — | ✓ | — | — | 6 |
ExportDropdown | library | — | — | — | — | 6 |
FormattedRevision | local | — | ✓ | — | — | 6 |
FormattedTimeSince | local | — | ✓ | — | — | 6 |
FrequencyIcon | library | — | — | — | — | 6 |
LoadMoreButton | library | — | — | — | — | 6 |
CheckboxGroup | library | — | — | — | — | 5 |
DateRangePicker | library | — | — | — | — | 5 |
HighlightedCode | library | — | ✓ | — | — | 5 |
HighlightedCodeWithTabs | library | — | ✓ | — | — | 5 |
QueryInputFilter | library | — | — | — | — | 5 |
Spinner | local | .c-spinner | — | — | — | 5 |
Toggle | library | .c-toggle | ✓ | ✓ | ✓ | 5 |
Area | library | .c-area | — | — | — | 4 |
TimeSelectInput | library | — | — | — | — | 4 |
c-simple-form | — | .c-simple-form | — | — | — | 4 |
c-skeleton | — | .c-skeleton | — | — | — | 4 |
c-steps-hor | — | .c-steps-hor | — | — | — | 4 |
AssignmentButton | library | — | — | — | — | 3 |
CopyToClipBoardButton | library | — | ✓ | — | — | 3 |
FormattedThroughput | local | — | ✓ | — | — | 3 |
ResizeHandle | library | — | — | — | — | 3 |
TracesPanel | library | — | — | — | — | 3 |
c-ol | — | .c-ol | — | — | — | 3 |
c-progress | — | .c-progress | — | — | ✓ | 3 |
Drawer | library | — | ✓ | — | ✓ | 2 |
HostFilter | local | — | ✓ | — | — | 2 |
LearnMoreTag | library | — | ✓ | — | — | 2 |
RelatedLogLinesTable | library | — | — | — | — | 2 |
TraceServiceMap | library | — | — | — | — | 2 |
TraceTimeline | library | — | — | — | ✓ | 2 |
TracesMiniTimeline | library | — | — | — | — | 2 |
AlertDialog | library | — | — | — | — | 1 |
Bar | library | .c-bar | — | ✓ | — | 1 |
ChartSettingsMenu | library | — | — | — | — | 1 |
Combobox | library | — | ✓ | — | ✓ | 1 |
CopyTextButton | library | — | ✓ | — | — | 1 |
DateRangeSlider | library | — | — | — | — | 1 |
DualRangeSlider | library | — | ✓ | — | — | 1 |
FormattedExceptionRate | local | — | ✓ | — | — | 1 |
Grid | local | .c-grid | — | — | — | 1 |
HighlightedCodeExpandable | library | — | ✓ | — | — | 1 |
LogsQueryAutocomplete | library | — | ✓ | — | — | 1 |
NaturalLanguageDateRangeInput | library | — | — | — | — | 1 |
c-popover | — | .c-popover | — | — | — | 1 |
c-textarea | — | .c-textarea | — | ✓ | ✓ | 1 |
ASChart | library | — | — | — | — | 0 |
Accordion | library | — | ✓ | — | ✓ | 0 |
ClusterMetrics | library | — | — | — | — | 0 |
CreateTriggerLinks | library | — | — | — | — | 0 |
FormPreviewBox | library | — | ✓ | — | — | 0 |
Toast | library | — | ✓ | — | — | 0 |
c-article | — | .c-article | — | — | — | 0 |
c-caps | — | .c-caps | — | — | — | 0 |
c-header-m-nav | — | .c-header-m-nav | — | — | — | 0 |
c-header-nav | — | .c-header-nav | — | — | — | 0 |
c-header-subnav | — | .c-header-subnav | — | — | — | 0 |
c-screenshot | — | .c-screenshot | — | — | — | 0 |
c-step-dots | — | .c-step-dots | — | — | — | 0 |
c-steps-vert | — | .c-steps-vert | — | — | — | 0 |
c-table-scroll-x | — | .c-table-scroll-x | — | — | — | 0 |
Every row links to the construct's own page, which carries every axis and names the file its guidance would live in. This is a register, not documentation: what anything is for is on its own page.
A construct added to the product after the pinned commit is not here at all, and the list looks complete while being wrong. The commit at the foot of this page is the only way to tell.