Reusable documentation components from @/lib/docs
Full documentation page layout with sidebar, search, and responsive mobile support.
Schematic view of DocLayout with sidebar, content area, and table of contents
Command palette search (โK) with fuzzy matching across all documentation pages.
Click the button or press โK to open search
Auto-generated TOC from markdown headings with scroll spy and smooth scrolling.
## Introduction This is a sample document to demonstrate the Table of Contents component. ### Getting Started Start by installing the package with your preferred package manager. ### Configuration Configure the library by creating a config file at the root of your project. ## Advanced Usage ### Custom Themes You can customize the appearance using CSS variables. ### Plugins Extend functionality with the plugin system.
Content wrapper with styled header, title gradient, description, and prose styling.
Learn how to set up and use the documentation system in your project.
Install the package using your preferred package manager:
pnpm add @your-org/docsImport the components and use them in your application. The DocLayout component provides a complete documentation page structure.
Animated progress bar fixed at the top showing scroll position.
The actual component is fixed at the top of the viewport and tracks scroll automatically
Wrapper that applies Prism.js syntax highlighting to code blocks.
interface DocConfig {
title: string;
basePath: string;
locale: "en" | "zh";
sidebar: DocItem[];
}
function createDocsApp(config: DocConfig) {
return {
...config,
getStructure: () => getDocsStructure(config.locale),
};
}Card and CardGrid components for navigation links within MDX documentation.
Learn the basics and set up your project quickly.
Browse all available UI components.
Complete API documentation and examples.
Step-by-step guides for common tasks.
Customize and configure the system.
Frequently asked questions and answers.