Components
Create numbered step-by-step guides with visual indicators
The <Steps> component creates numbered, sequential guides with visual connectors. Perfect for tutorials, installation guides, and multi-step processes.
Run npm install to install all required packages.
Create a .env file with your API keys.
Run npm run dev to start the development server.
<Steps>
<Step title="Install Dependencies">
Run `npm install` to install all required packages.
</Step>
<Step title="Configure Environment">
Create a `.env` file with your API keys.
</Step>
<Step title="Start Development">
Run `npm run dev` to start the development server.
</Step>
</Steps>Steps support complex content including code blocks, lists, and nested components:
Install the SDK using your preferred package manager:
npm install @acme/sdkOr using yarn:
yarn add @acme/sdkImport the SDK in your application:
import { AcmeClient } from '@acme/sdk';
const client = new AcmeClient({
apiKey: process.env.ACME_API_KEY
});Never hardcode API keys in your source code.
Send a test request to verify setup:
const response = await client.users.list();
console.log(response);<Steps>
<Step title="Install Package">
Install the SDK using your preferred package manager:
```bash
npm install @acme/sdk
```
Or using yarn:
```bash
yarn add @acme/sdk
```
</Step>
<Step title="Import and Initialize">
Import the SDK in your application:
```typescript
import { AcmeClient } from '@acme/sdk';
const client = new AcmeClient({
apiKey: process.env.ACME_API_KEY
});
```
<Callout status="warning">
Never hardcode API keys in your source code.
</Callout>
</Step>
<Step title="Make Your First Request">
Send a test request to verify setup:
```typescript
const response = await client.users.list();
console.log(response);
```
</Step>
</Steps>Steps can omit titles for simpler flows:
First, navigate to your project directory.
Then, run the installation command.
Finally, start the development server.
<Steps>
<Step>
First, navigate to your project directory.
</Step>
<Step>Then, run the installation command.</Step>
<Step>
Finally, start the development server.
</Step>
</Steps>The title of the step, displayed prominently.
<Step title="Create API Key">Navigate to the dashboard...</Step>The content of the step. Supports full Markdown formatting.
<Step title="Setup">
You can include **bold**, *italic*, `code`, and [links](/docs).
</Step>Next, learn about the Tabs Component for organizing content.