Sample

Components

Accordion

<Accordions type="single" collapsible>
  <Accordion id="what-is-fumadocs" title="What is Fumadocs?">
    A framework for building documentations
  </Accordion>
  <Accordion id="ux" title="What do we love?">
    We love websites with a good user experience
  </Accordion>
</Accordions>

Be careful, Fumadocs v99 has released

Be careful, this banner can be closed

Using the rainbow variant

<html lang="en">
  <body>
    <Banner>Hello World</Banner>
    {children}
  </body>
</html>

<div className="flex flex-col gap-4">
  <Banner className="z-0" changeLayout={false}>
    Be careful, Fumadocs v99 has released
  </Banner>
  <Banner className="z-0" id="test" changeLayout={false}>
    Be careful, this banner can be closed
  </Banner>
  <Banner className="z-0" id="test-rainbow" variant="rainbow" changeLayout={false}>
    Using the <code>rainbow</code> variant
  </Banner>
</div>

Files

layout.tsx

page.tsx

global.css

package.json

<Files>
  <Folder name="app" defaultOpen>
    <File name="layout.tsx" />
    <File name="page.tsx" />
    <File name="global.css" />
  </Folder>
  <Folder name="components">
    <File name="button.tsx" />
    <File name="tabs.tsx" />
    <File name="dialog.tsx" />
  </Folder>
  <File name="package.json" />
</Files>

Inline TOC

<InlineTOC
  items={[
    { title: "Welcome", url: "#welcome", depth: 2 },
    { title: "Getting Started", url: "#getting-started", depth: 3 },
    { title: "Usage", url: "#usage", depth: 3 },
    { title: "Styling", url: "#styling", depth: 3 },
    { title: "Reference", url: "#reference", depth: 2 },
    { title: "Components", url: "#components", depth: 3 },
    { title: "APIs", url: "#api", depth: 3 },
    { title: "Credits", url: "#credits", depth: 2 },
  ]}
/>

Steps

Buy Coffee

Some text here

Go to Office Some text here

Some text here

Have a meeting Some text here

Some text here

<div className="rounded-xl bg-fd-background p-3">
  <Steps>
    <Step>
      <h4>Buy Coffee</h4>
      <p>Some text here</p>
    </Step>
    <Step>
      <h4>Go to Office Some text here</h4>
      <p>Some text here</p>
    </Step>
    <Step>
      <h4>Have a meeting Some text here</h4>
      <p>Some text here</p>
    </Step>
  </Steps>
</div>

Tabs

Hello World in Javascript

Value is shared! Try refresh and see if the value is persisted

<div className="space-y-4 rounded-xl bg-fd-background p-4 text-sm">
  <Tabs
    groupId="language"
    persist
    items={['Javascript', 'Rust', 'Typescript']}>
    <Tab value="Javascript">Hello World in Javascript</Tab>
    <Tab value="Rust">Hello World in Rust</Tab>
    <Tab value="Typescript">Also works if items are not the same</Tab>
  </Tabs>
  <Tabs groupId="language" persist items={['Javascript', 'Rust']}>
    <Tab value="Javascript">Value is shared! Try refresh and see if the value is persisted</Tab>
    <Tab value="Rust">Value is shared! Try refresh and see if the value is persisted</Tab>
  </Tabs>
</div>

Type Table

Prop	Type	Default
`percentage?`	`number`	`0.2`

<div className="rounded-xl bg-fd-background px-4">
  <TypeTable
    type={{
      percentage: {
        description: "The percentage of scroll position to display the roll button",
        type: "number",
        default: "0.2",
      },
    }}
  />
</div>
</div>

MDX Components

Image

Alt text

![Alt text](https://wp.pelatform.com/wp-content/uploads/2025/02/sample.webp)

Callout

Title

Hello World

<Callout title="Title">Hello World</Callout>

Card

Hello World

Learn More about Caching and Revalidation

<div className="rounded-lg bg-fd-background">
  <Card
    href="#"
    title="Hello World"
    description="Learn More about Caching and Revalidation"
  />
</div>

Code Block

config.js

<Wrapper>
  <Callout title="Title">Hello World</Callout>
</Wrapper>

Custome Components

Button

Btn Animation

Btn Shadow

<div className="flex items-center gap-4">
  <BtnAnimation href="/docs/general" className="no-underline">
    Btn Animation
  </BtnAnimation>
  <BtnShadow href="/docs/general" className="no-underline">
    Btn Shadow
  </BtnShadow>
</div>

Youtube

<Youtube id="KcxPQCT_vKA" />

Video

<Video src="https://assets.weddingsaas.id/docs/pro/form-import-video.mp4" />

What is Fumadocs?

What do we love?

Buy Coffee

Go to Office Some text here

Have a meeting Some text here

Hello World

On this page