# Alpha

> Alpha is the Growth Protocol design system: a React component package
> (`@growth-protocol-ai/alpha`, v0.11.1) styled with CSS Modules over unprefixed CSS
> custom properties. Surface documents are generated from the package registry;
> cross-cutting documents are checked against the emitted package. Together they
> describe the version you have installed and nothing else.

Read `llms/adopting.md` before replacing an existing component with an Alpha one —
it states Alpha's boundaries and the checks a substitution needs. Import
components from the package root and icons from the `/icons` subpath. The only
supported selector into a component is `[data-slot]`. Alpha ships no layout or
typography primitives and no spacing scale; that code stays in your
application.

## Contract

- [Building with Alpha](llms/building.md): selecting, composing and validating Alpha surfaces for new UI
- [Adopting Alpha](llms/adopting.md): the boundaries, the substitution procedure, and what to do when Alpha has no equivalent
- [Setting up Alpha](llms/setup.md): installation, the one stylesheet import, mode, fonts and removal boundaries
- [Rules block](llms/rules.md): paste-ready instructions for a consuming repository's AGENTS.md, CLAUDE.md or .cursor/rules
- [Selectors and overrides](llms/slots.md): how to restyle a component from outside it, and the portalling caveat that catches everyone
- [Entry points](llms/entry-points.md): the whole public surface, subpath by subpath

## Components

- [Accordion](llms/accordion.md): Accordions are stacked rows that each hide a panel of content until the reader opens it.
- [Button](llms/button.md): Buttons are the controls a reader presses to make something happen.
- [Card](llms/card.md): Cards are self-contained surfaces that each carry one unit of information.
- [Checkbox](llms/checkbox.md): Checkboxes let a reader choose any number of options from a list, including none of them.
- [Dropdown](llms/dropdown.md): Dropdowns let a reader pick one value from a list that stays out of the way until it is needed, or several when it is set up for that.
- [EmptyState](llms/empty-state.md): Empty states explain why a place that would normally hold content is empty, and what the reader can do about it.
- [Markdown](llms/markdown.md): Markdown renders a string of markdown as formatted text — headings, lists, tables, links and fenced code — styled to match the rest of the interface.
- [Modal](llms/modal.md): Modals are dialogs that open over the page and hold the reader’s attention until they are dealt with.
- [Pagination](llms/pagination.md): Pagination lets a reader move through a long list one page at a time.
- [Popover](llms/popover.md): Popovers are small panels anchored to the control that opens them, holding content or controls the page has no room to keep on show.
- [Radio](llms/radio.md): Radios let a reader pick exactly one option from a group.
- [Search](llms/search.md): Search is the field a reader types a question into.
- [Skeleton](llms/skeleton.md): Skeletons stand in for content that has not arrived yet, drawn in roughly the shape it will take.
- [Spinner](llms/spinner.md): Spinners say that something is in progress without saying how far along it is.
- [Tabs](llms/tabs.md): Tabs are a row of labels that switch a surface between alternative views of itself, one at a time, without leaving the page.
- [Tag](llms/tag.md): Tags are small inline labels that mark or categorise whatever they sit beside.
- [TextArea](llms/text-area.md): Text areas collect several lines of typed text.
- [TextInput](llms/text-input.md): Text inputs collect a single line of typed text.
- [Toggle](llms/toggle.md): Toggles are switches for a setting that takes effect the moment it is flipped.
- [Tooltip](llms/tooltip.md): Tooltips are short hints anchored to a control, shown when the reader hovers over it or moves focus to it.

## Modules

- [Canvas](llms/canvas.md): The canvas is the surface an assembled layout is read and edited on.
- [ConfirmationModal](llms/confirmation-modal.md): The confirmation modal asks the reader to confirm one action before it happens.
- [ErrorView](llms/error-view.md): The error view tells a reader that something has failed and what that means for them.

## Foundations

- [Colour, typography and tokens](llms/tokens.md): semantic roles, mode-aware theming, type scales, layout boundaries and every token name
- [Icons](llms/icons.md): Icons are the glyph set Alpha publishes, for use inside its own components and in your markup.

## Optional

- [llms-full.txt](llms-full.txt): every document above, inline