Advanced Components
Explore advanced and interactive components available in fumadocs
Advanced Components
Discover the more advanced and visually appealing components available in fumadocs.
Accordion
Create collapsible sections with accordions for better content organization.
Code:
<Accordions>
<Accordion title="Question 1">
Answer goes here...
</Accordion>
<Accordion title="Question 2">
Another answer...
</Accordion>
</Accordions>File Tree
Visualize file structures with the Files component - perfect for showing project layouts!
Code:
<Files>
<Folder name="app" defaultOpen>
<File name="page.tsx" />
<File name="layout.tsx" />
</Folder>
<File name="package.json" />
</Files>Use defaultOpen prop on folders to show them expanded by default!
Type Table
Document TypeScript types elegantly with the TypeTable component.
Prop
Type
Code:
<TypeTable
type={{
name: {
description: 'User name',
type: 'string'
},
age: {
description: 'User age',
type: 'number',
default: '0'
}
}}
/>Combined Example: FAQ Section
Here's a practical example combining multiple components:
Frequently Asked Questions - Find answers to common questions below.
API Configuration Example
Here's how you might document an API configuration object:
Prop
Type
Project Structure Example
A complete project structure visualization:
Pro Tip: These components make your documentation more interactive and easier to navigate!