Orientation
Content Processing
Search Infrastructure
Rendering and UI
Developer Tooling
How It Works
The following files were used as context for generating this wiki page:
The Shadcn Integration component is a specialized subsystem designed to bridge the gap between structured component registries and documentation delivery. It enables developers to generate manual installation snippets for components, configurations, and CSS rules defined in shadcn registries, specifically tailored for display within a documentation interface.
The core design principle is the programmatic transformation of raw registry metadata into user-friendly content. By parsing registry JSON files, the system extracts critical setup information—such as dependencies, environment variables, CSS configurations, and file contents—and serializes them into a standardized format (ManualInstallationSnippet) that documentation UI components can easily consume and render.
This subsystem provides a consistent interface for managing library installations, ensuring that documentation remains accurate by dynamically reading the same registry sources that drive the installation CLI. It bridges the gap between raw file-based registries and the interactive, React-based components (RSC) used to showcase these integrations in documentation sites.
The integration begins with the createShadcnDocs function, which initializes the registry environment. It creates a RegistryContext object that maintains state regarding the directory and the path to the registry.json file. This context is subsequently bound to the getManualInstallation method, ensuring all downstream file operations occur relative to the specific registry provided.
Sources: packages/shadcn/src/index.ts:15-24
The generation of installation instructions is a multi-stage pipeline that converts high-level component requirements into granular code snippets.
registryDependencies to ensure the entire dependency graph is captured.ManualInstallationSnippet objects.Sources: packages/shadcn/src/manual-installation.ts:58-139, packages/shadcn/src/manual-installation.ts:141-175
When collecting dependencies, the system maintains separate Set instances for dependencies, devDependencies, and registryDependencies. These sets automatically deduplicate entries across the entire resolution tree, preventing redundant command generation.
Note
During registry dependency collection, if includeRegistryDependencies is false, the system stops the recursion but explicitly adds existing dependencies to the registryDependencies set, ensuring users are aware of what they need to add.
The subsystem includes specific logic to format raw CSS input into readable code snippets. It handles three distinct tiers of CSS configuration:
Caution
When formatting CSS rules, the system treats object keys starting with @ (like @media) as containers, triggering recursive calls to formatCssRules with increased indentation, while simple strings are treated as property assignments with trailing semicolons.
Sources: packages/shadcn/src/manual-installation.ts:94-116, packages/shadcn/src/manual-installation.ts:264-321
The integration exposes a React Server Component (RSC) interface (Snippet) designed to render generated snippets. It uses a switcher pattern to select the appropriate UI component:
CodeBlockTabs if the snippet type is an installation dependency.ServerCodeBlock with associated transformerIcon and transformerNotationDiff to ensure proper syntax highlighting and UI cues.Sources: packages/shadcn/src/rsc.tsx:28-67
To integrate these capabilities into a documentation service, use the createShadcnDocs factory to bind the registry and call the getManualInstallation method:
import { createShadcnDocs } from '@fumadocs/shadcn';
const registryDocs = createShadcnDocs({
registryPath: './registry.json',
});
// Retrieve snippets for a specific component
const snippets = await registryDocs.getManualInstallation({
name: 'button',
includeRegistryDependencies: true,
});Sources: packages/shadcn/src/index.ts:15-24