'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Extras
CodeSteps
Numbered steps with the text on one side and the code on the other: an install guide, a setup, a migration. It stacks on narrow screens.
import { CodeSteps } from '@alea/ui';
Examples
CodeSteps
Numbered steps with the text beside the code: an install guide in three steps.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-border-strong…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-8…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-leading-relaxed…--alea-font-size-lg…--alea-font-size-sm…--alea-font-weight-semibold…
Motion
--alea-motion-duration-slow…--alea-motion-ease-out…
Props
CodeSteps props
Numbered steps with the text on one side and the code on the other: an install guide, a setup, a migration. Stacks on narrow screens.
| Prop | Type | Default | Description |
|---|---|---|---|
stepsrequired | CodeStep[] | - | |
className | string | - | Extra class names for the root element. |
headingLevel | 2 | 3 | 4 | 3 | Heading level of each step's title, to fit the page outline. Default 3. |
start | number | 1 | Number to start counting from. Default 1. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-codesteps.alea-codesteps-step.alea-codesteps-num.alea-codesteps-text.alea-codesteps-title.alea-codesteps-desc.alea-codesteps-code- Data attributes
data-code
Accessibility
- An ordered list: screen readers say how many steps there are and which one you are on.
- Each step has a real heading, so the steps show in the page outline.
- The numbers are drawn for sight and hidden from screen readers; the list counts for them.
Do and don't
Do
- Keep one action per step.
- Label each code block with its file name or Terminal.
Don't
- Don't hide a required step inside another step's text.
- Don't use it for a sequence people move through (use Steps for that).