Shadcn Registry Item Code Block

Demo

"use client";

import { ShadcnRegistryItemCodeBlock } from "@/components/domain-ui/shadcn-registry-item-code-block";

export default function ShadcnRegistryItemCodeBlockDemo() {
  return (
    <div className="w-full">
      <ShadcnRegistryItemCodeBlock url="https://supabase.com/ui/r/password-based-auth-nextjs.json" />
    </div>
  );
}

Installation

CLI

pnpm dlx shadcn@latest add https://domain-ui.dev/r/shadcn-registry-item-code-block.json

npx shadcn@latest add https://domain-ui.dev/r/shadcn-registry-item-code-block.json

npx shadcn@latest add https://domain-ui.dev/r/shadcn-registry-item-code-block.json

bunx --bun shadcn@latest add https://domain-ui.dev/r/shadcn-registry-item-code-block.json

Manual

Copy and paste the following code into your project:

Usage

import { ShadcnRegistryItemCodeBlock } from "@/components/ui/shadcn-registry-item-code-block";

export default function MyComponent() {
  return (
    <ShadcnRegistryItemCodeBlock url="https://supabase.com/ui/r/password-based-auth-nextjs.json" />
  );
}

API Reference

Props

Features

• File Tree Navigation: Interactive file tree for browsing multiple files
• Syntax Highlighting: Automatic language detection and syntax highlighting
• Collapsible Sidebar: Toggle the file tree to maximize code viewing area
• Dark Mode Support: Seamlessly adapts to light and dark themes
• Loading States: Graceful loading and error handling
• Single/Multi File Support: Optimized layouts for single or multiple files

Examples

Display a Supabase UI Component

<ShadcnRegistryItemCodeBlock url="https://supabase.com/ui/r/password-based-auth-nextjs.json" />

Display a shadcn/ui Component

<ShadcnRegistryItemCodeBlock url="https://ui.shadcn.com/registry/styles/default/button.json" />

Display Custom Registry Items

<ShadcnRegistryItemCodeBlock url="https://your-domain.com/registry/your-component.json" />

Registry Format

The component expects a JSON file in the shadcn registry format:

{
  "name": "component-name",
  "files": [
    {
      "path": "components/ui/component.tsx",
      "content": "// Component code here",
      "type": "registry:component"
    }
  ]
}

Dependencies

This component requires:

• fumadocs-ui for the code block component
• lucide-react for icons
• Tree component from kibo-ui

These will be automatically installed when using the CLI installation method.