LogoMkSaaS Docs
    LogoMkSaaS Docs
    Homepage

    Introduction

    Quick StartWhat is FumadocsComparisons

    Setup

    Manual InstallationStatic Export

    Writing

    MarkdownInternationalization

    UI

    OverviewThemesSearch
    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.

    Table of Contents

    Usage
    Without imports
    Hello World