Sample
Sample Component Pelatform
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>Banner
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
Hello World in Rust
Also works if items are not the same
Value is shared! Try refresh and see if the value is persisted
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
<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
Callout
Title
Hello World
<Callout title="Title">Hello World</Callout>Card
<div className="rounded-lg bg-fd-background">
<Card
href="#"
title="Hello World"
description="Learn More about Caching and Revalidation"
/>
</div>Code Block
<Wrapper>
<Callout title="Title">Hello World</Callout>
</Wrapper>Custome Components
Button
<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" />Last updated on
