LogoDocumentación de PatentFig
LogoDocumentación de PatentFig
Página de inicio

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewSearch
Components
AccordionBannerCode Block (Dynamic)FilesGitHub InfoZoomable ImageInline TOCRoot ToggleStepsTabsType Table
MDX
X (Twitter)
Components

Steps

Adding steps to your docs

Buy Coffee

Some text here

Go to Office Some text here

Some text here

Have a meeting Some text here

Some text here

Usage

Put your steps into the Steps container.

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.

<div className="fd-steps">
  <div className="fd-step" />
</div>

It supports adding step styles to only headings with arbitrary variants.

<div className='fd-steps [&_h3]:fd-step'>

### Hello World

</div>

Hello World

You no longer need to use the step component anymore.

Root Toggle

Switch between page trees

Tabs

A Tabs component built with Radix UI, with additional features such as persistent and shared value.

Tabla de contenidos

Usage
Without imports
Hello World