4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T1bd4,'use client'; import { TreeCodeViewer } from '@/components/ui/tree-view-code'; import { type TransformedCodeFile, transformCodeFiles } from '@/lib/transform-code-files'; import React from 'react'; const sampleFileData = [ { fileName: 'hero-ai-value-proposition.tsx', fileSrc: `'use client' import React, { useRef } from 'react' import { Layout, Monitor, Smartphone, PenTool, MousePointer2, } from 'lucide-react' import { TimelineAnimation } from '@/components/ui/timeline-animation' export const HeroAiValueProposition = () => { const timelineRef = useRef(null) return (

{/* Header */}

UI-Layout

{/* Main Hero Content */}

AI-generated project briefs
{' '} built for designers Turn rough ideas into clear, structured project briefs in seconds. Let AI handle the planning so you can focus on design, creativity, and execution.

Get started for free {/* Designer Proof */}

Join 80,000+ designers

1,234+

`, pathSrc: 'registry/components/hero-ai-value-proposition.tsx', }, { fileName: 'timeline-animation.tsx', fileSrc: `import { type HTMLMotionProps, motion, useInView } from 'motion/react'; import type React from 'react'; import type { Variants } from 'motion/react'; type TimelineContentProps = { children?: React.ReactNode; animationNum: number; className?: string; timelineRef: React.RefObject; as?: T; customVariants?: Variants; once?: boolean; } & HTMLMotionProps; export const TimelineAnimation = < T extends keyof HTMLElementTagNameMap = 'div', >({ children, animationNum, timelineRef, className, as, customVariants, once = true, ...props }: TimelineContentProps) => { const isInView = useInView(timelineRef, { once }); const MotionComponent = motion[as || 'div'] as React.ElementType; return ( {children} ); };`, pathSrc: 'registry/components/timeline-animation.tsx', }, { fileName: 'utils.tsx', fileSrc: `import { ClassValue, clsx } from 'clsx'; import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }`, pathSrc: 'registry/components/utils.tsx', }, ]; export default function TreeCodeViewerDemo() { const [files, setFiles] = React.useState([]); React.useEffect(() => { const transformFiles = async () => { const transformedFiles = await transformCodeFiles(sampleFileData, 'tree-code-viewer'); setFiles(transformedFiles); }; transformFiles(); }, []); if (files.length === 0) { return (

); } return (

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://ui-layouts.com/r/code-tree-code-viewer.json","proxyUrl":"https://shadcnregistry.com/r/ui-layouts/code-tree-code-viewer","itemId":"@ui-layouts/code-tree-code-viewer"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"./registry/components/code/tree-code-viewer.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

Code Tree Code Viewer

Installation

Files

components

Styles