91:I[903690,["/chat-static/_next/static/immutable/chunks/0411bdxfbeniw.js","/chat-static/_next/static/immutable/chunks/24g-e1plqimjd.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/15te13l_0aokw.js","/chat-static/_next/static/immutable/chunks/3mqqjk7btl-q3.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/13swkeoj_7gd7.js","/chat-static/_next/static/immutable/chunks/0ox1w_skv5i01.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/03ggsewfdnt13.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/30g_pmqpnaqh0.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/3ak2clbc09163.js","/chat-static/_next/static/immutable/chunks/3xbcfm8ji-xnl.js","/chat-static/_next/static/immutable/chunks/2gu0aetgviqpj.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2j9ejspyv5gjj.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1kvzodmjemrnt.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/2kosfxqe1lmj7.js","/chat-static/_next/static/immutable/chunks/1ipe_dsc-e9gt.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/2ddpysx1qz1j9.js","/chat-static/_next/static/immutable/chunks/0kld-wnfh2dtn.js","/chat-static/_next/static/immutable/chunks/2hlt206nuvb_q.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1y-s_5v3gpgrs.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/1wdjjp6taywpy.js"],"ExplicitChatIdProvider"] 92:I[838238,["/chat-static/_next/static/immutable/chunks/0411bdxfbeniw.js","/chat-static/_next/static/immutable/chunks/24g-e1plqimjd.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/15te13l_0aokw.js","/chat-static/_next/static/immutable/chunks/3mqqjk7btl-q3.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/13swkeoj_7gd7.js","/chat-static/_next/static/immutable/chunks/0ox1w_skv5i01.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/03ggsewfdnt13.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/30g_pmqpnaqh0.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/3ak2clbc09163.js","/chat-static/_next/static/immutable/chunks/3xbcfm8ji-xnl.js","/chat-static/_next/static/immutable/chunks/2gu0aetgviqpj.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2j9ejspyv5gjj.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1kvzodmjemrnt.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/2kosfxqe1lmj7.js","/chat-static/_next/static/immutable/chunks/1ipe_dsc-e9gt.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/2ddpysx1qz1j9.js","/chat-static/_next/static/immutable/chunks/0kld-wnfh2dtn.js","/chat-static/_next/static/immutable/chunks/2hlt206nuvb_q.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1y-s_5v3gpgrs.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/1wdjjp6taywpy.js"],"SWRDataProvider"] 93:Tc26f,[V0_FILE]sql:file="scripts/setup-database.sql" -- Create registries table CREATE TABLE IF NOT EXISTS registries ( id TEXT PRIMARY KEY, name TEXT NOT NULL, description TEXT, files JSONB NOT NULL, created_at TIMESTAMP DEFAULT NOW() NOT NULL, updated_at TIMESTAMP DEFAULT NOW() NOT NULL ); -- Create index on created_at for sorting CREATE INDEX IF NOT EXISTS registries_created_at_idx ON registries(created_at DESC); [V0_FILE]typescriptreact:file="app/page.tsx" import { RegistryForm } from "@/components/registry-form" export default function Home() { return (

shadcn registry generator

Share your components with the shadcn ecosystem

) } [V0_FILE]typescriptreact:file="components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cn } from "@/lib/utils" const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" export { Card } [V0_FILE]typescriptreact:file="app/registry/[id]/not-found.tsx" import Link from "next/link" import { FileQuestion } from "lucide-react" import { Button } from "@/components/ui/button" export default function NotFound() { return (

Registry Not Found

The registry you're looking for doesn't exist or has been removed.

) } [V0_FILE]typescriptreact:file="lib/hooks/use-copy-to-clipboard.ts" "use client" import { useState, useCallback } from "react" export function useCopyToClipboard() { const [isCopied, setIsCopied] = useState(false) const copyToClipboard = useCallback(async (text: string) => { try { await navigator.clipboard.writeText(text) setIsCopied(true) setTimeout(() => setIsCopied(false), 2000) return true } catch (error) { console.error("Failed to copy:", error) return false } }, []) return { isCopied, copyToClipboard } } [V0_FILE]typescriptreact:file="components/copy-button.tsx" "use client" import { Copy, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { useCopyToClipboard } from "@/lib/hooks/use-copy-to-clipboard" interface CopyButtonProps { text: string label?: string variant?: "default" | "outline" | "ghost" size?: "default" | "sm" | "lg" } export function CopyButton({ text, label = "Copy", variant = "outline", size = "sm" }: CopyButtonProps) { const { isCopied, copyToClipboard } = useCopyToClipboard() return ( ) } [V0_FILE]typescript:file="app/actions/registry.ts" "use server" import { nanoid } from "nanoid" import { neon } from "@neondatabase/serverless" import { revalidatePath } from "next/cache" export async function createRegistry(formData: { name: string description?: string files: Array<{ path: string; content: string }> }) { try { console.log("[v0] Server action called with data:", formData) const { name, description, files } = formData if (!name || !files || !Array.isArray(files) || files.length === 0) { console.log("[v0] Validation failed") return { error: "Name and at least one file are required" } } for (const file of files) { if (!file.path || !file.content) { console.log("[v0] File validation failed") return { error: "Each file must have a path and content" } } } const id = nanoid(8) console.log("[v0] Generated ID:", id) const sql = neon(process.env.NEON_DATABASE_URL!) console.log("[v0] Attempting database insert") const result = await sql` INSERT INTO registries (id, name, description, files, created_at, updated_at) VALUES (${id}, ${name}, ${description || null}, ${JSON.stringify(files)}, NOW(), NOW()) RETURNING * ` const registry = result[0] console.log("[v0] Registry created:", registry.id) revalidatePath("/") return { success: true, registry } } catch (error) { console.error("[v0] Server action error:", error) return { error: "Failed to create registry. Make sure the database table exists.", details: error instanceof Error ? error.message : String(error), } } } export async function getRegistry(id: string) { try { const sql = neon(process.env.NEON_DATABASE_URL!) const result = await sql` SELECT * FROM registries WHERE id = ${id} ` if (result.length === 0) { return { error: "Registry not found" } } return { success: true, registry: result[0] } } catch (error) { console.error("[v0] Error fetching registry:", error) return { error: "Failed to fetch registry", details: error instanceof Error ? error.message : String(error), } } } [V0_FILE]typescript:file="lib/db/index.ts" import { neon } from "@neondatabase/serverless" if (!process.env.NEON_DATABASE_URL) { throw new Error("NEON_DATABASE_URL environment variable is not set") } export const sql = neon(process.env.NEON_DATABASE_URL) [V0_FILE]typescriptreact:file="components/ui/sonner.tsx" "use client" import type React from "react" import { useTheme } from "next-themes" import { Toaster as Sonner } from "sonner" type ToasterProps = React.ComponentProps const Toaster = ({ ...props }: ToasterProps) => { const { theme = "system" } = useTheme() return ( ) } export { Toaster } [V0_FILE]typescriptreact:file="components/registry-form.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Plus, Loader2, WrapText } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { FileAccordion } from "@/components/file-accordion" import { useRouter } from "next/navigation" import { createRegistry } from "@/app/actions/registry" import { toast } from "sonner" export function RegistryForm() { const router = useRouter() const [name, setName] = useState("") const [description, setDescription] = useState("") const [files, setFiles] = useState([{ path: "components/example.tsx", content: "function Greet({ name : { name: string }) {\n return (\n

hello {name}!

\n )\n}" }]) const [isSubmitting, setIsSubmitting] = useState(false) const [lineWrapping, setLineWrapping] = useState(false) const addFile = () => { const untitledNumbers = files .map((f) => { const match = f.path.match(/^Untitled-(\d+)/) return match ? Number.parseInt(match[1], 10) : null }) .filter((n): n is number => n !== null) let nextNumber = 1 while (untitledNumbers.includes(nextNumber)) { nextNumber++ } setFiles([...files, { path: `Untitled-${nextNumber}`, content: "" }]) } const updateFile = (index: number, field: "path" | "content", value: string) => { const newFiles = [...files] newFiles[index] = { ...newFiles[index], [field]: value } setFiles(newFiles) } const removeFile = (index: number) => { if (files.length > 1) { setFiles(files.filter((_, i) => i !== index)) } } const handleSubmit = async () => { if (!name.trim()) { toast.error("Please enter a registry name") return } if (files.some((f) => !f.path.trim())) { toast.error("Please provide file paths for all files") return } if (files.some((f) => !f.content.trim())) { toast.error("Please add content to all files") return } setIsSubmitting(true) try { const result = await createRegistry({ name, description, files }) if (result.error) { throw new Error(result.details || result.error) } if (result.success && result.registry) { toast.success("Registry created successfully!") router.push(`/registry/${result.registry.id}`) } } catch (error) { toast.error(`Failed to create registry: ${error instanceof Error ? error.message : "Unknown error"}`) } finally { setIsSubmitting(false) } } return (

Registry Name setName(e.target.value)} className="font-mono" />

Description (optional)

setDescription(e.target.value)}
            rows={3}
          />
        </div>

<div className="flex flex-col gap-2">
          <Label>Files</Label>
          <div className="space-y-3">
            {files.map((file, index) => (
              <FileAccordion
                key={index}
                file={file}
                index={index}
                onUpdate={updateFile}
                onRemove={removeFile}
                lineWrapping={lineWrapping}
              />
            ))}
          </div>
        </div>
      </div>

<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50">
        <div className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border rounded-full shadow-lg transition-all duration-300">
          {isSubmitting ? (
            <div className="px-6 py-3 flex items-center gap-3">
              <Loader2 className="h-4 w-4 animate-spin" />
              <span className="text-sm font-medium">Publishing...</span>
            </div>
          ) : (
            <div className="px-3 py-2 flex items-center gap-2">
              {/* Tools section */}
              <Button
                type="button"
                variant={lineWrapping ? "secondary" : "ghost"}
                size="sm"
                onClick={() => setLineWrapping(!lineWrapping)}
                className="gap-1.5 rounded-full px-3"
                title="Toggle line wrapping"
              >
                <WrapText className="h-3.5 w-3.5" />
                <span className="text-xs">Wrap</span>
              </Button>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={addFile}
                className="gap-1.5 rounded-full px-3"
              >
                <Plus className="h-3.5 w-3.5" />
                <span className="text-xs">Add File</span>
              </Button>

<Button onClick={handleSubmit} size="sm" className="rounded-full px-4">
                <span className="text-xs font-medium">Publish</span>
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isQuickEdit="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --font-jetbrains-mono: "JetBrains Mono", "Courier New", monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"
import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.0",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.76",
    "@neondatabase/serverless": "^0.10.1",
    "nanoid": "^5.0.7",
    "@uiw/react-codemirror": "^4.23.5",
    "@codemirror/lang-javascript": "^6.2.2",
    "@codemirror/lang-json": "^6.0.1",
    "@codemirror/lang-css": "^6.3.0",
    "@codemirror/lang-html": "^6.4.9",
    "@codemirror/lang-python": "^6.1.6",
    "@codemirror/lang-xml": "^6.1.0",
    "@codemirror/lang-markdown": "^6.3.0",
    "@codemirror/view": "^6.34.1",
    "@codemirror/state": "6.5.2",
    "@codemirror/language": "6.11.3",
    "@lezer/highlight": "1.2.3"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"

import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

import { Toaster } from "@/components/ui/sonner"

import { Geist, Geist_Mono, JetBrains_Mono, Geist as V0_Font_Geist, Geist_Mono as V0_Font_Geist_Mono, Source_Serif_4 as V0_Font_Source_Serif_4 } from 'next/font/google'

// Initialize fonts
const _geist = V0_Font_Geist({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] })
const _geistMono = V0_Font_Geist_Mono({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] })
const _sourceSerif_4 = V0_Font_Source_Serif_4({ subsets: ['latin'], weight: ["200","300","400","500","600","700","800","900"] })

const geist = Geist({
  subsets: ["latin"],
  variable: "--font-geist",
})

const geistMono = Geist_Mono({
  subsets: ["latin"],
  variable: "--font-geist-mono",
})

const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-jetbrains-mono",
})

export const metadata: Metadata = {
  title: "v0 App",
  description: "Created with v0",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased ${jetbrainsMono.variable}`}>
        {children}
        <Analytics />
        <Toaster />
      </body>
    </html>
  )
}
[V0_FILE]typescript:file="lib/utils/dependency-parser.ts"
/**
 * Extracts npm dependencies from TypeScript/JavaScript file content
 */
export function extractDependencies(content: string): string[] {
  const dependencies = new Set<string>()

// Match import statements: import ... from 'package' or import ... from "package"
  const importRegex = /import\s+(?:(?:\{[^}]*\}|\*\s+as\s+\w+|\w+)(?:\s*,\s*)?)+\s+from\s+['"]([^'"]+)['"]/g
  // Match dynamic imports: import('package')
  const dynamicImportRegex = /import\s*$$\s*['"]([^'"]+)['"]\s*$$/g
  // Match require: require('package')
  const requireRegex = /require\s*$$\s*['"]([^'"]+)['"]\s*$$/g

const allMatches = [
    ...content.matchAll(importRegex),
    ...content.matchAll(dynamicImportRegex),
    ...content.matchAll(requireRegex),
  ]

for (const match of allMatches) {
    const pkg = match[1]

// Skip relative imports (start with . or /)
    if (pkg.startsWith(".") || pkg.startsWith("/")) continue

// Skip Next.js internal imports
    if (pkg.startsWith("next/") || pkg === "next") continue

// Skip React (assumed to be installed)
    if (pkg === "react" || pkg === "react-dom") continue

// Skip @/ alias imports (internal project files)
    if (pkg.startsWith("@/")) continue

// Extract package name (handle scoped packages like @radix-ui/react-dialog)
    const packageName = pkg.startsWith("@") ? pkg.split("/").slice(0, 2).join("/") : pkg.split("/")[0]

dependencies.add(packageName)
  }

return Array.from(dependencies).sort()
}

/**
 * Extracts shadcn/ui component dependencies from TypeScript/JavaScript file content
 */
export function extractRegistryDependencies(content: string): string[] {
  const registryDeps = new Set<string>()

// Match imports from @/components/ui/*
  const uiImportRegex =
    /import\s+(?:(?:\{[^}]*\}|\*\s+as\s+\w+|\w+)(?:\s*,\s*)?)+\s+from\s+['"]@\/components\/ui\/([^'"]+)['"]/g

for (const match of content.matchAll(uiImportRegex)) {
    const componentFile = match[1]
    // Remove .tsx, .ts, .jsx, .js extensions if present
    const componentName = componentFile.replace(/\.(tsx?|jsx?)$/, "")
    registryDeps.add(componentName)
  }

return Array.from(registryDeps).sort()
}

/**
 * Detects the type of file based on content and path
 */
export function detectFileType(path: string, content: string): string {
  // Check if it's a component file
  if (path.includes("/components/") || path.includes("/ui/")) {
    return "registry:component"
  }

// Check if it's a hook
  if (path.includes("/hooks/") || path.match(/use-[a-z-]+\.(ts|tsx|js|jsx)$/)) {
    return "registry:hook"
  }

// Check if it's a lib/utility file
  if (path.includes("/lib/") || path.includes("/utils/")) {
    return "registry:lib"
  }

// Default to file
  return "registry:file"
}
[V0_FILE]typescript:file="app/r/[id]/route.ts"
import type { NextRequest } from "next/server"
import { sql } from "@/lib/db"
import { extractDependencies, extractRegistryDependencies, detectFileType } from "@/lib/utils/dependency-parser"

export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    const { id } = await params

const result = await sql`
      SELECT id, name, description, files
      FROM registries
      WHERE id = ${id}
      LIMIT 1
    `

if (!result || result.length === 0) {
      return Response.json({ error: "Registry not found" }, { status: 404 })
    }

const registry = result[0]
    const files = registry.files as Array<{ path: string; content: string }>

const allDependencies = new Set<string>()
    const allRegistryDependencies = new Set<string>()

files.forEach((file) => {
      const deps = extractDependencies(file.content)
      const regDeps = extractRegistryDependencies(file.content)

deps.forEach((dep) => allDependencies.add(dep))
      regDeps.forEach((dep) => allRegistryDependencies.add(dep))
    })

const shadcnRegistry = {
      $schema: "https://ui.shadcn.com/schema/registry-item.json",
      name: registry.name,
      type: "registry:block",
      description: registry.description || undefined,
      dependencies: Array.from(allDependencies),
      registryDependencies: Array.from(allRegistryDependencies),
      files: files.map((file) => ({
        path: file.path,
        content: file.content,
        type: detectFileType(file.path, file.content),
        target: `~/${file.path}`
      })),
    }

return Response.json(shadcnRegistry)
  } catch (error) {
    console.error("[v0] Error fetching registry:", error)
    return Response.json({ error: "Failed to fetch registry" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/file-accordion.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { X } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import CodeMirror from "@uiw/react-codemirror"
import { javascript } from "@codemirror/lang-javascript"
import { EditorView } from "@codemirror/view"
import { css } from "@codemirror/lang-css"
import { html } from "@codemirror/lang-html"
import { json } from "@codemirror/lang-json"
import { python } from "@codemirror/lang-python"
import { xml } from "@codemirror/lang-xml"
import { markdown } from "@codemirror/lang-markdown"
import { vercelThemeExtension } from "@/lib/codemirror-theme"

interface FileAccordionProps {
  file: {
    path: string
    content: string
  }
  index: number
  onUpdate: (index: number, field: "path" | "content", value: string) => void
  onRemove: (index: number) => void
  lineWrapping?: boolean
}

function getLanguageExtension(filePath: string) {
  const ext = filePath.split(".").pop()?.toLowerCase()

switch (ext) {
    case "js":
    case "jsx":
      return javascript({ jsx: true })
    case "ts":
    case "tsx":
      return javascript({ jsx: true, typescript: true })
    case "json":
      return json()
    case "css":
    case "scss":
    case "sass":
      return css()
    case "html":
      return html()
    case "xml":
    case "svg":
      return xml()
    case "py":
      return python()
    case "md":
    case "mdx":
      return markdown()
    default:
      return javascript({ jsx: true, typescript: true })
  }
}

export function FileAccordion({ file, index, onUpdate, onRemove, lineWrapping = false }: FileAccordionProps) {
  const [isEditingPath, setIsEditingPath] = useState(false)

return (
    <Accordion
      type="single"
      collapsible
      defaultValue={`item-${index}`}
      className="border rounded-lg overflow-hidden bg-card"
    >
      <AccordionItem value={`item-${index}`} className="border-none">
        <div className="flex items-center gap-2 px-4 bg-muted/50">
          <AccordionTrigger className="flex-none hover:no-underline [&>svg]:rotate-270 [&[data-state=open]>svg]:rotate-360" />

{isEditingPath ? (
            <Input
              value={file.path}
              onChange={(e) => onUpdate(index, "path", e.target.value)}
              onBlur={() => setIsEditingPath(false)}
              onKeyDown={(e) => e.key === "Enter" && setIsEditingPath(false)}
              className="h-7 font-mono text-sm focus-visible:ring-1 focus-visible:ring-ring"
              autoFocus
              onClick={(e) => e.stopPropagation()}
            />
          ) : (
            <button
              onClick={(e) => {
                e.stopPropagation()
                setIsEditingPath(true)
              }}
              className="font-mono text-sm text-foreground hover:text-primary transition-colors flex-1 text-left truncate"
            >
              {file.path || `Untitled-${index + 1}`}
            </button>
          )}

<Button
            variant="ghost"
            size="sm"
            onClick={() => onRemove(index)}
            className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive flex-none"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>

<AccordionContent className="pb-0">
          <div className="border-t">
            <CodeMirror
              value={file.content}
              height="300px"
              extensions={[
                getLanguageExtension(file.path),
                ...(lineWrapping ? [EditorView.lineWrapping] : []),
                vercelThemeExtension,
              ]}
              onChange={(value) => onUpdate(index, "content", value)}
              className="font-[family-name:var(--font-jetbrains-mono)]"
              style={{
                fontFamily: "var(--font-jetbrains-mono)",
              }}
              basicSetup={{
                lineNumbers: true,
                highlightActiveLineGutter: true,
                highlightSpecialChars: true,
                foldGutter: true,
                drawSelection: true,
                dropCursor: true,
                allowMultipleSelections: true,
                indentOnInput: true,
                bracketMatching: true,
                closeBrackets: true,
                autocompletion: false,
                rectangularSelection: true,
                crosshairCursor: true,
                highlightActiveLine: true,
                highlightSelectionMatches: true,
                closeBracketsKeymap: true,
                searchKeymap: true,
                foldKeymap: true,
                completionKeymap: false,
                lintKeymap: true,
              }}
            />
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
[V0_FILE]typescript:file="lib/codemirror-theme.ts" isQuickEdit="true"
import { EditorView } from "@codemirror/view"
import type { Extension } from "@codemirror/state"
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"
import { tags as t } from "@lezer/highlight"

// Vercel-inspired dark theme for CodeMirror
export const vercelThemeDark = EditorView.theme(
  {
    "&": {
      color: "#d4d4d4",
      backgroundColor: "#0a0a0a",
      fontSize: "13px",
      fontFamily: "var(--font-jetbrains-mono)",
    },
    ".cm-content": {
      caretColor: "#ffffff",
    },
    ".cm-cursor, .cm-dropCursor": {
      borderLeftColor: "#ffffff",
    },
    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
      {
        backgroundColor: "#264f78",
      },
    ".cm-panels": {
      backgroundColor: "#161616",
      color: "#d4d4d4",
    },
    ".cm-panels.cm-panels-top": {
      borderBottom: "1px solid #262626",
    },
    ".cm-panels.cm-panels-bottom": {
      borderTop: "1px solid #262626",
    },
    ".cm-searchMatch": {
      backgroundColor: "#515c6a",
    },
    ".cm-searchMatch.cm-searchMatch-selected": {
      backgroundColor: "#6c8ab3",
    },
    ".cm-activeLine": {
      backgroundColor: "#161616",
    },
    ".cm-selectionMatch": {
      backgroundColor: "#515c6a",
    },
    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
      backgroundColor: "#515c6a",
    },
    ".cm-gutters": {
      backgroundColor: "#0a0a0a",
      color: "#6e7681",
      border: "none",
    },
    ".cm-activeLineGutter": {
      backgroundColor: "#161616",
    },
    ".cm-foldPlaceholder": {
      backgroundColor: "transparent",
      border: "none",
      color: "#6e7681",
    },
    ".cm-tooltip": {
      border: "1px solid #262626",
      backgroundColor: "#161616",
    },
    ".cm-tooltip .cm-tooltip-arrow:before": {
      borderTopColor: "transparent",
      borderBottomColor: "transparent",
    },
    ".cm-tooltip .cm-tooltip-arrow:after": {
      borderTopColor: "#161616",
      borderBottomColor: "#161616",
    },
    ".cm-tooltip-autocomplete": {
      "& > ul > li[aria-selected]": {
        backgroundColor: "#264f78",
        color: "#d4d4d4",
      },
    },
  },
  { dark: true },
)

// Vercel-inspired light theme for CodeMirror
export const vercelThemeLight = EditorView.theme({
  "&": {
    color: "#24292f",
    backgroundColor: "#ffffff",
    fontSize: "13px",
    fontFamily: "var(--font-jetbrains-mono)",
  },
  ".cm-content": {
    caretColor: "#24292f",
  },
  ".cm-cursor, .cm-dropCursor": {
    borderLeftColor: "#24292f",
  },
  "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
    {
      backgroundColor: "#d4f0ff",
    },
  ".cm-panels": {
    backgroundColor: "#f6f8fa",
    color: "#24292f",
  },
  ".cm-panels.cm-panels-top": {
    borderBottom: "1px solid #e1e4e8",
  },
  ".cm-panels.cm-panels-bottom": {
    borderTop: "1px solid #e1e4e8",
  },
  ".cm-activeLine": {
    backgroundColor: "#f6f8fa",
  },
  ".cm-gutters": {
    backgroundColor: "#fafbfc",
    color: "#57606a",
    border: "none",
    borderRight: "1px solid #e1e4e8",
  },
  ".cm-activeLineGutter": {
    backgroundColor: "#f6f8fa",
  },
  ".cm-foldPlaceholder": {
    backgroundColor: "transparent",
    border: "none",
    color: "#57606a",
  },
  ".cm-tooltip": {
    border: "1px solid #e1e4e8",
    backgroundColor: "#ffffff",
  },
})

// Syntax highlighting colors matching Vercel's dark style
export const vercelHighlightStyleDark = HighlightStyle.define([
  { tag: t.keyword, color: "#c586c0" },
  { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: "#9cdcfe" },
  { tag: [t.function(t.variableName), t.labelName], color: "#dcdcaa" },
  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: "#4fc1ff" },
  { tag: [t.definition(t.name), t.separator], color: "#d4d4d4" },
  {
    tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
    color: "#4ec9b0",
  },
  { tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)], color: "#d4d4d4" },
  { tag: [t.meta, t.comment], color: "#6a9955" },
  { tag: t.strong, fontWeight: "bold" },
  { tag: t.emphasis, fontStyle: "italic" },
  { tag: t.strikethrough, textDecoration: "line-through" },
  { tag: t.link, color: "#3794ff", textDecoration: "underline" },
  { tag: t.heading, fontWeight: "bold", color: "#9cdcfe" },
  { tag: [t.atom, t.bool, t.special(t.variableName)], color: "#569cd6" },
  { tag: [t.processingInstruction, t.string, t.inserted], color: "#ce9178" },
  { tag: t.invalid, color: "#f44747" },
])

// Syntax highlighting colors matching Vercel's light style
export const vercelHighlightStyleLight = HighlightStyle.define([
  { tag: t.keyword, color: "#cf222e" },
  { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: "#0550ae" },
  { tag: [t.function(t.variableName), t.labelName], color: "#8250df" },
  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: "#0969da" },
  { tag: [t.definition(t.name), t.separator], color: "#24292f" },
  {
    tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
    color: "#0969da",
  },
  { tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)], color: "#cf222e" },
  { tag: [t.meta, t.comment], color: "#57606a", fontStyle: "italic" },
  { tag: t.strong, fontWeight: "bold" },
  { tag: t.emphasis, fontStyle: "italic" },
  { tag: t.strikethrough, textDecoration: "line-through" },
  { tag: t.link, color: "#0969da", textDecoration: "underline" },
  { tag: t.heading, fontWeight: "bold", color: "#0550ae" },
  { tag: [t.atom, t.bool, t.special(t.variableName)], color: "#0969da" },
  { tag: [t.processingInstruction, t.string, t.inserted], color: "#0a3069" },
  { tag: t.invalid, color: "#cf222e" },
])

// Combined extension for dark theme easy use
export const vercelThemeDarkExtension: Extension = [vercelThemeDark, syntaxHighlighting(vercelHighlightStyleDark)]

// Combined extension for light theme easy use
export const vercelThemeLightExtension: Extension = [vercelThemeLight, syntaxHighlighting(vercelHighlightStyleLight)]

// Default export for backward compatibility - uses light theme
export const vercelThemeExtension: Extension = vercelThemeLightExtension
[V0_FILE]typescriptreact:file="app/registry/[id]/page.tsx"
import { notFound } from "next/navigation"
import { sql } from "@/lib/db"
import { RegistryView } from "@/components/registry-view"
import { extractDependencies, extractRegistryDependencies } from "@/lib/utils/dependency-parser"

export default async function RegistryPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params

const result = await sql`
    SELECT id, name, description, files, created_at, updated_at
    FROM registries
    WHERE id = ${id}
    LIMIT 1
  `

if (!result || result.length === 0) {
    notFound()
  }

const registry = result[0]

const files = registry.files as Array<{ path: string; content: string }>
  const allDependencies = new Set<string>()
  const allRegistryDependencies = new Set<string>()

files.forEach((file) => {
    const deps = extractDependencies(file.content)
    const regDeps = extractRegistryDependencies(file.content)

deps.forEach((dep) => allDependencies.add(dep))
    regDeps.forEach((dep) => allRegistryDependencies.add(dep))
  })

return (
    <RegistryView
      registry={registry}
      dependencies={Array.from(allDependencies)}
      registryDependencies={Array.from(allRegistryDependencies)}
    />
  )
}
[V0_FILE]typescriptreact:file="components/registry-view.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { ChevronRight, FileCode, Copy, Check, Calendar, ArrowLeft, Package } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import Link from "next/link"
import CodeMirror from "@uiw/react-codemirror"
import { javascript } from "@codemirror/lang-javascript"
import { json } from "@codemirror/lang-json"
import { css } from "@codemirror/lang-css"
import { html } from "@codemirror/lang-html"
import { EditorView } from "@codemirror/view"
import { vercelThemeExtension } from "@/lib/codemirror-theme"

interface RegistryViewProps {
  registry: {
    id: string
    name: string
    description: string | null
    files: Array<{ path: string; content: string }>
    created_at: Date
    updated_at: Date
  }
  dependencies: string[]
  registryDependencies: string[]
}

function getLanguageExtension(path: string) {
  const ext = path.split(".").pop()?.toLowerCase()

switch (ext) {
    case "ts":
    case "tsx":
    case "js":
    case "jsx":
      return javascript({ jsx: true, typescript: true })
    case "json":
      return json()
    case "css":
      return css()
    case "html":
      return html()
    default:
      return javascript({ jsx: true, typescript: true })
  }
}

export function RegistryView({ registry, dependencies, registryDependencies }: RegistryViewProps) {
  const [openFiles, setOpenFiles] = useState<Set<number>>(new Set([0]))
  const [copiedCommand, setCopiedCommand] = useState(false)
  const [copiedFiles, setCopiedFiles] = useState<Set<number>>(new Set())

const toggleFile = (index: number) => {
    const newOpenFiles = new Set(openFiles)
    if (newOpenFiles.has(index)) {
      newOpenFiles.delete(index)
    } else {
      newOpenFiles.add(index)
    }
    setOpenFiles(newOpenFiles)
  }

const copyCommand = async () => {
    const command = `npx shadcn@latest add https://shadcnify.com/r/${registry.id}`
    await navigator.clipboard.writeText(command)
    setCopiedCommand(true)
    setTimeout(() => setCopiedCommand(false), 2000)
  }

const copyFileContent = async (index: number, content: string) => {
    await navigator.clipboard.writeText(content)
    const newCopiedFiles = new Set(copiedFiles)
    newCopiedFiles.add(index)
    setCopiedFiles(newCopiedFiles)
    setTimeout(() => {
      setCopiedFiles((prev) => {
        const next = new Set(prev)
        next.delete(index)
        return next
      })
    }, 2000)
  }

const files = registry.files as Array<{ path: string; content: string }>

return (
    <div className="min-h-screen bg-background">
      <header className="border-b">
        <div className="container mx-auto px-4 py-4 max-w-3xl">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-3 transition-colors"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to home
          </Link>
          <h1 className="text-2xl font-semibold font-mono">{registry.name}</h1>
          {registry.description && <p className="text-sm text-muted-foreground mt-1">{registry.description}</p>}
          <div className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
            <Calendar className="h-3 w-3" />
            <span>Created {new Date(registry.created_at).toLocaleDateString()}</span>
          </div>
        </div>
      </header>

<main className="container mx-auto px-4 py-8 max-w-3xl">
        <Card className="p-6 mb-6">
          <h2 className="text-sm font-medium mb-3">Installation Command</h2>
          <div className="flex items-center gap-2">
            <code className="flex-1 bg-muted px-4 py-3 rounded-md text-sm font-mono overflow-x-auto">
              npx shadcn@latest add https://shadcnify.com/r/{registry.id}
            </code>
            <Button variant="outline" size="sm" onClick={copyCommand} className="gap-2 bg-transparent">
              {copiedCommand ? (
                <>
                  <Check className="h-4 w-4" />
                  Copied
                </>
              ) : (
                <>
                  <Copy className="h-4 w-4" />
                  Copy
                </>
              )}
            </Button>
          </div>
        </Card>

{(dependencies.length > 0 || registryDependencies.length > 0) && (
          <Card className="p-6 mb-6">
            <div className="flex items-center gap-2 mb-4">
              <Package className="h-4 w-4 text-muted-foreground" />
              <h2 className="text-sm font-medium">Dependencies</h2>
            </div>

<div className="space-y-4">
              {dependencies.length > 0 && (
                <div>
                  <h3 className="text-xs font-medium text-muted-foreground mb-2">NPM Packages</h3>
                  <div className="flex flex-wrap gap-2">
                    {dependencies.map((dep) => (
                      <code
                        key={dep}
                        className="inline-flex items-center gap-1 bg-muted px-2.5 py-1 rounded-md text-xs font-mono"
                      >
                        {dep}
                      </code>
                    ))}
                  </div>
                </div>
              )}

{registryDependencies.length > 0 && (
                <div>
                  <h3 className="text-xs font-medium text-muted-foreground mb-2">shadcn/ui Components</h3>
                  <div className="flex flex-wrap gap-2">
                    {registryDependencies.map((dep) => (
                      <code
                        key={dep}
                        className="inline-flex items-center gap-1 bg-muted px-2.5 py-1 rounded-md text-xs font-mono"
                      >
                        {dep}
                      </code>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </Card>
        )}

<div className="space-y-3">
          <h2 className="text-sm font-medium">Files ({files.length})</h2>

{files.map((file, index) => (
            <div key={index} className="border rounded-lg overflow-hidden bg-card">
              <div className="flex items-center gap-3 p-4 bg-muted/50">
                <button
                  onClick={() => toggleFile(index)}
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  <ChevronRight className={`h-4 w-4 transition-transform ${openFiles.has(index) ? "rotate-90" : ""}`} />
                </button>

<Button
                  variant="ghost"
                  size="sm"
                  onClick={() => copyFileContent(index, file.content)}
                  className="gap-2 h-8"
                >
                  {copiedFiles.has(index) ? (
                    <>
                      <Check className="h-3 w-3" />
                      <span className="text-xs">Copied</span>
                    </>
                  ) : (
                    <>
                      <Copy className="h-3 w-3" />
                      <span className="text-xs">Copy</span>
                    </>
                  )}
                </Button>
              </div>

{openFiles.has(index) && (
                <div className="border-t">
                  <CodeMirror
                    value={file.content}
                    extensions={[
                      getLanguageExtension(file.path),
                      EditorView.editable.of(false),
                      EditorView.lineWrapping,
                      vercelThemeExtension,
                    ]}
                    editable={false}
                    basicSetup={{
                      lineNumbers: true,
                      highlightActiveLineGutter: false,
                      highlightActiveLine: false,
                      foldGutter: true,
                    }}
                    className="font-[family-name:var(--font-jetbrains-mono)]"
                    style={{
                      fontFamily: "var(--font-jetbrains-mono)",
                    }}
                  />
                </div>
              )}
            </div>
          ))}
        </div>
      </main>
    </div>
  )
}8c:["$","$L91",null,{"chatId":"SsQWwYSZLxP","children":["$","$L92",null,{"data":{"@\"active-block\",\"SsQWwYSZLxP\",":{"id":"GVX0yk0xVRY","messageId":"V02CimpKZGKkHFm7cCBuE9UecSkjPGLB","source":"$93","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Adding dependency display","taskNameComplete":"Dependency display added"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"SsQWwYSZLxP\",":false,"":null},"children":"$L94"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This