## Usage ```mdx Sign up and create your first documentation project. Install the CodivDocs GitHub App on your repository. Push your MDX files and your docs go live. ``` Sign up and create your first documentation project. Install the CodivDocs GitHub App on your repository. Push your MDX files and your docs go live. The numbers are generated automatically by a CSS counter — you don't pass `stepNumber` manually. Add or remove steps and the numbering re-counts itself. ## Custom step icons Replace the auto-generated number with a Lucide icon by setting `titleIcon`. Useful for tutorial flows where each step represents a different concept (install, configure, deploy, verify) and a glyph reads faster than a number. ```mdx Run `npm install -g codivdocs`. Edit `codiv.config.json` with your name and navigation. Push to GitHub and watch the build complete in 30 seconds. Open your `{slug}.codivdocs.com` URL. ``` Run `npm install -g codivdocs`. Edit `codiv.config.json` with your name and navigation. Push to GitHub and watch the build complete in 30 seconds. Open your `{slug}.codivdocs.com` URL. ## Mixing icons and numbers You can leave some steps un-iconed and they'll fall back to the counter, but the visual reads better when you commit to one or the other for a single Steps block. ## Nested content Step content can include any other component — code blocks, callouts, cards, even nested Tabs: ```mdx ```bash npm npm install @codivdocs/sdk ``` ```bash yarn yarn add @codivdocs/sdk ``` Requires Node.js 20 or later. ``` ## Props ### Steps | Prop | Type | Required | Description | |------|------|----------|-------------| | `children` | `ReactNode` | Yes | One or more `` components | ### Step | Prop | Type | Required | Description | |------|------|----------|-------------| | `title` | `string` | No | Step heading rendered above the content | | `titleIcon` | `string` | No | Lucide icon name (or emoji) — replaces the auto-counter | | `children` | `ReactNode` | Yes | Step content (markdown, components, anything) |