16aaf55a91
- Updated content collections to include new schemas for better document handling. - Added new documentation files for comparisons, customization, and internationalization. - Introduced a manual installation guide and improved markdown support. - Updated package.json with new dependencies for enhanced functionality. - Added new images for documentation and improved layout components for better user experience. - Adjusted TypeScript configurations for better path management.
61 lines
1.9 KiB
Plaintext
61 lines
1.9 KiB
Plaintext
---
|
|
title: Overview
|
|
description: An overview of Fumadocs UI
|
|
---
|
|
|
|
## Architecture
|
|
|
|
<UiOverview />
|
|
|
|
| | |
|
|
| ------------- | ------------------------------------------------------- |
|
|
| **Sidebar** | Display site title and navigation elements. |
|
|
| **Page Tree** | Passed by you, mainly rendered as the items of sidebar. |
|
|
| **Docs Page** | All content of the page. |
|
|
| **TOC** | Navigation within the article. |
|
|
|
|
### 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
|
|
```
|