From d9d46737f064cab50a47bce02126a68563e6ae4e Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Thu, 20 Mar 2025 13:03:14 +0100
Subject: [PATCH] Add needed components for documenting components.

---
 apps/ui-library/components.json               |  21 ++++
 .../ui-library/components/block-item-code.tsx | 119 ++++++++++++++++++
 apps/ui-library/components/block-item.tsx     |  29 +++++
 .../components/command-copy-button.tsx        |  30 +++++
 apps/ui-library/components/command.tsx        |  27 ++++
 .../components/component-preview.tsx          |  81 +-----------
 apps/ui-library/components/mdx-components.tsx |  37 +++---
 apps/ui-library/components/mode-toggle.tsx    |  29 +++++
 .../components/open-in-v0-button.tsx          |  41 ++++++
 apps/ui-library/components/providers.tsx      |  16 +++
 apps/ui-library/components/registry-block.tsx |  12 ++
 .../components/tailwind-indicator.tsx         |  15 +++
 apps/ui-library/hooks/use-config.ts           |   8 +-
 apps/ui-library/lib/process-registry.ts       |  82 ++++++++++++
 apps/ui-library/next.config.mjs               |   8 +-
 apps/ui-library/tailwind.config.js            |  50 ++++++++
 apps/ui-library/tsconfig.json                 |   2 +-
 17 files changed, 504 insertions(+), 103 deletions(-)
 create mode 100644 apps/ui-library/components.json
 create mode 100644 apps/ui-library/components/block-item-code.tsx
 create mode 100644 apps/ui-library/components/block-item.tsx
 create mode 100644 apps/ui-library/components/command-copy-button.tsx
 create mode 100644 apps/ui-library/components/command.tsx
 create mode 100644 apps/ui-library/components/mode-toggle.tsx
 create mode 100644 apps/ui-library/components/open-in-v0-button.tsx
 create mode 100644 apps/ui-library/components/providers.tsx
 create mode 100644 apps/ui-library/components/registry-block.tsx
 create mode 100644 apps/ui-library/components/tailwind-indicator.tsx
 create mode 100644 apps/ui-library/lib/process-registry.ts

diff --git a/apps/ui-library/components.json b/apps/ui-library/components.json
new file mode 100644
index 00000000000..80d94f1fc9c
--- /dev/null
+++ b/apps/ui-library/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/registry/default/components",
+    "utils": "@/lib/utils",
+    "ui": "@/registry/default/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/apps/ui-library/components/block-item-code.tsx b/apps/ui-library/components/block-item-code.tsx
new file mode 100644
index 00000000000..05007873138
--- /dev/null
+++ b/apps/ui-library/components/block-item-code.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+import { RegistryNode } from '@/lib/process-registry'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@ui/components/shadcn/ui/tabs'
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock'
+import { File, Folder } from 'fumadocs-ui/components/files'
+import { useState } from 'react'
+import { BlockItemPreview } from './block-item'
+
+interface BlockItemCodeProps {
+  files: RegistryNode[]
+}
+
+const demoUrls: Record<string, string> = {
+  'src/registry/blocks/password-based-auth-nextjs/app/login/page.tsx':
+    '/blocks/password-based-auth-nextjs/login',
+  'src/registry/blocks/password-based-auth-nextjs/app/sign-up/page.tsx':
+    '/blocks/password-based-auth-nextjs/sign-up',
+  'src/registry/blocks/password-based-auth-nextjs/app/sign-up-success/page.tsx':
+    '/blocks/password-based-auth-nextjs/sign-up-success',
+  'src/registry/blocks/password-based-auth-nextjs/app/forgot-password/page.tsx':
+    '/blocks/password-based-auth-nextjs/forgot-password',
+  'src/registry/blocks/password-based-auth-nextjs/app/update-password/page.tsx':
+    '/blocks/password-based-auth-nextjs/update-password',
+}
+
+function FileTree({
+  items,
+  onFileSelect,
+}: {
+  items: RegistryNode[]
+  onFileSelect: (file: RegistryNode) => void
+}) {
+  if (items.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      {items.map((item, index) => {
+        if (item.type === 'directory') {
+          return (
+            <Folder key={index} name={item.name} defaultOpen>
+              <FileTree onFileSelect={onFileSelect} items={item.children ?? []} />
+            </Folder>
+          )
+        }
+        return (
+          <File
+            key={index}
+            name={item.name}
+            onClick={() => onFileSelect(item)}
+            className="cursor-pointer"
+          />
+        )
+      })}
+    </>
+  )
+}
+
+export function BlockItemCode({ files }: BlockItemCodeProps) {
+  const initialFile = files.find((file) => file.type === 'file') || null
+  const [selectedFile, setSelectedFile] = useState(initialFile)
+
+  const selectedFilePath = selectedFile?.path.startsWith('/')
+    ? selectedFile?.path.slice(1)
+    : selectedFile?.path
+  const selectedFileExtension = (selectedFile?.name.split('.').pop() ?? 'ts') as 'ts' | 'tsx'
+
+  const selectedFileDemoUrl = selectedFile?.originalPath
+    ? demoUrls[selectedFile?.originalPath]
+    : null
+
+  return (
+    <div className="flex border rounded-lg overflow-hidden h-[652px] not-prose">
+      {/* File browser sidebar */}
+      <div className="w-64 border-r bg-muted/30 overflow-y-auto">
+        <div className="border-b bg-muted/50 h-12 items-center flex px-2">
+          <h3 className="font-medium text-sm">Files</h3>
+        </div>
+        <div className="p-2">
+          <FileTree items={files} onFileSelect={setSelectedFile} />
+        </div>
+      </div>
+
+      {/* Code display area */}
+      <div className="flex-1 overflow-auto bg-muted/10" key={selectedFile?.path}>
+        {selectedFile?.content ? (
+          <div className="h-full">
+            <Tabs defaultValue="code" className="h-full gap-0">
+              <div className="h-12 flex items-center justify-between px-2">
+                <span>{selectedFilePath}</span>
+                {selectedFileDemoUrl && (
+                  <TabsList>
+                    <TabsTrigger value="preview">Preview</TabsTrigger>
+                    <TabsTrigger value="code">Code</TabsTrigger>
+                  </TabsList>
+                )}
+              </div>
+              <TabsContent
+                value="code"
+                className="rounded-none [&_figure]:rounded-none [&_figure]:h-full [&_div[data-radix-scroll-area-viewport]]:min-h-[600px]"
+              >
+                <DynamicCodeBlock lang={selectedFileExtension} code={selectedFile?.content} />
+              </TabsContent>
+              <TabsContent value="preview" className="h-full flex-1">
+                {selectedFileDemoUrl && <BlockItemPreview title="" src={selectedFileDemoUrl} />}
+              </TabsContent>
+            </Tabs>
+          </div>
+        ) : (
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            No file selected or file content unavailable
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/ui-library/components/block-item.tsx b/apps/ui-library/components/block-item.tsx
new file mode 100644
index 00000000000..d6efed06122
--- /dev/null
+++ b/apps/ui-library/components/block-item.tsx
@@ -0,0 +1,29 @@
+import { Command } from '@/components/command'
+import { OpenInV0Button } from '@/components/open-in-v0-button'
+
+interface BlockItemProps {
+  name: string
+  title: string
+  description: string
+  src: string
+}
+
+export const BlockItem = ({ name, description }: BlockItemProps) => {
+  return (
+    <div className="flex flex-col gap-4 p-4 relative">
+      <Command name={name} />
+      <div className="flex items-center justify-between">
+        <h2 className="text-sm text-muted-foreground sm:pl-3">{description}</h2>
+        <OpenInV0Button name={name} className="w-fit" />
+      </div>
+    </div>
+  )
+}
+
+export const BlockItemPreview = ({ title, src }: { title: string; src: string }) => {
+  return (
+    <div className="flex items-center justify-center relative border rounded-lg">
+      <iframe src={src} className="w-full h-[600px] border-0 rounded-md" title={title} />
+    </div>
+  )
+}
diff --git a/apps/ui-library/components/command-copy-button.tsx b/apps/ui-library/components/command-copy-button.tsx
new file mode 100644
index 00000000000..bb948622c1f
--- /dev/null
+++ b/apps/ui-library/components/command-copy-button.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { Check, Copy } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Button_Shadcn_ } from 'ui'
+
+export function CommandCopyButton({ command }: { command: string }) {
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (copied) {
+      const timeout = setTimeout(() => setCopied(false), 2000)
+      return () => clearTimeout(timeout)
+    }
+  }, [copied])
+
+  return (
+    <Button_Shadcn_
+      variant="ghost"
+      size="icon"
+      className="text-[#888] hover:text-white"
+      onClick={() => {
+        navigator.clipboard.writeText(command)
+        setCopied(true)
+      }}
+    >
+      {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+    </Button_Shadcn_>
+  )
+}
diff --git a/apps/ui-library/components/command.tsx b/apps/ui-library/components/command.tsx
new file mode 100644
index 00000000000..3c8e289919e
--- /dev/null
+++ b/apps/ui-library/components/command.tsx
@@ -0,0 +1,27 @@
+import { CommandCopyButton } from "./command-copy-button"
+
+interface CommandCopyProps {
+  name: string
+}
+
+export function Command({ name }: CommandCopyProps) {
+  const command = `npx shadcn@latest add ${
+    process.env.VERCEL_TARGET_ENV === "production"
+      ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+      : process.env.VERCEL_TARGET_ENV === "preview"
+      ? `https://${process.env.VERCEL_PROJECT_PREVIEW_URL}`
+      : "http://localhost:3000"
+  }/r/${name}.json`
+
+  return (
+    <>
+      <div className="relative flex items-center rounded-lg bg-black px-4 py-3">
+        <div className="flex-1 font-mono text-sm text-white">
+          <span className="mr-2 text-[#888]">$</span>
+          {command}
+        </div>
+        <CommandCopyButton command={command} />
+      </div>
+    </>
+  )
+}
diff --git a/apps/ui-library/components/component-preview.tsx b/apps/ui-library/components/component-preview.tsx
index c1304ec5986..6e77d64514e 100644
--- a/apps/ui-library/components/component-preview.tsx
+++ b/apps/ui-library/components/component-preview.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import * as React from 'react'
 import { Index } from '@/__registry__'
+import * as React from 'react'
 
+import { useConfig } from '@/hooks/use-config'
 import {
   Button,
   CollapsibleContent_Shadcn_,
@@ -10,22 +11,6 @@ import {
   Collapsible_Shadcn_,
   cn,
 } from 'ui'
-import { useConfig } from '@/hooks/use-config'
-import {
-  // CopyButton,
-  CopyWithClassNames,
-} from '@/components/copy-button'
-// import { Icons } from '@/components/icons'
-// import { StyleSwitcher } from '@/components/style-switcher'
-// import { ThemeWrapper } from '@/components/theme-wrapper'
-import {
-  Tabs_Shadcn_ as Tabs,
-  TabsContent_Shadcn_ as TabsContent,
-  TabsList_Shadcn_ as TabsList,
-  TabsTrigger_Shadcn_ as TabsTrigger,
-} from 'ui'
-
-// import { LoaderCircle } from 'lucide-react'
 
 import { styles } from '@/registry/styles'
 import { ChevronRight, Expand } from 'lucide-react'
@@ -57,18 +42,10 @@ export function ComponentPreview({
   const [config] = useConfig()
   const index = styles.findIndex((style) => style.name === config.style)
 
-  const Codes = React.Children.toArray(children) as React.ReactElement[]
-  const Code = Codes[index]
-
   const [expand, setExpandState] = React.useState(false)
 
   const Preview = React.useMemo(() => {
-    // console.log('Index', Index)
-    // console.log('name', name)
-    // console.log('config.style', config.style)
-
     const Component = Index[config.style][name]?.component
-    // const Component = Index[name]?.component
 
     if (!Component) {
       return (
@@ -85,19 +62,14 @@ export function ComponentPreview({
     return <Component />
   }, [name, config.style])
 
-  const codeString = React.useMemo(() => {
-    if (typeof Code?.props['data-rehype-pretty-code-fragment'] !== 'undefined') {
-      const [, Button] = React.Children.toArray(Code.props.children) as React.ReactElement[]
-      return Button?.props?.value || Button?.props?.__rawString__ || null
-    }
-  }, [Code])
+  const Codes = React.Children.toArray(children) as React.ReactElement[]
+  const Code = Codes[index]
 
   const ComponentPreview = React.useMemo(() => {
     return (
       <>
-        {/* <ThemeWrapper defaultTheme="zinc"> */}
         <div
-          className={cn('preview flex min-h-[350px] w-full justify-center p-10', {
+          className={cn('preview flex min-h-[350px] w-full justify-center p-10 theme-original', {
             'items-center': align === 'center',
             'items-start': align === 'start',
             'items-end': align === 'end',
@@ -105,17 +77,12 @@ export function ComponentPreview({
         >
           <React.Suspense
             fallback={
-              <div className="flex items-center text-sm text-muted-foreground">
-                {/* <Icons.spinner className="mr-2 h-4 w-4 animate-spin" /> */}
-                {/* <LoaderCircle className="mr-2 h-4 w-4 animate-spin" /> */}
-                Loading...
-              </div>
+              <div className="flex items-center text-sm text-muted-foreground">Loading...</div>
             }
           >
             {Preview}
           </React.Suspense>
         </div>
-        {/* </ThemeWrapper> */}
       </>
     )
   }, [Preview, align])
@@ -219,40 +186,4 @@ export function ComponentPreview({
       </Collapsible_Shadcn_>
     </div>
   )
-
-  return (
-    <div
-      className={cn('group relative my-4 flex flex-col gap-2', wideClasses, className)}
-      {...props}
-    >
-      <Tabs defaultValue="preview" className="relative mr-auto w-full">
-        <div className="flex items-center justify-between pb-3">
-          <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
-            <TabsTrigger
-              value="preview"
-              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-            >
-              Preview
-            </TabsTrigger>
-            <TabsTrigger
-              value="code"
-              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-            >
-              Code
-            </TabsTrigger>
-          </TabsList>
-        </div>
-        <TabsContent value="preview" className="relative rounded-md border bg-studio">
-          {ComponentPreview}
-        </TabsContent>
-        <TabsContent value="code">
-          <div className="flex flex-col space-y-4">
-            <div className="w-full rounded-md [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
-              {Code}
-            </div>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
 }
diff --git a/apps/ui-library/components/mdx-components.tsx b/apps/ui-library/components/mdx-components.tsx
index 8074b7aebb1..ef5ef9f6a74 100644
--- a/apps/ui-library/components/mdx-components.tsx
+++ b/apps/ui-library/components/mdx-components.tsx
@@ -1,53 +1,49 @@
 'use client'
 
-import * as React from 'react'
+import { useMDXComponent } from 'next-contentlayer2/hooks'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useMDXComponent } from 'next-contentlayer2/hooks'
+import * as React from 'react'
 // import { NpmCommands } from 'types/unist'
 // import { Event } from '@/lib/events'
-import { cn } from 'ui'
-import { useConfig } from '@/hooks/use-config'
 import { Callout } from '@/components/callout'
 import { CodeBlockWrapper } from '@/components/code-block-wrapper'
 import { ComponentExample } from '@/components/component-example'
 import { ComponentPreview } from '@/components/component-preview'
 import { ComponentSource } from '@/components/component-source'
-import {
-  CopyButton,
-  // CopyNpmCommandButton
-} from '@/components/copy-button'
+import { CopyButton } from '@/components/copy-button'
+import { useConfig } from '@/hooks/use-config'
+import { cn } from 'ui'
 // import { FrameworkDocs } from '@/components/framework-docs'
-import { StyleWrapper } from './style-wrapper'
+import { CodeFragment } from '@/components/code-fragment'
+import { Colors } from '@/components/colors'
+import { Icons } from '@/components/icons'
+import { ThemeSettings } from '@/components/theme-settings'
+import { Style } from '@/registry/styles'
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock'
 import {
   Accordion_Shadcn_ as Accordion,
   AccordionContent_Shadcn_ as AccordionContent,
   AccordionItem_Shadcn_ as AccordionItem,
   AccordionTrigger_Shadcn_ as AccordionTrigger,
-} from 'ui'
-import {
   Alert_Shadcn_ as Alert,
   AlertDescription_Shadcn_ as AlertDescription,
   AlertTitle_Shadcn_ as AlertTitle,
-} from 'ui'
-import { AspectRatio } from 'ui'
-import {
+  AspectRatio,
   Tabs_Shadcn_ as Tabs,
   TabsContent_Shadcn_ as TabsContent,
   TabsList_Shadcn_ as TabsList,
   TabsTrigger_Shadcn_ as TabsTrigger,
 } from 'ui'
-import { ComponentProps } from './component-props'
-import { Style } from '@/registry/styles'
-import { Colors } from '@/components/colors'
-import { Icons } from '@/components/icons'
-import { ThemeSettings } from '@/components/theme-settings'
-import { CodeFragment } from '@/components/code-fragment'
 import { Admonition } from 'ui-patterns/admonition'
+import { BlockItem } from './block-item'
+import { ComponentProps } from './component-props'
 import { SonnerExpandConfig } from './sonner-expand-config'
 import { SonnerPositionConfig } from './sonner-expand-position'
+import { StyleWrapper } from './style-wrapper'
 
 const components = {
+  DynamicCodeBlock,
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -277,6 +273,7 @@ const components = {
   Admonition,
   SonnerExpandConfig,
   SonnerPositionConfig,
+  BlockItem,
 }
 
 interface MdxProps {
diff --git a/apps/ui-library/components/mode-toggle.tsx b/apps/ui-library/components/mode-toggle.tsx
new file mode 100644
index 00000000000..1036acb0ae1
--- /dev/null
+++ b/apps/ui-library/components/mode-toggle.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import * as React from 'react'
+
+import { Moon, Sun } from 'lucide-react'
+import { Button_Shadcn_ } from 'ui'
+
+export function ModeToggle() {
+  const { setTheme, resolvedTheme } = useTheme()
+  const [, startTransition] = React.useTransition()
+
+  return (
+    <Button_Shadcn_
+      className="h-7 w-7"
+      onClick={() => {
+        startTransition(() => {
+          setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+        })
+      }}
+      size="icon"
+      variant="ghost"
+    >
+      <Moon className="dark:hidden" />
+      <Sun className="hidden dark:block" />
+      <span className="sr-only">Toggle theme</span>
+    </Button_Shadcn_>
+  )
+}
diff --git a/apps/ui-library/components/open-in-v0-button.tsx b/apps/ui-library/components/open-in-v0-button.tsx
new file mode 100644
index 00000000000..bc9c4b61116
--- /dev/null
+++ b/apps/ui-library/components/open-in-v0-button.tsx
@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils'
+import { Button_Shadcn_ } from 'ui'
+
+export function OpenInV0Button({
+  name,
+  className,
+}: { name: string } & React.ComponentProps<typeof Button_Shadcn_>) {
+  return (
+    <Button_Shadcn_
+      aria-label="Open in v0"
+      className={cn(
+        'h-7 gap-1 rounded-lg shadow-none bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black',
+        className
+      )}
+      asChild
+    >
+      <a
+        href={`https://v0.dev/chat/api/open?url=https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/r/${name}.json`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        Open in{' '}
+        <svg
+          viewBox="0 0 40 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5 text-current"
+        >
+          <path
+            d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
+            fill="currentColor"
+          ></path>
+          <path
+            d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </a>
+    </Button_Shadcn_>
+  )
+}
diff --git a/apps/ui-library/components/providers.tsx b/apps/ui-library/components/providers.tsx
new file mode 100644
index 00000000000..e110727616b
--- /dev/null
+++ b/apps/ui-library/components/providers.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import { ThemeProvider } from "next-themes"
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      disableTransitionOnChange
+      enableSystem
+    >
+      {children}
+    </ThemeProvider>
+  )
+}
diff --git a/apps/ui-library/components/registry-block.tsx b/apps/ui-library/components/registry-block.tsx
new file mode 100644
index 00000000000..ea440cfffa3
--- /dev/null
+++ b/apps/ui-library/components/registry-block.tsx
@@ -0,0 +1,12 @@
+// 'use server'
+
+// import { generateRegistryTree } from '@/lib/process-registry'
+// import path from 'path'
+// import { BlockItemCode } from './block-item-code'
+
+// export async function RegistryBlock({ itemName }: { itemName: string }) {
+//   const registryPath = path.join(process.cwd(), 'public', 'r', `${itemName}.json`)
+//   const tree = generateRegistryTree(itemName, registryPath)
+
+//   return <BlockItemCode files={tree} />
+// }
diff --git a/apps/ui-library/components/tailwind-indicator.tsx b/apps/ui-library/components/tailwind-indicator.tsx
new file mode 100644
index 00000000000..3070028d102
--- /dev/null
+++ b/apps/ui-library/components/tailwind-indicator.tsx
@@ -0,0 +1,15 @@
+export function TailwindIndicator() {
+  if (process.env.NODE_ENV === 'production' || process.env.HIDE_TAILWIND_INDICATOR === '1')
+    return null
+
+  return (
+    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-zinc-800 p-3 font-mono text-xs text-white">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  )
+}
diff --git a/apps/ui-library/hooks/use-config.ts b/apps/ui-library/hooks/use-config.ts
index 7177c77890b..7db259e40c1 100644
--- a/apps/ui-library/hooks/use-config.ts
+++ b/apps/ui-library/hooks/use-config.ts
@@ -1,14 +1,13 @@
 import { Style } from '@/registry/styles'
-import { Theme } from '@/registry/themes'
+// import { Theme } from '@/registry/themes'
 import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { ComponentProps } from 'react'
 import { SonnerToaster } from 'ui'
-// import { BackendProvider } from '@/registry/backend-provider'
 
 type Config = {
   style: Style['name']
-  theme: Theme['name']
+  // theme: Theme['name']
   radius: number
   sonnerPosition: ComponentProps<typeof SonnerToaster>['position']
   sonnerExpand: boolean
@@ -17,11 +16,10 @@ type Config = {
 
 const configAtom = atomWithStorage<Config>('config', {
   style: 'default',
-  theme: 'zinc',
+  // theme: 'zinc',
   radius: 0.5,
   sonnerPosition: 'bottom-right',
   sonnerExpand: false,
-  // backendProvider: 'nextjs-auth',
 })
 
 export function useConfig() {
diff --git a/apps/ui-library/lib/process-registry.ts b/apps/ui-library/lib/process-registry.ts
new file mode 100644
index 00000000000..11275edb020
--- /dev/null
+++ b/apps/ui-library/lib/process-registry.ts
@@ -0,0 +1,82 @@
+import * as fs from 'fs'
+
+export interface RegistryNode {
+  name: string
+  path: string
+  originalPath: string
+  type: 'directory' | 'file'
+  children?: RegistryNode[]
+  content?: string
+}
+
+interface RegistryFile {
+  path: string
+  target?: string
+  type: string
+  content: string
+}
+
+const DEFAULT_PATHS = {
+  component: '/components',
+  hook: '/hooks',
+  util: '/lib',
+} as const
+
+/**
+ * Converts a flat registry array into a hierarchical file tree structure
+ */
+export function generateRegistryTree(blockName: string, registryPath: string): RegistryNode[] {
+  const registry = JSON.parse(fs.readFileSync(registryPath, 'utf-8')) as { files: RegistryFile[] }
+  const tree: RegistryNode[] = []
+
+  const sortedRegistry = [...registry.files].sort((a, b) => a.path.localeCompare(b.path))
+
+  for (const file of sortedRegistry) {
+    const itemPath = file.target || getDefaultPath(file)
+    const pathParts = itemPath.split('/').filter(Boolean)
+    let currentLevel = tree
+
+    for (let i = 0; i < pathParts.length; i++) {
+      const part = pathParts[i]
+      const isLast = i === pathParts.length - 1
+      const path = '/' + pathParts.slice(0, i + 1).join('/')
+
+      let node = currentLevel.find((n) => n.name === part)
+
+      // Remove any paths in the file content that point to the block directory.
+      const content = file.content
+        .replaceAll(/@\/registry\/blocks\/.+?\//gi, '@/')
+        .replaceAll(/@\/registry\//gi, '@/')
+
+      if (!node) {
+        node = {
+          name: part,
+          path,
+          originalPath: file.path,
+          type: isLast ? 'file' : 'directory',
+          ...(isLast ? { content } : { children: [] }),
+        }
+        currentLevel.push(node)
+      }
+
+      if (!isLast) {
+        node.children = node.children || []
+        currentLevel = node.children
+      }
+    }
+  }
+
+  return tree
+}
+
+/**
+ * Determines the default path for an item based on its type
+ */
+function getDefaultPath(item: RegistryFile): string {
+  const type = item.type.toLowerCase() || ''
+  const basePath = DEFAULT_PATHS[type as keyof typeof DEFAULT_PATHS] || ''
+  // clean all paths that start with paths specific to this repo organization
+  const filePath = item.path.replace(/src\/registry\/blocks\/.+?\//, '')
+
+  return `${basePath}/${filePath}`
+}
diff --git a/apps/ui-library/next.config.mjs b/apps/ui-library/next.config.mjs
index 2280b564d29..1269901ad08 100644
--- a/apps/ui-library/next.config.mjs
+++ b/apps/ui-library/next.config.mjs
@@ -1,11 +1,11 @@
 import { withContentlayer } from 'next-contentlayer2'
 
-const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '/design-system'
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '/ui'
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ['ui', 'common', 'shared-data', 'icons', 'tsconfig'],
-  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '/design-system',
+  basePath: BASE_PATH,
   images: {
     remotePatterns: [
       {
@@ -36,6 +36,10 @@ const nextConfig = {
         : []),
     ]
   },
+  eslint: {
+    // We are already running linting via GH action, this will skip linting during production build on Vercel
+    ignoreDuringBuilds: true,
+  },
 }
 
 export default withContentlayer(nextConfig)
diff --git a/apps/ui-library/tailwind.config.js b/apps/ui-library/tailwind.config.js
index 5be9a0d5a1d..48994f629d3 100644
--- a/apps/ui-library/tailwind.config.js
+++ b/apps/ui-library/tailwind.config.js
@@ -1,6 +1,7 @@
 const config = require('config/tailwind.config')
 
 module.exports = config({
+  darkMode: ['class'],
   content: [
     './app/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
@@ -16,6 +17,55 @@ module.exports = config({
       maxWidth: {
         site: '128rem',
       },
+      // The following variables are needed for the shadcn components in the examples to work. They're not clashing
+      // with the variables in the ui package.
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        chart: {
+          1: 'hsl(var(--chart-1))',
+          2: 'hsl(var(--chart-2))',
+          3: 'hsl(var(--chart-3))',
+          4: 'hsl(var(--chart-4))',
+          5: 'hsl(var(--chart-5))',
+        },
+      },
     },
   },
 })
diff --git a/apps/ui-library/tsconfig.json b/apps/ui-library/tsconfig.json
index 7dcbbf6d634..9e21bf5ea57 100644
--- a/apps/ui-library/tsconfig.json
+++ b/apps/ui-library/tsconfig.json
@@ -12,7 +12,7 @@
     "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",