---
title: "Shadcn Integration"
description: "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 i..."
last_updated: "2026-07-02T09:46:39.602004+00:00"
canonical_url: "https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/developer-tools/shadcn-integration"
---

<details>
<summary>Relevant source files</summary>

The following files were used as context for generating this wiki page:

- [packages/shadcn/src/manual-installation.ts](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/manual-installation.ts)
- [packages/tailwind/src/typography/styles.ts](https://github.com/blade47/fumadocs/blob/main/packages/tailwind/src/typography/styles.ts)
- [packages/base-ui/tsdown.config.ts](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/tsdown.config.ts)
- [packages/openapi/tsdown.config.ts](https://github.com/blade47/fumadocs/blob/main/packages/openapi/tsdown.config.ts)
- [packages/radix-ui/tsdown.config.ts](https://github.com/blade47/fumadocs/blob/main/packages/radix-ui/tsdown.config.ts)
- [packages/asyncapi/tsdown.config.ts](https://github.com/blade47/fumadocs/blob/main/packages/asyncapi/tsdown.config.ts)
- [packages/tailwind/src/typography/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/tailwind/src/typography/index.ts)
- [packages/shadcn/tsdown.config.ts](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/tsdown.config.ts)
- [packages/shadcn/src/rsc.tsx](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/rsc.tsx)
- [packages/radix-ui/css/shadcn.css](https://github.com/blade47/fumadocs/blob/main/packages/radix-ui/css/shadcn.css)
- [packages/radix-ui/css/preset.css](https://github.com/blade47/fumadocs/blob/main/packages/radix-ui/css/preset.css)
- [packages/base-ui/css/shadcn.css](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/css/shadcn.css)
- [packages/base-ui/css/preset.css](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/css/preset.css)
- [packages/shadcn/package.json](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/package.json)
- [packages/shadcn/tsconfig.json](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/tsconfig.json)
- [packages/shadcn/src/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/index.ts)
- [packages/radix-ui/registry/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/radix-ui/registry/index.ts)
- [packages/base-ui/registry/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/registry/index.ts)
- [packages/preview/waku.config.ts](https://github.com/blade47/fumadocs/blob/main/packages/preview/waku.config.ts)
- [packages/radix-ui/src/tailwind/typography.ts](https://github.com/blade47/fumadocs/blob/main/packages/radix-ui/src/tailwind/typography.ts)
- [packages/shadcn/src/types.ts](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/types.ts)
- [packages/radix-ui/css/preset-legacy.css](https://github.com/blade47/fumadocs/blob/main/packages/radix-ui/css/preset-legacy.css)
- [packages/preview/src/lib/cn.ts](https://github.com/blade47/fumadocs/blob/main/packages/preview/src/lib/cn.ts)
- [packages/story/src/utils/cn.ts](https://github.com/blade47/fumadocs/blob/main/packages/story/src/utils/cn.ts)
- [packages/preview/src/lib/source/config.ts](https://github.com/blade47/fumadocs/blob/main/packages/preview/src/lib/source/config.ts)
- [packages/base-ui/src/utils/cn.ts](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/src/utils/cn.ts)
- [packages/tailwind/tsdown.config.ts](https://github.com/blade47/fumadocs/blob/main/packages/tailwind/tsdown.config.ts)
- [packages/openapi/src/utils/cn.ts](https://github.com/blade47/fumadocs/blob/main/packages/openapi/src/utils/cn.ts)
- [packages/radix-ui/src/utils/cn.ts](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/utils.ts)
- [packages/base-ui/src/tailwind/typography.ts](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/src/tailwind/typography.ts)
</details>

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.

## Registry Context Initialization
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](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/index.ts#L15-L24)

## Manual Installation Generation Pipeline
The generation of installation instructions is a multi-stage pipeline that converts high-level component requirements into granular code snippets. 

1. **Item Collection**: The system performs a breadth-first search starting from the requested registry item, recursively resolving `registryDependencies` to ensure the entire dependency graph is captured.
2. **Data Extraction**: For each collected item, the system traverses its definitions—extracting docs, environment variables, CSS rules, and source files.
3. **Snippet Synthesis**: These assets are mapped to a collection of `ManualInstallationSnippet` objects.
4. **Final Assembly**: Install commands (npm/pnpm/yarn) are generated based on the collected dependencies, and all snippets are combined into a final array for rendering.

```mermaid
flowchart TD
    A[Start] --> B[collectItems]
    B --> C{Process<br>Dependencies}
    C --> D[Extract Metadata]
    D --> E[createInstallSnippets]
    E --> F[Return<br>Snippet List]
```
Sources: [packages/shadcn/src/manual-installation.ts:58-139](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/manual-installation.ts#L58-L139), [packages/shadcn/src/manual-installation.ts:141-175](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/manual-installation.ts#L141-L175)

## Dependency Resolution Logic
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.

Sources: [packages/shadcn/src/manual-installation.ts:67-77](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/manual-installation.ts#L67-L77)

## CSS Variable and Rule Formatting
The subsystem includes specific logic to format raw CSS input into readable code snippets. It handles three distinct tiers of CSS configuration:

| Kind | Trigger | Formatting |
| :--- | :--- | :--- |
| `cssVars` | `hasCssVars()` returns true | Wraps variables in `:root` or `.dark` blocks |
| `css` | Presence in item | Recursively formats records with indentation support |
| `tailwind` | Presence of config | Serializes TS config objects to JSON string |

> [!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](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/manual-installation.ts#L94-L116), [packages/shadcn/src/manual-installation.ts:264-321](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/manual-installation.ts#L264-L321)

## RSC Rendering Integration
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:

- **Dependency tabs**: Renders via `CodeBlockTabs` if the snippet type is an installation dependency.
- **Documentation**: Renders simple paragraph content for doc-kind snippets.
- **Code files/others**: Renders via `ServerCodeBlock` with associated `transformerIcon` and `transformerNotationDiff` to ensure proper syntax highlighting and UI cues.

Sources: [packages/shadcn/src/rsc.tsx:28-67](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/rsc.tsx#L28-L67)

## API Usage Example
To integrate these capabilities into a documentation service, use the `createShadcnDocs` factory to bind the registry and call the `getManualInstallation` method:

```typescript
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](https://github.com/blade47/fumadocs/blob/main/packages/shadcn/src/index.ts#L15-L24)

## Related

- [Command Line Interface](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/developer-tools/command-line-interface)
- [Layout System](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/rendering-ui/layout-system)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/llms.txt) for all pages in this wiki.