Fumadocs Template

Components

Some builtin components

LinkButton

A link button component to link url and show text.

<LinkButton url="https://github.com/showlotus/fumadocs-template" text="Github" />

ThemeImage

A image component to show different image in light and dark mode.

<ThemeImage light="./imgs/sun.svg" dark="./imgs/moon.svg" className="w-10" />

click to toggle theme and the icon will change.

CodeBlock

A component to show code block.

<CodeBlock lang="tsx" code={`'use client'

import Demo from './components/demo.tsx'

export default function Foo() {
    return <div>This is a Foo with <Demo /></div>
}`} />

It's the same as:

ViewCode

A component to view code.

<ViewCode src="./components/demo.tsx" />
This is a Demo
click to toggle theme and the icon will change.

or use view-code keyword to inject the code block.

This is a Foo
This is a Demo
click to toggle theme and the icon will change.

Last updated on

On this page