Code Block
Code
Source and install need .
pnpm dlx shadcn@latest add @assembli/docs-stepsDocs Steps
Numbered quickstart steps for docs: a rail of steps, each with prose and a code sample under a filename header with highlighted lines and a copy button that confirms. npm, pnpm, yarn and bun tabs stay in sync across every step and are remembered. Ticking a step off fills the rail and the progress bar, and the step you're reading lights up as you scroll.
Props
Other props pass through to the root element.
steps*
DocsStep[]
variants
string[]
Default
["npm", "pnpm", "yarn", "bun"]Variant tab order. The choice is shared by every step and remembered in localStorage.
storageKey
string
Default
"docs-steps:variant"localStorage key for the chosen variant. Instances with the same key stay in sync.
completed
string[]
defaultCompleted
string[]
Default
[]onCompletedChange
(ids: string[]) => void
showProgress
boolean
Default
trueShow the "n of m complete" bar above the steps.
| Description | |||
|---|---|---|---|
| steps* | DocsStep[] | – | |
| variants | string[] | ["npm", "pnpm", "yarn", "bun"] | Variant tab order. The choice is shared by every step and remembered in localStorage. |
| storageKey | string | "docs-steps:variant" | localStorage key for the chosen variant. Instances with the same key stay in sync. |
| completed | string[] | – | |
| defaultCompleted | string[] | [] | |
| onCompletedChange | (ids: string[]) => void | – | |
| showProgress | boolean | true | Show the "n of m complete" bar above the steps. |
