# Capra Design System

> Capra is Cribl’s design system: design tokens, theming, and React components published under the `@capra` NPM scope.

**Important Note**

This directory is a static export of Capra’s design-system documentation as plain text. These files are the canonical machine- and human-readable versions of the docs content.

**Layout**

- `llms.txt` — index of all extracted pages. Each entry links to a single `.txt` file (paths are relative to this directory).
- `llms/*.txt` — one file per documentation page. Open the relevant file for the component or topic you need; use the index when you are unsure of the filename.

**How to use these documents**

- Treat **props, types, and usage described inside a given `llms/*.txt` file** as authoritative for that topic. Do not infer APIs from component names or from other UI libraries.
- When this documentation refers to design tokens or theme values, implement them in application code using the **`tokens()`** helper (TypeScript and CSS) from the design system. **Do not use raw CSS variables** (e.g. `var(--...)`) for Capra tokens in source code; always use `tokens()` so names stay consistent and refactors are safe.
- Prefer **design tokens** over hard-coded colors, spacing, or typography values.

**Design Token Reference**

For a full list of design tokens, see [Foundation/Design Tokens/Reference](llms/foundation-design-tokens-reference--docs.txt).

## General

- [Conventions](llms/conventions--docs.txt)
- [Using Capra](llms/using-capra--docs.txt)

## Foundation

> Foundational design patterns for the Capra design system. See these pages for general design guidelines, accessibility requirements, typography, and design tokens.

- [Foundation/Accessibility/Color Contrast and APCA](llms/foundation-accessibility-color-contrast-and-apca--docs.txt)
- [Foundation/Accessibility/Focus Indicator](llms/foundation-accessibility-focus-indicator--docs.txt)
- [Foundation/Accessibility/Overview](llms/foundation-accessibility-overview--docs.txt)
- [Foundation/Content/Date & Time](llms/foundation-content-date-time--docs.txt)
- [Foundation/Content/Numbers](llms/foundation-content-numbers--docs.txt)
- [Foundation/Design Tokens/Overview](llms/foundation-design-tokens-overview--docs.txt)
- [Foundation/Design Tokens/Reference](llms/foundation-design-tokens-reference--docs.txt)
- [Foundation/Design Tokens/Usage](llms/foundation-design-tokens-usage--docs.txt)
- [Foundation/Icons](llms/foundation-icons--docs.txt)
- [Foundation/Shadows](llms/foundation-shadows--docs.txt)
- [Foundation/Typography](llms/foundation-typography--docs.txt)

## Core

> React components built on Capra's design guidelines. Each component has a "Design" page that provides specific design guidelines the component and a "Usage" page that shows how to use the component in code.

- [Core/Alert - Design](llms/core-alert--design.txt): Alerts are used to communicate important information to the user.
- [Core/Alert - Usage](llms/core-alert--usage.txt): Alerts are used to communicate important information to the user.
- [Core/Anchor - Design](llms/core-anchor--design.txt)
- [Core/Anchor - Usage](llms/core-anchor--usage.txt)
- [Core/AutocompleteField - Design](llms/core-autocompletefield--design.txt): AutocompleteField combines a text field with a suggestions list. Consumers can supply static `AutocompleteField.Item` children or an `items` collection with an optional default item renderer. The field allows custom values that are not in the list.
- [Core/AutocompleteField - Usage](llms/core-autocompletefield--usage.txt): AutocompleteField combines a text field with a suggestions list. Consumers can supply static `AutocompleteField.Item` children or an `items` collection with an optional default item renderer. The field allows custom values that are not in the list.
- [Core/Badge - Design](llms/core-badge--design.txt): Badges display an indicator/counter on an associated component.
- [Core/Badge - Usage](llms/core-badge--usage.txt): Badges display an indicator/counter on an associated component.
- [Core/Breadcrumbs - Design](llms/core-breadcrumbs--design.txt): Renders a breadcrumb trail with built-in support for collection behavior, keyboard support, and current-page semantics. Wrap items with {@link Breadcrumb}. The last item should represent the current page (typically without an `href`).
- [Core/Breadcrumbs - Usage](llms/core-breadcrumbs--usage.txt): Renders a breadcrumb trail with built-in support for collection behavior, keyboard support, and current-page semantics. Wrap items with {@link Breadcrumb}. The last item should represent the current page (typically without an `href`).
- [Core/Button - Design](llms/core-button--design.txt): Primary interactive element displaying text and supporting leading and trailing icons.
- [Core/Button - Usage](llms/core-button--usage.txt): Primary interactive element displaying text and supporting leading and trailing icons.
- [Core/ButtonLink - Design](llms/core-buttonlink--design.txt): Primary interactive element displaying text and supporting leading and trailing icons.
- [Core/ButtonLink - Usage](llms/core-buttonlink--usage.txt): Primary interactive element displaying text and supporting leading and trailing icons.
- [Core/Card - Design](llms/core-card--design.txt): The base component for the card.
- [Core/Card - Usage](llms/core-card--usage.txt): The base component for the card.
- [Core/Checkbox - Design](llms/core-checkbox--design.txt): Checkbox component for capturing boolean user input. Supports controlled and uncontrolled modes with proper accessibility.
- [Core/Checkbox - Usage](llms/core-checkbox--usage.txt): Checkbox component for capturing boolean user input. Supports controlled and uncontrolled modes with proper accessibility.
- [Core/Collapse - Design](llms/core-collapse--design.txt): A collapsible disclosure section with an expandable header and panel. Pass **`title`** for the header label, optional **`headerTrailingContentSlot`** for trailing actions (switches, buttons), and the panel body via **`children`**.
- [Core/Collapse - Usage](llms/core-collapse--usage.txt): A collapsible disclosure section with an expandable header and panel. Pass **`title`** for the header label, optional **`headerTrailingContentSlot`** for trailing actions (switches, buttons), and the panel body via **`children`**.
- [Core/DatePickerField - Design](llms/core-datepickerfield--design.txt)
- [Core/DatePickerField - Usage](llms/core-datepickerfield--usage.txt)
- [Core/DateRangePickerField - Design](llms/core-daterangepickerfield--design.txt)
- [Core/DateRangePickerField - Usage](llms/core-daterangepickerfield--usage.txt)
- [Core/Divider - Design](llms/core-divider--design.txt): Divider separates and groups content. Use horizontal dividers between sections; use vertical dividers between inline items. A horizontal divider can optionally display a label. Dividers are static and not keyboard focusable.
- [Core/Divider - Usage](llms/core-divider--usage.txt): Divider separates and groups content. Use horizontal dividers between sections; use vertical dividers between inline items. A horizontal divider can optionally display a label. Dividers are static and not keyboard focusable.
- [Core/Drawer - Design](llms/core-drawer--design.txt)
- [Core/Drawer - Usage](llms/core-drawer--usage.txt)
- [Core/EmptyState - Design](llms/core-emptystate--design.txt): The EmptyState component is used to display a message when there is no data to display. Illustrations are lazy-loaded and support light/dark themes via the theme prop.
- [Core/EmptyState - Usage](llms/core-emptystate--usage.txt): The EmptyState component is used to display a message when there is no data to display. Illustrations are lazy-loaded and support light/dark themes via the theme prop.
- [Core/HelperText - Design](llms/core-helpertext--design.txt): Helper text for inputs.
- [Core/HelperText - Usage](llms/core-helpertext--usage.txt): Helper text for inputs.
- [Core/IconButton - Design](llms/core-iconbutton--design.txt): Interactive element displaying a single icon.
- [Core/IconButton - Usage](llms/core-iconbutton--usage.txt): Interactive element displaying a single icon.
- [Core/InputRow - Design](llms/core-inputrow--design.txt)
- [Core/InputRow - Usage](llms/core-inputrow--usage.txt)
- [Core/Label - Design](llms/core-label--design.txt): Label text and optional required indicator for form fields, aligned with Capra field layouts.
- [Core/Label - Usage](llms/core-label--usage.txt): Label text and optional required indicator for form fields, aligned with Capra field layouts.
- [Core/Link - Design](llms/core-link--design.txt): Links are navigational elements that take users to a new page.
- [Core/Link - Usage](llms/core-link--usage.txt): Links are navigational elements that take users to a new page.
- [Core/ListItem - Design](llms/core-listitem--design.txt)
- [Core/ListItem - Usage](llms/core-listitem--usage.txt)
- [Core/Menu - Design](llms/core-menu--design.txt)
- [Core/Menu - Usage](llms/core-menu--usage.txt)
- [Core/Modal - Design](llms/core-modal--design.txt)
- [Core/Modal - Usage](llms/core-modal--usage.txt)
- [Core/NumberField - Design](llms/core-numberfield--design.txt): Number field built on React Aria `NumberField`, with custom increment/decrement controls (native spinners hidden).
- [Core/NumberField - Usage](llms/core-numberfield--usage.txt): Number field built on React Aria `NumberField`, with custom increment/decrement controls (native spinners hidden).
- [Core/Pagination - Design](llms/core-pagination--design.txt): Pagination component for navigating through paged content. Renders prev/next buttons and a page number input with total pages indicator.
- [Core/Pagination - Usage](llms/core-pagination--usage.txt): Pagination component for navigating through paged content. Renders prev/next buttons and a page number input with total pages indicator.
- [Core/PasswordField - Design](llms/core-passwordfield--design.txt): Password field with a trailing control to show or hide the value. Composes {@link TextField}; visibility toggles the underlying input between `password` and `text`.
- [Core/PasswordField - Usage](llms/core-passwordfield--usage.txt): Password field with a trailing control to show or hide the value. Composes {@link TextField}; visibility toggles the underlying input between `password` and `text`.
- [Core/Pill - Design](llms/core-pill--design.txt)
- [Core/Pill - Usage](llms/core-pill--usage.txt)
- [Core/Popover - Design](llms/core-popover--design.txt): A popover component that renders a trigger and popover content.
- [Core/Popover - Usage](llms/core-popover--usage.txt): A popover component that renders a trigger and popover content.
- [Core/Radio - Design](llms/core-radio--design.txt): A presentational radio button component. You will typically use this component within a RadioGroup component.
- [Core/Radio - Usage](llms/core-radio--usage.txt): A presentational radio button component. You will typically use this component within a RadioGroup component.
- [Core/RadioGroup - Design](llms/core-radiogroup--design.txt): A control wrapper for a group of radio buttons.
- [Core/RadioGroup - Usage](llms/core-radiogroup--usage.txt): A control wrapper for a group of radio buttons.
- [Core/RadioTile - Design](llms/core-radiotile--design.txt): A card variation of a radio button component. You will typically use this component within a RadioGroup component.
- [Core/RadioTile - Usage](llms/core-radiotile--usage.txt): A card variation of a radio button component. You will typically use this component within a RadioGroup component.
- [Core/Ribbon - Design](llms/core-ribbon--design.txt): A ribbon component used to highlight new features that exist in a 'preview' state. Ribbons communicate that users may encounter errors when using these features.
- [Core/Ribbon - Usage](llms/core-ribbon--usage.txt): A ribbon component used to highlight new features that exist in a 'preview' state. Ribbons communicate that users may encounter errors when using these features.
- [Core/Skeleton - Design](llms/core-skeleton--design.txt): A skeleton is a graphical placeholder, reserving physical space in the page for content in cases where a service or action may be slow to resolve. A skeleton can be considered as an alternative to the progress spinner in many situations.
- [Core/Skeleton - Usage](llms/core-skeleton--usage.txt): A skeleton is a graphical placeholder, reserving physical space in the page for content in cases where a service or action may be slow to resolve. A skeleton can be considered as an alternative to the progress spinner in many situations.
- [Core/SkeletonGroup - Design](llms/core-skeletongroup--design.txt)
- [Core/SkeletonGroup - Usage](llms/core-skeletongroup--usage.txt)
- [Core/Spinner - Design](llms/core-spinner--design.txt): The Spinner component is used to display a loading state. It can be used in two modes: **Mode 1 - Standalone Spinner:**
- [Core/Spinner - Usage](llms/core-spinner--usage.txt): The Spinner component is used to display a loading state. It can be used in two modes: **Mode 1 - Standalone Spinner:**
- [Core/Switch - Design](llms/core-switch--design.txt)
- [Core/Switch - Usage](llms/core-switch--usage.txt)
- [Core/TabNav - Design](llms/core-tabnav--design.txt): TabNav provides a horizontal or vertical navigation styled as tabs. Tab items are links that redirect to URLs. With `subItems`, horizontal tabs open a dropdown menu; vertical tabs use an inline indented list (Tab Nav | Vertical in Figma).
- [Core/TabNav - Usage](llms/core-tabnav--usage.txt): TabNav provides a horizontal or vertical navigation styled as tabs. Tab items are links that redirect to URLs. With `subItems`, horizontal tabs open a dropdown menu; vertical tabs use an inline indented list (Tab Nav | Vertical in Figma).
- [Core/Tag - Design](llms/core-tag--design.txt): A tag component for displaying a label and an optional icon.
- [Core/Tag - Usage](llms/core-tag--usage.txt): A tag component for displaying a label and an optional icon.
- [Core/Text - Design](llms/core-text--design.txt): Component for displaying text. The visual display can be controlled via `variant`. The underlying HTML element can be controlled via the `as` prop, which defaults to a `span` tag.
- [Core/Text - Usage](llms/core-text--usage.txt): Component for displaying text. The visual display can be controlled via `variant`. The underlying HTML element can be controlled via the `as` prop, which defaults to a `span` tag.
- [Core/TextArea - Design](llms/core-textarea--design.txt): TextArea component for multi-line text entry.
- [Core/TextArea - Usage](llms/core-textarea--usage.txt): TextArea component for multi-line text entry.
- [Core/TextField - Design](llms/core-textfield--design.txt): Single-line text field with optional label and helper text.
- [Core/TextField - Usage](llms/core-textfield--usage.txt): Single-line text field with optional label and helper text.
- [Core/TextInput - Design](llms/core-textinput--design.txt): TextInput component for single-line text entry. Backwards compatible with Ant Design v5 Input.
- [Core/TextInput - Usage](llms/core-textinput--usage.txt): TextInput component for single-line text entry. Backwards compatible with Ant Design v5 Input.
- [Core/Toast - Design](llms/core-toast--design.txt): Renders a toast inline for documentation/preview. Not for use in production.
- [Core/Toast - Usage](llms/core-toast--usage.txt): Renders a toast inline for documentation/preview. Not for use in production.
- [Core/Tooltip - Design](llms/core-tooltip--design.txt): A component to display additional information when hovering or focusing on an interactive element.
- [Core/Tooltip - Usage](llms/core-tooltip--usage.txt): A component to display additional information when hovering or focusing on an interactive element.
- [Core/TopNav - Design](llms/core-topnav--design.txt)
- [Core/TopNav - Usage](llms/core-topnav--usage.txt)
- [Core/Tree - Design](llms/core-tree--design.txt): A hierarchical tree with cascading multi-select and Capra ListItem row layout.
- [Core/Tree - Usage](llms/core-tree--usage.txt): A hierarchical tree with cascading multi-select and Capra ListItem row layout.
- [Core/VerticalNavigation - Design](llms/core-verticalnavigation--design.txt): Vertical navigation shell with controlled and uncontrolled collapse support. Provides shared context for items, collapse toggle, and footer sections.
- [Core/VerticalNavigation - Usage](llms/core-verticalnavigation--usage.txt): Vertical navigation shell with controlled and uncontrolled collapse support. Provides shared context for items, collapse toggle, and footer sections.
- [Core/VisuallyHidden - Design](llms/core-visuallyhidden--design.txt): VisuallyHidden is a component that hides its children from the visual rendering, but still makes them available to screen readers.
- [Core/VisuallyHidden - Usage](llms/core-visuallyhidden--usage.txt): VisuallyHidden is a component that hides its children from the visual rendering, but still makes them available to screen readers.

## Domain

> React components operating at a higher level of abstraction, solving speficic domain, product, or surface area problems.

- [Domain/AppsPopover - Design](llms/domain-appspopover--design.txt)
- [Domain/AppsPopover - Usage](llms/domain-appspopover--usage.txt)
- [Domain/ProductsNavigation - Design](llms/domain-productsnavigation--design.txt): The Products menu is displayed by activating the “Products” button in the Cribl Header. The products menu uses the VerticalNavigation primitive component to display its contents, with updates to its styling.
- [Domain/ProductsNavigation - Usage](llms/domain-productsnavigation--usage.txt): The Products menu is displayed by activating the “Products” button in the Cribl Header. The products menu uses the VerticalNavigation primitive component to display its contents, with updates to its styling.

## History

> Historical information about Capra. See these pages for changelogs, migration guides, and architecture decision recrods.

- [History/Changelogs/@capra-core](llms/history-changelogs-capra-core--docs.txt)
- [History/Changelogs/@capra-domain](llms/history-changelogs-capra-domain--docs.txt)
- [History/Changelogs/@capra-dx-tokens](llms/history-changelogs-capra-dx-tokens--docs.txt)
- [History/Changelogs/@capra-dx-tokens-core](llms/history-changelogs-capra-dx-tokens-core--docs.txt)
- [History/Changelogs/@capra-dx-tokens-lightningcss-plugin](llms/history-changelogs-capra-dx-tokens-lightningcss-plugin--docs.txt)
- [History/Changelogs/@capra-dx-tokens-postcss-plugin](llms/history-changelogs-capra-dx-tokens-postcss-plugin--docs.txt)
- [History/Changelogs/@capra-icons](llms/history-changelogs-capra-icons--docs.txt)
- [History/Changelogs/@capra-theme](llms/history-changelogs-capra-theme--docs.txt)