16aaf55a91
- Updated content collections to include new schemas for better document handling. - Added new documentation files for comparisons, customization, and internationalization. - Introduced a manual installation guide and improved markdown support. - Updated package.json with new dependencies for enhanced functionality. - Added new images for documentation and improved layout components for better user experience. - Adjusted TypeScript configurations for better path management.
58 lines
807 B
Plaintext
58 lines
807 B
Plaintext
---
|
|
title: Steps
|
|
description: Adding steps to your docs
|
|
preview: steps
|
|
---
|
|
|
|
## Usage
|
|
|
|
Put your steps into the `Steps` container.
|
|
|
|
```mdx
|
|
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
|
|
|
<Steps>
|
|
<Step>
|
|
|
|
### Hello World
|
|
|
|
</Step>
|
|
|
|
<Step>
|
|
|
|
### Hello World
|
|
|
|
</Step>
|
|
</Steps>
|
|
```
|
|
|
|
> We recommend using Tailwind CSS utility classes directly on Tailwind CSS projects.
|
|
|
|
### Without imports
|
|
|
|
You can use the Tailwind CSS utilities without importing it.
|
|
|
|
```mdx
|
|
<div className="fd-steps">
|
|
<div className="fd-step" />
|
|
</div>
|
|
```
|
|
|
|
It supports adding step styles to only headings with arbitrary variants.
|
|
|
|
```mdx
|
|
<div className='fd-steps [&_h3]:fd-step'>
|
|
|
|
### Hello World
|
|
|
|
</div>
|
|
```
|
|
|
|
<div className='fd-steps [&_h3]:fd-step'>
|
|
|
|
### Hello World
|
|
|
|
You no longer need to use the step component anymore.
|
|
|
|
</div>
|