52 lines
1.5 KiB
Plaintext
52 lines
1.5 KiB
Plaintext
---
|
|
title: Overview
|
|
description: An overview of Fumadocs UI
|
|
---
|
|
|
|
## Architecture
|
|
|
|
### Page Tree
|
|
|
|
Navigation elements like sidebar take a [Page Tree](/docs/headless/page-tree) to render navigation links, it's a tree that describes all available pages and folders.
|
|
|
|
Normally, it is generated from your file structure using [`loader()`](/docs/headless/source-api), you can learn [how to organize pages](/docs/page-conventions).
|
|
|
|
## Customisation
|
|
|
|
### Layouts
|
|
|
|
You can use the exposed options of different layouts:
|
|
|
|
<Cards>
|
|
<Card title="Docs Layout" href="/docs/layouts/docs">
|
|
Layout for docs
|
|
</Card>
|
|
<Card title="Docs Page" href="/docs/layouts/page">
|
|
Layout for docs content
|
|
</Card>
|
|
<Card title="Notebook Layout" href="/docs/layouts/notebook">
|
|
A more compact version of Docs Layout
|
|
</Card>
|
|
<Card title="Home Layout" href="/docs/layouts/home-layout">
|
|
Layout for other pages
|
|
</Card>
|
|
</Cards>
|
|
|
|
### Components
|
|
|
|
Fumadocs UI also offers styled components for interactive examples to enhance your docs, you can customise them with exposed props like `style` and `className`.
|
|
|
|
See [Components](/docs/components).
|
|
|
|
### Design System
|
|
|
|
Since the design system is built on Tailwind CSS, you can customise it [with CSS Variables](/docs/theme#colors).
|
|
|
|
### CLI
|
|
|
|
If none of them suits you, Fumadocs CLI is a tool to install Fumadocs UI components and layouts to your codebase, similar to Shadcn UI. Allowing you to fully customise Fumadocs UI:
|
|
|
|
```package-install
|
|
npx fumadocs add
|
|
```
|