From 501918857bdfe2bfff108fc6d344a73439ccb3b2 Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Tue, 2 Sep 2025 15:36:41 +0200
Subject: [PATCH] chore: Remove unused code from `ui-library` (#38374)

* Remove unneeded code.

* Remove more unused code.

* Update knip.jsonc for ui-library.

* Remove unneeded imports. Change the registry generation to only generate what's needed.

* Cleanup the rehype middleware (it wasn't used). Clean up the example blocks generation.

* Don't show the "show code" button in all dropzone examples.
---
 apps/ui-library/__registry__/index.tsx        | 490 +-----------------
 apps/ui-library/components/block-item.tsx     |   8 -
 apps/ui-library/components/class-label.tsx    |  18 -
 apps/ui-library/components/click-counter.tsx  |  16 -
 .../components/code-block-wrapper.tsx         |  53 --
 apps/ui-library/components/code-fragment.tsx  | 105 ----
 .../components/component-example.tsx          |  97 ----
 .../components/component-preview.tsx          |   4 +-
 .../ui-library/components/component-props.tsx |  58 ---
 .../components/component-source.tsx           |  21 -
 apps/ui-library/components/copy-button.tsx    | 153 +-----
 apps/ui-library/components/example-label.tsx  |  15 -
 apps/ui-library/components/files.tsx          |  66 ---
 apps/ui-library/components/grid.tsx           |  62 ---
 .../components/homepage-svg-handler.tsx       |  20 -
 apps/ui-library/components/icons.tsx          |  69 ---
 apps/ui-library/components/mdx-components.tsx | 148 +-----
 apps/ui-library/components/mode-toggle.tsx    |  29 --
 apps/ui-library/components/providers.tsx      |  11 -
 .../components/sonner-expand-config.tsx       |  37 --
 .../components/sonner-expand-position.tsx     |  70 ---
 .../components/tailwind-indicator.tsx         |  15 -
 apps/ui-library/components/theme-settings.tsx |  54 --
 .../components/theme-switcher-dropdown.tsx    |   3 +-
 .../components/top-navigation-search.tsx      |  17 -
 apps/ui-library/components/top-navigation.tsx |  37 --
 .../content/docs/nextjs/dropzone.mdx          |   1 +
 .../content/docs/react-router/dropzone.mdx    |   1 +
 .../content/docs/react/dropzone.mdx           |   1 +
 .../content/docs/tanstack/dropzone.mdx        |   1 +
 apps/ui-library/contentlayer.config.js        |   6 +-
 apps/ui-library/hooks/use-media-query.tsx     |  19 -
 apps/ui-library/lib/rehype-component.ts       | 406 ---------------
 apps/ui-library/lib/rehype-npm-command.ts     |  42 --
 apps/ui-library/lib/sample-component.tsx      |  27 -
 apps/ui-library/lib/utils.ts                  |   9 -
 apps/ui-library/package.json                  |   2 -
 apps/ui-library/scripts/build-registry.mts    |  26 +-
 apps/ui-library/types/unist.ts                |  31 --
 knip.jsonc                                    |   3 +
 pnpm-lock.yaml                                |   6 -
 41 files changed, 49 insertions(+), 2208 deletions(-)
 delete mode 100644 apps/ui-library/components/class-label.tsx
 delete mode 100644 apps/ui-library/components/click-counter.tsx
 delete mode 100644 apps/ui-library/components/code-block-wrapper.tsx
 delete mode 100644 apps/ui-library/components/code-fragment.tsx
 delete mode 100644 apps/ui-library/components/component-example.tsx
 delete mode 100644 apps/ui-library/components/component-props.tsx
 delete mode 100644 apps/ui-library/components/component-source.tsx
 delete mode 100644 apps/ui-library/components/example-label.tsx
 delete mode 100644 apps/ui-library/components/files.tsx
 delete mode 100644 apps/ui-library/components/grid.tsx
 delete mode 100644 apps/ui-library/components/homepage-svg-handler.tsx
 delete mode 100644 apps/ui-library/components/icons.tsx
 delete mode 100644 apps/ui-library/components/mode-toggle.tsx
 delete mode 100644 apps/ui-library/components/providers.tsx
 delete mode 100644 apps/ui-library/components/sonner-expand-config.tsx
 delete mode 100644 apps/ui-library/components/sonner-expand-position.tsx
 delete mode 100644 apps/ui-library/components/tailwind-indicator.tsx
 delete mode 100644 apps/ui-library/components/theme-settings.tsx
 delete mode 100644 apps/ui-library/components/top-navigation-search.tsx
 delete mode 100644 apps/ui-library/components/top-navigation.tsx
 delete mode 100644 apps/ui-library/hooks/use-media-query.tsx
 delete mode 100644 apps/ui-library/lib/rehype-component.ts
 delete mode 100644 apps/ui-library/lib/rehype-npm-command.ts
 delete mode 100644 apps/ui-library/lib/sample-component.tsx
 delete mode 100644 apps/ui-library/types/unist.ts

diff --git a/apps/ui-library/__registry__/index.tsx b/apps/ui-library/__registry__/index.tsx
index fff2697c3a..f20ed0206c 100644
--- a/apps/ui-library/__registry__/index.tsx
+++ b/apps/ui-library/__registry__/index.tsx
@@ -1,527 +1,43 @@
 
 // @ts-nocheck
-// This file is autogenerated by scripts/build-registry.ts
+// This file is autogenerated by scripts/build-registry.mts
 // Do not edit this file directly.
 import * as React from "react"
 
-export const Index: Record<string, any> = {
+export const Index = {
   "default": {
     
-    "password-based-auth-nextjs": {
-      name: "password-based-auth-nextjs",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      component: React.lazy(() => import("@/registry/default/blocks/password-based-auth-nextjs/app/auth/login/page.tsx")),
-      source: "",
-      files: ["registry/default/blocks/password-based-auth-nextjs/app/auth/login/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/auth/error/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/protected/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/auth/confirm/route.ts","registry/default/blocks/password-based-auth-nextjs/components/login-form.tsx","registry/default/blocks/password-based-auth-nextjs/middleware.ts","registry/default/blocks/password-based-auth-nextjs/app/auth/sign-up/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/auth/sign-up-success/page.tsx","registry/default/blocks/password-based-auth-nextjs/components/sign-up-form.tsx","registry/default/blocks/password-based-auth-nextjs/app/auth/forgot-password/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/auth/update-password/page.tsx","registry/default/blocks/password-based-auth-nextjs/components/forgot-password-form.tsx","registry/default/blocks/password-based-auth-nextjs/components/update-password-form.tsx","registry/default/blocks/password-based-auth-nextjs/components/logout-button.tsx","registry/default/clients/nextjs/lib/supabase/client.ts","registry/default/clients/nextjs/lib/supabase/middleware.ts","registry/default/clients/nextjs/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "password-based-auth-react": {
-      name: "password-based-auth-react",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      component: React.lazy(() => import("@/registry/default/blocks/password-based-auth-react/components/login-form.tsx")),
-      source: "",
-      files: ["registry/default/blocks/password-based-auth-react/components/login-form.tsx","registry/default/blocks/password-based-auth-react/components/sign-up-form.tsx","registry/default/blocks/password-based-auth-react/components/forgot-password-form.tsx","registry/default/blocks/password-based-auth-react/components/update-password-form.tsx","registry/default/clients/react/lib/supabase/client.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "password-based-auth-react-router": {
-      name: "password-based-auth-react-router",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      component: React.lazy(() => import("@/registry/default/blocks/password-based-auth-react-router/app/routes/auth.confirm.tsx")),
-      source: "",
-      files: ["registry/default/blocks/password-based-auth-react-router/app/routes/auth.confirm.tsx","registry/default/blocks/password-based-auth-react-router/app/routes/auth.error.tsx","registry/default/blocks/password-based-auth-react-router/app/routes/forgot-password.tsx","registry/default/blocks/password-based-auth-react-router/app/routes/login.tsx","registry/default/blocks/password-based-auth-react-router/app/routes/logout.tsx","registry/default/blocks/password-based-auth-react-router/app/routes/protected.tsx","registry/default/blocks/password-based-auth-react-router/app/routes/sign-up.tsx","registry/default/blocks/password-based-auth-react-router/app/routes/update-password.tsx","registry/default/blocks/password-based-auth-react-router/app/routes.ts","registry/default/clients/react-router/lib/supabase/client.ts","registry/default/clients/react-router/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "password-based-auth-tanstack": {
-      name: "password-based-auth-tanstack",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      component: React.lazy(() => import("@/registry/default/blocks/password-based-auth-tanstack/routes/login.tsx")),
-      source: "",
-      files: ["registry/default/blocks/password-based-auth-tanstack/routes/login.tsx","registry/default/blocks/password-based-auth-tanstack/routes/auth/error.tsx","registry/default/blocks/password-based-auth-tanstack/routes/_protected.tsx","registry/default/blocks/password-based-auth-tanstack/routes/_protected/protected.tsx","registry/default/blocks/password-based-auth-tanstack/routes/auth/confirm.ts","registry/default/blocks/password-based-auth-tanstack/components/login-form.tsx","registry/default/blocks/password-based-auth-tanstack/routes/sign-up.tsx","registry/default/blocks/password-based-auth-tanstack/routes/sign-up-success.tsx","registry/default/blocks/password-based-auth-tanstack/components/sign-up-form.tsx","registry/default/blocks/password-based-auth-tanstack/routes/forgot-password.tsx","registry/default/blocks/password-based-auth-tanstack/routes/update-password.tsx","registry/default/blocks/password-based-auth-tanstack/components/forgot-password-form.tsx","registry/default/blocks/password-based-auth-tanstack/components/update-password-form.tsx","registry/default/blocks/password-based-auth-tanstack/lib/supabase/fetch-user-server-fn.ts","registry/default/clients/tanstack/lib/supabase/client.ts","registry/default/clients/tanstack/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "social-auth-nextjs": {
-      name: "social-auth-nextjs",
-      type: "registry:block",
-      registryDependencies: ["button","card"],
-      component: React.lazy(() => import("@/registry/default/blocks/social-auth-nextjs/app/auth/login/page.tsx")),
-      source: "",
-      files: ["registry/default/blocks/social-auth-nextjs/app/auth/login/page.tsx","registry/default/blocks/social-auth-nextjs/app/auth/error/page.tsx","registry/default/blocks/social-auth-nextjs/app/protected/page.tsx","registry/default/blocks/social-auth-nextjs/app/auth/oauth/route.ts","registry/default/blocks/social-auth-nextjs/components/login-form.tsx","registry/default/blocks/social-auth-nextjs/middleware.ts","registry/default/blocks/social-auth-nextjs/components/logout-button.tsx","registry/default/clients/nextjs/lib/supabase/client.ts","registry/default/clients/nextjs/lib/supabase/middleware.ts","registry/default/clients/nextjs/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "social-auth-react": {
-      name: "social-auth-react",
-      type: "registry:block",
-      registryDependencies: ["button","card"],
-      component: React.lazy(() => import("@/registry/default/blocks/social-auth-react/components/login-form.tsx")),
-      source: "",
-      files: ["registry/default/blocks/social-auth-react/components/login-form.tsx","registry/default/clients/react/lib/supabase/client.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "social-auth-react-router": {
-      name: "social-auth-react-router",
-      type: "registry:block",
-      registryDependencies: ["button","card"],
-      component: React.lazy(() => import("@/registry/default/blocks/social-auth-react-router/app/routes/auth.error.tsx")),
-      source: "",
-      files: ["registry/default/blocks/social-auth-react-router/app/routes/auth.error.tsx","registry/default/blocks/social-auth-react-router/app/routes/auth.oauth.tsx","registry/default/blocks/social-auth-react-router/app/routes/login.tsx","registry/default/blocks/social-auth-react-router/app/routes/logout.tsx","registry/default/blocks/social-auth-react-router/app/routes/protected.tsx","registry/default/blocks/social-auth-react-router/app/routes.ts","registry/default/clients/react-router/lib/supabase/client.ts","registry/default/clients/react-router/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "social-auth-tanstack": {
-      name: "social-auth-tanstack",
-      type: "registry:block",
-      registryDependencies: ["button","card"],
-      component: React.lazy(() => import("@/registry/default/blocks/social-auth-tanstack/components/login-form.tsx")),
-      source: "",
-      files: ["registry/default/blocks/social-auth-tanstack/components/login-form.tsx","registry/default/blocks/social-auth-tanstack/lib/supabase/fetch-user-server-fn.ts","registry/default/blocks/social-auth-tanstack/routes/_protected.tsx","registry/default/blocks/social-auth-tanstack/routes/_protected/protected.tsx","registry/default/blocks/social-auth-tanstack/routes/auth/error.tsx","registry/default/blocks/social-auth-tanstack/routes/auth/oauth.ts","registry/default/blocks/social-auth-tanstack/routes/login.tsx","registry/default/clients/tanstack/lib/supabase/client.ts","registry/default/clients/tanstack/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "dropzone-nextjs": {
-      name: "dropzone-nextjs",
-      type: "registry:component",
-      registryDependencies: ["button"],
-      component: React.lazy(() => import("@/registry/default/blocks/dropzone/components/dropzone.tsx")),
-      source: "",
-      files: ["registry/default/blocks/dropzone/components/dropzone.tsx","registry/default/blocks/dropzone/hooks/use-supabase-upload.ts","registry/default/clients/nextjs/lib/supabase/client.ts","registry/default/clients/nextjs/lib/supabase/middleware.ts","registry/default/clients/nextjs/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "dropzone-react": {
-      name: "dropzone-react",
-      type: "registry:component",
-      registryDependencies: ["button"],
-      component: React.lazy(() => import("@/registry/default/blocks/dropzone/components/dropzone.tsx")),
-      source: "",
-      files: ["registry/default/blocks/dropzone/components/dropzone.tsx","registry/default/blocks/dropzone/hooks/use-supabase-upload.ts","registry/default/clients/react/lib/supabase/client.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "dropzone-react-router": {
-      name: "dropzone-react-router",
-      type: "registry:component",
-      registryDependencies: ["button"],
-      component: React.lazy(() => import("@/registry/default/blocks/dropzone/components/dropzone.tsx")),
-      source: "",
-      files: ["registry/default/blocks/dropzone/components/dropzone.tsx","registry/default/blocks/dropzone/hooks/use-supabase-upload.ts","registry/default/clients/react-router/lib/supabase/client.ts","registry/default/clients/react-router/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "dropzone-tanstack": {
-      name: "dropzone-tanstack",
-      type: "registry:component",
-      registryDependencies: ["button"],
-      component: React.lazy(() => import("@/registry/default/blocks/dropzone/components/dropzone.tsx")),
-      source: "",
-      files: ["registry/default/blocks/dropzone/components/dropzone.tsx","registry/default/blocks/dropzone/hooks/use-supabase-upload.ts","registry/default/clients/tanstack/lib/supabase/client.ts","registry/default/clients/tanstack/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-cursor-nextjs": {
-      name: "realtime-cursor-nextjs",
-      type: "registry:component",
-      registryDependencies: [],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-cursor/components/cursor.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-cursor/components/cursor.tsx","registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx","registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts","registry/default/clients/nextjs/lib/supabase/client.ts","registry/default/clients/nextjs/lib/supabase/middleware.ts","registry/default/clients/nextjs/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-cursor-react": {
-      name: "realtime-cursor-react",
-      type: "registry:component",
-      registryDependencies: [],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-cursor/components/cursor.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-cursor/components/cursor.tsx","registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx","registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts","registry/default/clients/react/lib/supabase/client.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-cursor-react-router": {
-      name: "realtime-cursor-react-router",
-      type: "registry:component",
-      registryDependencies: [],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-cursor/components/cursor.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-cursor/components/cursor.tsx","registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx","registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts","registry/default/clients/react-router/lib/supabase/client.ts","registry/default/clients/react-router/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-cursor-tanstack": {
-      name: "realtime-cursor-tanstack",
-      type: "registry:component",
-      registryDependencies: [],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-cursor/components/cursor.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-cursor/components/cursor.tsx","registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx","registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors.ts","registry/default/clients/tanstack/lib/supabase/client.ts","registry/default/clients/tanstack/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "current-user-avatar-nextjs": {
-      name: "current-user-avatar-nextjs",
-      type: "registry:component",
-      registryDependencies: ["avatar"],
-      component: React.lazy(() => import("@/registry/default/blocks/current-user-avatar/components/current-user-avatar.tsx")),
-      source: "",
-      files: ["registry/default/blocks/current-user-avatar/components/current-user-avatar.tsx","registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts","registry/default/clients/nextjs/lib/supabase/client.ts","registry/default/clients/nextjs/lib/supabase/middleware.ts","registry/default/clients/nextjs/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "current-user-avatar-react": {
-      name: "current-user-avatar-react",
-      type: "registry:component",
-      registryDependencies: ["avatar"],
-      component: React.lazy(() => import("@/registry/default/blocks/current-user-avatar/components/current-user-avatar.tsx")),
-      source: "",
-      files: ["registry/default/blocks/current-user-avatar/components/current-user-avatar.tsx","registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts","registry/default/clients/react/lib/supabase/client.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "current-user-avatar-react-router": {
-      name: "current-user-avatar-react-router",
-      type: "registry:component",
-      registryDependencies: ["avatar"],
-      component: React.lazy(() => import("@/registry/default/blocks/current-user-avatar/components/current-user-avatar.tsx")),
-      source: "",
-      files: ["registry/default/blocks/current-user-avatar/components/current-user-avatar.tsx","registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts","registry/default/clients/react-router/lib/supabase/client.ts","registry/default/clients/react-router/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "current-user-avatar-tanstack": {
-      name: "current-user-avatar-tanstack",
-      type: "registry:component",
-      registryDependencies: ["avatar"],
-      component: React.lazy(() => import("@/registry/default/blocks/current-user-avatar/components/current-user-avatar.tsx")),
-      source: "",
-      files: ["registry/default/blocks/current-user-avatar/components/current-user-avatar.tsx","registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts","registry/default/clients/tanstack/lib/supabase/client.ts","registry/default/clients/tanstack/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-avatar-stack-nextjs": {
-      name: "realtime-avatar-stack-nextjs",
-      type: "registry:component",
-      registryDependencies: ["avatar","tooltip"],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx","registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx","registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts","registry/default/clients/nextjs/lib/supabase/client.ts","registry/default/clients/nextjs/lib/supabase/middleware.ts","registry/default/clients/nextjs/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-avatar-stack-react": {
-      name: "realtime-avatar-stack-react",
-      type: "registry:component",
-      registryDependencies: ["avatar","tooltip"],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx","registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx","registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts","registry/default/clients/react/lib/supabase/client.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-avatar-stack-react-router": {
-      name: "realtime-avatar-stack-react-router",
-      type: "registry:component",
-      registryDependencies: ["avatar","tooltip"],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx","registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx","registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts","registry/default/clients/react-router/lib/supabase/client.ts","registry/default/clients/react-router/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-avatar-stack-tanstack": {
-      name: "realtime-avatar-stack-tanstack",
-      type: "registry:component",
-      registryDependencies: ["avatar","tooltip"],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx","registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx","registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts","registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts","registry/default/clients/tanstack/lib/supabase/client.ts","registry/default/clients/tanstack/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-chat-nextjs": {
-      name: "realtime-chat-nextjs",
-      type: "registry:component",
-      registryDependencies: ["input","button"],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-chat/components/chat-message.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-chat/components/chat-message.tsx","registry/default/blocks/realtime-chat/components/realtime-chat.tsx","registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx","registry/default/blocks/realtime-chat/hooks/use-chat-scroll.tsx","registry/default/clients/nextjs/lib/supabase/client.ts","registry/default/clients/nextjs/lib/supabase/middleware.ts","registry/default/clients/nextjs/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-chat-react": {
-      name: "realtime-chat-react",
-      type: "registry:component",
-      registryDependencies: ["input","button"],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-chat/components/chat-message.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-chat/components/chat-message.tsx","registry/default/blocks/realtime-chat/components/realtime-chat.tsx","registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx","registry/default/blocks/realtime-chat/hooks/use-chat-scroll.tsx","registry/default/clients/react/lib/supabase/client.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-chat-react-router": {
-      name: "realtime-chat-react-router",
-      type: "registry:component",
-      registryDependencies: ["input","button"],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-chat/components/chat-message.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-chat/components/chat-message.tsx","registry/default/blocks/realtime-chat/components/realtime-chat.tsx","registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx","registry/default/blocks/realtime-chat/hooks/use-chat-scroll.tsx","registry/default/clients/react-router/lib/supabase/client.ts","registry/default/clients/react-router/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "realtime-chat-tanstack": {
-      name: "realtime-chat-tanstack",
-      type: "registry:component",
-      registryDependencies: ["input","button"],
-      component: React.lazy(() => import("@/registry/default/blocks/realtime-chat/components/chat-message.tsx")),
-      source: "",
-      files: ["registry/default/blocks/realtime-chat/components/chat-message.tsx","registry/default/blocks/realtime-chat/components/realtime-chat.tsx","registry/default/blocks/realtime-chat/hooks/use-realtime-chat.tsx","registry/default/blocks/realtime-chat/hooks/use-chat-scroll.tsx","registry/default/clients/tanstack/lib/supabase/client.ts","registry/default/clients/tanstack/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "infinite-query-hook": {
-      name: "infinite-query-hook",
-      type: "registry:block",
-      registryDependencies: [],
-      
-      source: "",
-      files: ["registry/default/blocks/infinite-query-hook/hooks/use-infinite-query.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "supabase-client-nextjs": {
-      name: "supabase-client-nextjs",
-      type: "registry:lib",
-      registryDependencies: [],
-      
-      source: "",
-      files: ["registry/default/clients/nextjs/lib/supabase/client.ts","registry/default/clients/nextjs/lib/supabase/middleware.ts","registry/default/clients/nextjs/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "supabase-client-react": {
-      name: "supabase-client-react",
-      type: "registry:lib",
-      registryDependencies: [],
-      
-      source: "",
-      files: ["registry/default/clients/react/lib/supabase/client.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "supabase-client-react-router": {
-      name: "supabase-client-react-router",
-      type: "registry:lib",
-      registryDependencies: [],
-      
-      source: "",
-      files: ["registry/default/clients/react-router/lib/supabase/client.ts","registry/default/clients/react-router/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "supabase-client-tanstack": {
-      name: "supabase-client-tanstack",
-      type: "registry:lib",
-      registryDependencies: [],
-      
-      source: "",
-      files: ["registry/default/clients/tanstack/lib/supabase/client.ts","registry/default/clients/tanstack/lib/supabase/server.ts"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "platform-kit-nextjs": {
-      name: "platform-kit-nextjs",
-      type: "registry:block",
-      registryDependencies: ["alert","badge","button","card","chart","command","dialog","drawer","form","hover-card","input","label","popover","select","skeleton","switch","table","toggle","toggle-group","tooltip"],
-      component: React.lazy(() => import("@/registry/default/platform/platform-kit-nextjs/components/dynamic-form.tsx")),
-      source: "",
-      files: ["registry/default/platform/platform-kit-nextjs/app/api/ai/sql/route.ts","registry/default/platform/platform-kit-nextjs/app/api/supabase-proxy/[...path]/route.ts","registry/default/platform/platform-kit-nextjs/components/dynamic-form.tsx","registry/default/platform/platform-kit-nextjs/components/logo-supabase.tsx","registry/default/platform/platform-kit-nextjs/components/results-table.tsx","registry/default/platform/platform-kit-nextjs/components/sql-editor.tsx","registry/default/platform/platform-kit-nextjs/components/supabase-manager/auth.tsx","registry/default/platform/platform-kit-nextjs/components/supabase-manager/database.tsx","registry/default/platform/platform-kit-nextjs/components/supabase-manager/index.tsx","registry/default/platform/platform-kit-nextjs/components/supabase-manager/logs.tsx","registry/default/platform/platform-kit-nextjs/components/supabase-manager/secrets.tsx","registry/default/platform/platform-kit-nextjs/components/supabase-manager/storage.tsx","registry/default/platform/platform-kit-nextjs/components/supabase-manager/suggestions.tsx","registry/default/platform/platform-kit-nextjs/components/supabase-manager/users.tsx","registry/default/platform/platform-kit-nextjs/components/users-growth-chart.tsx","registry/default/platform/platform-kit-nextjs/hooks/use-auth.ts","registry/default/platform/platform-kit-nextjs/hooks/use-logs.ts","registry/default/platform/platform-kit-nextjs/hooks/use-run-query.ts","registry/default/platform/platform-kit-nextjs/hooks/use-secrets.ts","registry/default/platform/platform-kit-nextjs/hooks/use-storage.ts","registry/default/platform/platform-kit-nextjs/hooks/use-suggestions.ts","registry/default/platform/platform-kit-nextjs/hooks/use-tables.ts","registry/default/platform/platform-kit-nextjs/hooks/use-user-counts.ts","registry/default/platform/platform-kit-nextjs/lib/logs.ts","registry/default/platform/platform-kit-nextjs/lib/management-api-schema.d.ts","registry/default/platform/platform-kit-nextjs/lib/management-api.ts","registry/default/platform/platform-kit-nextjs/lib/pg-meta/sql.ts","registry/default/platform/platform-kit-nextjs/lib/pg-meta/index.ts","registry/default/platform/platform-kit-nextjs/lib/pg-meta/types.ts","registry/default/platform/platform-kit-nextjs/lib/schemas/auth.ts","registry/default/platform/platform-kit-nextjs/lib/schemas/secrets.ts","registry/default/platform/platform-kit-nextjs/contexts/SheetNavigationContext.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
-    "ai-editor-rules": {
-      name: "ai-editor-rules",
-      type: "registry:file",
-      registryDependencies: [],
-      
-      source: "",
-      files: ["registry/default/ai-editor-rules/create-db-functions.mdc","registry/default/ai-editor-rules/create-migration.mdc","registry/default/ai-editor-rules/create-rls-policies.mdc","registry/default/ai-editor-rules/postgres-sql-style-guide.mdc","registry/default/ai-editor-rules/writing-supabase-edge-functions.mdc","registry/default/ai-editor-rules/use-realtime.mdc"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    }
-    ,
     "dropzone-demo": {
-      name: "dropzone-demo",
-      type: "registry:example",
-      registryDependencies: [],
       component: React.lazy(() => import("@/registry/default/examples/dropzone-demo.tsx")),
-      source: "",
-      files: ["registry/default/examples/dropzone-demo.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
     }
     ,
     "realtime-cursor-demo": {
-      name: "realtime-cursor-demo",
-      type: "registry:example",
-      registryDependencies: [],
       component: React.lazy(() => import("@/registry/default/examples/realtime-cursor-demo.tsx")),
-      source: "",
-      files: ["registry/default/examples/realtime-cursor-demo.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
     }
     ,
     "password-based-auth-demo": {
-      name: "password-based-auth-demo",
-      type: "registry:example",
-      registryDependencies: [],
       component: React.lazy(() => import("@/registry/default/examples/password-based-auth.tsx")),
-      source: "",
-      files: ["registry/default/examples/password-based-auth.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
     }
     ,
     "current-user-avatar-demo": {
-      name: "current-user-avatar-demo",
-      type: "registry:example",
-      registryDependencies: [],
       component: React.lazy(() => import("@/registry/default/examples/current-user-avatar-demo.tsx")),
-      source: "",
-      files: ["registry/default/examples/current-user-avatar-demo.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
     }
     ,
     "current-user-avatar-preview": {
-      name: "current-user-avatar-preview",
-      type: "registry:example",
-      registryDependencies: [],
       component: React.lazy(() => import("@/registry/default/examples/current-user-avatar-preview.tsx")),
-      source: "",
-      files: ["registry/default/examples/current-user-avatar-preview.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
     }
     ,
     "realtime-avatar-stack-demo": {
-      name: "realtime-avatar-stack-demo",
-      type: "registry:example",
-      registryDependencies: [],
       component: React.lazy(() => import("@/registry/default/examples/realtime-avatar-stack-demo.tsx")),
-      source: "",
-      files: ["registry/default/examples/realtime-avatar-stack-demo.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
     }
     ,
     "realtime-avatar-stack-preview": {
-      name: "realtime-avatar-stack-preview",
-      type: "registry:example",
-      registryDependencies: [],
       component: React.lazy(() => import("@/registry/default/examples/realtime-avatar-stack-preview.tsx")),
-      source: "",
-      files: ["registry/default/examples/realtime-avatar-stack-preview.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
     }
     ,
     "infinite-query-hook-demo": {
-      name: "infinite-query-hook-demo",
-      type: "registry:example",
-      registryDependencies: [],
       component: React.lazy(() => import("@/registry/default/examples/infinite-query-hook-demo.tsx")),
-      source: "",
-      files: ["registry/default/examples/infinite-query-hook-demo.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
     }
     
   },
-}
+} as const
diff --git a/apps/ui-library/components/block-item.tsx b/apps/ui-library/components/block-item.tsx
index beb5e2dbcb..e4618d1c92 100644
--- a/apps/ui-library/components/block-item.tsx
+++ b/apps/ui-library/components/block-item.tsx
@@ -19,11 +19,3 @@ export const BlockItem = ({ name }: BlockItemProps) => {
     </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/class-label.tsx b/apps/ui-library/components/class-label.tsx
deleted file mode 100644
index 6575c2f437..0000000000
--- a/apps/ui-library/components/class-label.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react'
-
-const ClassLabel = React.forwardRef<HTMLSpanElement, { children: React.ReactNode }>(
-  ({ children }, ref) => {
-    return (
-      <span
-        ref={ref}
-        className="bg-surface-100 rounded-full border px-2 font-mono text-xs text-foreground-lighter group-data-[state=open]:text-foreground"
-      >
-        {children}
-      </span>
-    )
-  }
-)
-
-ClassLabel.displayName = 'ClassLabel'
-
-export { ClassLabel }
diff --git a/apps/ui-library/components/click-counter.tsx b/apps/ui-library/components/click-counter.tsx
deleted file mode 100644
index df68cb14cd..0000000000
--- a/apps/ui-library/components/click-counter.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-
-export function ClickCounter() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <button
-      onClick={() => setCount(count + 1)}
-      className="whitespace-nowrap rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium tabular-nums text-gray-100 hover:bg-gray-500 hover:text-white"
-    >
-      {count} Clicks
-    </button>
-  )
-}
diff --git a/apps/ui-library/components/code-block-wrapper.tsx b/apps/ui-library/components/code-block-wrapper.tsx
deleted file mode 100644
index c347400671..0000000000
--- a/apps/ui-library/components/code-block-wrapper.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { cn } from 'ui'
-import { Button } from 'ui'
-import {
-  Collapsible_Shadcn_ as Collapsible,
-  CollapsibleContent_Shadcn_ as CollapsibleContent,
-  CollapsibleTrigger_Shadcn_ as CollapsibleTrigger,
-} from 'ui'
-
-interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
-  expandButtonTitle?: string
-}
-
-export function CodeBlockWrapper({
-  expandButtonTitle = 'View Code',
-  className,
-  children,
-  ...props
-}: CodeBlockProps) {
-  const [isOpened, setIsOpened] = React.useState(false)
-
-  return (
-    <Collapsible open={isOpened} onOpenChange={setIsOpened}>
-      <div className={cn('relative overflow-hidden', className)} {...props}>
-        <CollapsibleContent forceMount className={cn('overflow-hidden', !isOpened && 'max-h-32')}>
-          <div
-            className={cn(
-              '[&_pre]:my-0 [&_pre]:max-h-[650px] [&_pre]:pb-[100px]',
-              !isOpened ? '[&_pre]:overflow-hidden' : '[&_pre]:overflow-auto]'
-            )}
-          >
-            {children}
-          </div>
-        </CollapsibleContent>
-        <div
-          className={cn(
-            'absolute flex items-center justify-center bg-gradient-to-b from-zinc-700/30 to-zinc-950/90 p-2',
-            isOpened ? 'inset-x-0 bottom-0 h-12' : 'inset-0'
-          )}
-        >
-          <CollapsibleTrigger asChild>
-            <Button type="secondary" className="h-8 text-xs">
-              {isOpened ? 'Collapse' : expandButtonTitle}
-            </Button>
-          </CollapsibleTrigger>
-        </div>
-      </div>
-    </Collapsible>
-  )
-}
diff --git a/apps/ui-library/components/code-fragment.tsx b/apps/ui-library/components/code-fragment.tsx
deleted file mode 100644
index c3ef648478..0000000000
--- a/apps/ui-library/components/code-fragment.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-'use client'
-
-import { Index } from '@/__registry__'
-import * as React from 'react'
-
-import { useConfig } from '@/hooks/use-config'
-import { cn } from 'ui'
-
-import { styles } from '@/registry/styles'
-
-interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
-  name: string
-  extractClassname?: boolean
-  extractedClassNames?: string
-  align?: 'center' | 'start' | 'end'
-  showGrid?: boolean
-  showDottedGrid?: boolean
-  wide?: boolean
-}
-
-export function CodeFragment({
-  name,
-  children,
-  className,
-  extractClassname,
-  extractedClassNames,
-  align = 'center',
-  showGrid = false,
-  showDottedGrid = true,
-  wide = false,
-  ...props
-}: ComponentPreviewProps) {
-  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 (
-        <p className="text-sm text-muted-foreground">
-          Code fragment{' '}
-          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
-            {name}
-          </code>{' '}
-          not found in registry.
-        </p>
-      )
-    }
-
-    return <Component />
-  }, [name, config.style])
-
-  const ComponentPreview = React.useMemo(() => {
-    return (
-      <>
-        <div
-          className={cn('preview flex min-h-[350px] w-full justify-center p-10', {
-            'items-center': align === 'center',
-            'items-start': align === 'start',
-            'items-end': align === 'end',
-          })}
-        >
-          <React.Suspense
-            fallback={
-              <div className="flex items-center text-sm text-muted-foreground">Loading...</div>
-            }
-          >
-            {Preview}
-          </React.Suspense>
-        </div>
-      </>
-    )
-  }, [Preview, align])
-
-  const wideClasses = wide ? '2xl:-ml-12 2xl:-mr-12' : ''
-
-  return (
-    <div className={cn('mt-4 mb-12', wideClasses)}>
-      <div
-        className={cn(
-          'relative rounded-md border-t border-l border-r border-b bg-studio overflow-hidden'
-        )}
-      >
-        {showGrid && (
-          <div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
-        )}
-        {showDottedGrid && (
-          <div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
-        )}
-        <div className="z-10 relative">{ComponentPreview}</div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/ui-library/components/component-example.tsx b/apps/ui-library/components/component-example.tsx
deleted file mode 100644
index 4a4ae25ff3..0000000000
--- a/apps/ui-library/components/component-example.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { cn } from 'ui'
-import {
-  // CopyButton,
-  CopyWithClassNames,
-} from '@/components/copy-button'
-import {
-  Tabs_Shadcn_ as Tabs,
-  TabsContent_Shadcn_ as TabsContent,
-  TabsList_Shadcn_ as TabsList,
-  TabsTrigger_Shadcn_ as TabsTrigger,
-} from 'ui'
-
-interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
-  extractClassname?: boolean
-  extractedClassNames?: string
-  align?: 'center' | 'start' | 'end'
-  src?: string
-}
-
-export function ComponentExample({
-  children,
-  className,
-  extractClassname,
-  extractedClassNames,
-  align = 'center',
-  src: _,
-  ...props
-}: ComponentExampleProps) {
-  const [Example, Code, ...Children] = React.Children.toArray(children) as React.ReactElement[]
-
-  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])
-
-  return (
-    <div className={cn('group relative my-4 flex flex-col gap-2', 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 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 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>
-          {
-            extractedClassNames ? (
-              <CopyWithClassNames
-                value={codeString}
-                classNames={extractedClassNames}
-                className="absolute right-4 top-20"
-              />
-            ) : undefined
-            // codeString && <CopyButton value={codeString} className="absolute right-4 top-20" />
-          }
-        </div>
-        <TabsContent value="preview" className="rounded-md border">
-          <div
-            className={cn('flex min-h-[350px] justify-center p-10', {
-              'items-center': align === 'center',
-              'items-start': align === 'start',
-              'items-end': align === 'end',
-            })}
-          >
-            {Example}
-          </div>
-        </TabsContent>
-        <TabsContent value="code">
-          <div className="flex flex-col space-y-4">
-            <div className="w-full rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
-              {Code}
-            </div>
-            {Children?.length ? (
-              <div className="rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
-                {Children}
-              </div>
-            ) : null}
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}
diff --git a/apps/ui-library/components/component-preview.tsx b/apps/ui-library/components/component-preview.tsx
index 07a3e01182..c3406c4ade 100644
--- a/apps/ui-library/components/component-preview.tsx
+++ b/apps/ui-library/components/component-preview.tsx
@@ -10,7 +10,7 @@ import { styles } from '@/registry/styles'
 import { ChevronRight } from 'lucide-react'
 
 interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
-  name: string
+  name: keyof (typeof Index)['default']
   extractClassname?: boolean
   extractedClassNames?: string
   align?: 'center' | 'start' | 'end'
@@ -36,8 +36,6 @@ export function ComponentPreview({
   const [config] = useConfig()
   const index = styles.findIndex((style) => style.name === config.style)
 
-  const [expand, setExpandState] = React.useState(false)
-
   const Preview = React.useMemo(() => {
     const Component = Index['default'][name]?.component
 
diff --git a/apps/ui-library/components/component-props.tsx b/apps/ui-library/components/component-props.tsx
deleted file mode 100644
index de41a1ac42..0000000000
--- a/apps/ui-library/components/component-props.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import fs from 'fs'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
-// import { parse } from 'react-docgen'
-
-export function ComponentProps(props: any) {
-  // map through all props types for this component DropdownMenu
-  // return a table with the prop name, type, default value, and description
-
-  //   const code = `
-  // /** My first component */
-  // export default ({ name }: { name: string }) => <div>{{name}}</div>;
-  // `
-
-  //   const documentation = parse(code)
-  //
-  //   console.log(documentation)
-
-  // console.log('from the component props', JSON.parse(props.docs))
-
-  const docs = JSON.parse(props.docs)
-
-  // console.log(docs.props)
-
-  return (
-    <div className="space-y-2">
-      <p className="font-medium text-foreground-light">{props.children}</p>
-
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead className="font-mono uppercase text-xs font-normal">Prop Name</TableHead>
-            <TableHead className="font-mono uppercase text-xs font-normal">Required</TableHead>
-            <TableHead className="font-mono uppercase text-xs font-normal">Type</TableHead>
-            <TableHead className="font-mono uppercase text-xs text-right font-normal">
-              Description
-            </TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {Object.entries(docs.props).map(([propName, prop], index) => (
-            <TableRow key={index}>
-              <TableCell>{propName}</TableCell>
-              {/* 
-              // @ts-ignore */}
-              <TableCell>{prop.required ? 'Yes' : 'No'}</TableCell>
-              {/* 
-              // @ts-ignore */}
-              <TableCell>{prop.flowType.name}</TableCell>
-              {/* 
-              // @ts-ignore */}
-              <TableCell className="text-right">{prop.description}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  )
-}
diff --git a/apps/ui-library/components/component-source.tsx b/apps/ui-library/components/component-source.tsx
deleted file mode 100644
index c63d4e4931..0000000000
--- a/apps/ui-library/components/component-source.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { cn } from 'ui'
-import { CodeBlockWrapper } from '@/components/code-block-wrapper'
-
-interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
-  src: string
-}
-
-export function ComponentSource({ children, className, ...props }: ComponentSourceProps) {
-  return (
-    <CodeBlockWrapper
-      expandButtonTitle="Expand"
-      className={cn('my-6 overflow-hidden rounded-md', className)}
-    >
-      {children}
-    </CodeBlockWrapper>
-  )
-}
diff --git a/apps/ui-library/components/copy-button.tsx b/apps/ui-library/components/copy-button.tsx
index 4207af8e79..f2e84e2429 100644
--- a/apps/ui-library/components/copy-button.tsx
+++ b/apps/ui-library/components/copy-button.tsx
@@ -1,45 +1,16 @@
 'use client'
 
+import { Check, Copy } from 'lucide-react'
 import * as React from 'react'
 
-// import { NpmCommands } from 'types/unist'
-
-// import { Event, trackEvent } from '@/lib/events'
-import { Check, Copy } from 'lucide-react'
-import {
-  Button,
-  cn,
-  copyToClipboard,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuTriggerProps,
-} from 'ui'
+import { Button, cn, copyToClipboard } from 'ui'
 
 interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   value: string
   src?: string
-  //   event?: Event['name']
 }
 
-export async function copyToClipboardWithMeta(
-  value: string
-  // event?: Event
-) {
-  copyToClipboard(value)
-  if (event) {
-    // trackEvent(event)
-  }
-}
-
-export function CopyButton({
-  value,
-  className,
-  src,
-  // event,
-  ...props
-}: CopyButtonProps) {
+export function CopyButton({ value, className, src, ...props }: CopyButtonProps) {
   const [hasCopied, setHasCopied] = React.useState(false)
 
   React.useEffect(() => {
@@ -57,17 +28,7 @@ export function CopyButton({
         className
       )}
       onClick={() => {
-        copyToClipboardWithMeta(
-          value
-          //   event
-          //     ? {
-          //         name: event,
-          //         properties: {
-          //           code: value,
-          //         },
-          //       }
-          //     : undefined
-        )
+        copyToClipboard(value)
         setHasCopied(true)
       }}
       {...props}
@@ -77,109 +38,3 @@ export function CopyButton({
     </Button>
   )
 }
-
-interface CopyWithClassNamesProps extends DropdownMenuTriggerProps {
-  value: string
-  classNames: string
-  className?: string
-}
-
-export function CopyWithClassNames({
-  value,
-  classNames,
-  className,
-  ...props
-}: CopyWithClassNamesProps) {
-  const [hasCopied, setHasCopied] = React.useState(false)
-
-  React.useEffect(() => {
-    setTimeout(() => {
-      setHasCopied(false)
-    }, 2000)
-  }, [hasCopied])
-
-  const copyToClipboard = React.useCallback((value: string) => {
-    copyToClipboardWithMeta(value)
-    setHasCopied(true)
-  }, [])
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          size="small"
-          type="outline"
-          className={cn(
-            'relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50',
-            className
-          )}
-        >
-          {hasCopied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-          <span className="sr-only">Copy</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => copyToClipboard(value)}>Component</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => copyToClipboard(classNames)}>Classname</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-interface CopyNpmCommandButtonProps extends DropdownMenuTriggerProps {
-  //   commands: Required<NpmCommands>
-}
-
-// export function CopyNpmCommandButton({ commands, className, ...props }: CopyNpmCommandButtonProps) {
-//   const [hasCopied, setHasCopied] = React.useState(false)
-
-//   React.useEffect(() => {
-//     setTimeout(() => {
-//       setHasCopied(false)
-//     }, 2000)
-//   }, [hasCopied])
-
-//   //   const copyCommand = React.useCallback((value: string, pm: 'npm' | 'pnpm' | 'yarn' | 'bun') => {
-//   //     copyToClipboardWithMeta(value,
-//   //     //     {
-//   //     //   name: 'copy_npm_command',
-//   //     //   properties: {
-//   //     //     command: value,
-//   //     //     pm,
-//   //     //   },
-//   //     })
-//   //     setHasCopied(true)
-//   //   }, [])
-
-//   return (
-//     <DropdownMenu>
-//       <DropdownMenuTrigger asChild>
-//         <Button
-//           //   size="icon"
-//           type="outline"
-//           className={cn(
-//             'relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50',
-//             className
-//           )}
-//         >
-//           {hasCopied ? <CheckIcon className="h-3 w-3" /> : <CopyIcon className="h-3 w-3" />}
-//           <span className="sr-only">Copy</span>
-//         </Button>
-//       </DropdownMenuTrigger>
-//       <DropdownMenuContent align="end">
-//         <DropdownMenuItem onClick={() => copyCommand(commands.__npmCommand__, 'npm')}>
-//           npm
-//         </DropdownMenuItem>
-//         <DropdownMenuItem onClick={() => copyCommand(commands.__yarnCommand__, 'yarn')}>
-//           yarn
-//         </DropdownMenuItem>
-//         <DropdownMenuItem onClick={() => copyCommand(commands.__pnpmCommand__, 'pnpm')}>
-//           pnpm
-//         </DropdownMenuItem>
-//         <DropdownMenuItem onClick={() => copyCommand(commands.__bunCommand__, 'bun')}>
-//           bun
-//         </DropdownMenuItem>
-//       </DropdownMenuContent>
-//     </DropdownMenu>
-//   )
-// }
diff --git a/apps/ui-library/components/example-label.tsx b/apps/ui-library/components/example-label.tsx
deleted file mode 100644
index 6774d8e1bb..0000000000
--- a/apps/ui-library/components/example-label.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react'
-
-const ExampleLabel = React.forwardRef<HTMLSpanElement, { children: React.ReactNode }>(
-  ({ children }, ref) => {
-    return (
-      <span ref={ref} className="text-xs flex gap-3 items-center text-foreground-muted">
-        {children}
-      </span>
-    )
-  }
-)
-
-ExampleLabel.displayName = 'ExampleLabel'
-
-export { ExampleLabel }
diff --git a/apps/ui-library/components/files.tsx b/apps/ui-library/components/files.tsx
deleted file mode 100644
index 2eb32cdeff..0000000000
--- a/apps/ui-library/components/files.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client'
-
-import { cva } from 'class-variance-authority'
-import { FileIcon, FolderIcon, FolderOpen } from 'lucide-react'
-import { useState, type HTMLAttributes, type ReactNode } from 'react'
-import { cn, Collapsible_Shadcn_, CollapsibleContent_Shadcn_, CollapsibleTrigger_Shadcn_ } from 'ui'
-
-const itemVariants = cva(
-  'flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4'
-)
-
-export function Files({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement {
-  return (
-    <div className={cn('not-prose rounded-md border bg-fd-card p-2', className)} {...props}>
-      {props.children}
-    </div>
-  )
-}
-
-export interface FileProps extends HTMLAttributes<HTMLDivElement> {
-  name: string
-  icon?: ReactNode
-}
-
-export interface FolderProps extends HTMLAttributes<HTMLDivElement> {
-  name: string
-
-  disabled?: boolean
-
-  /**
-   * Open folder by default
-   *
-   * @defaultValue false
-   */
-  defaultOpen?: boolean
-}
-
-export function File({
-  name,
-  icon = <FileIcon />,
-  className,
-  ...rest
-}: FileProps): React.ReactElement {
-  return (
-    <div className={cn(itemVariants({ className }))} {...rest}>
-      {icon}
-      {name}
-    </div>
-  )
-}
-
-export function Folder({ name, defaultOpen = false, ...props }: FolderProps): React.ReactElement {
-  const [open, setOpen] = useState(defaultOpen)
-
-  return (
-    <Collapsible_Shadcn_ open={open} onOpenChange={setOpen} {...props}>
-      <CollapsibleTrigger_Shadcn_ className={cn(itemVariants({ className: 'w-full' }))}>
-        {open ? <FolderOpen /> : <FolderIcon />}
-        {name}
-      </CollapsibleTrigger_Shadcn_>
-      <CollapsibleContent_Shadcn_>
-        <div className="ms-2 flex flex-col border-l ps-2">{props.children}</div>
-      </CollapsibleContent_Shadcn_>
-    </Collapsible_Shadcn_>
-  )
-}
diff --git a/apps/ui-library/components/grid.tsx b/apps/ui-library/components/grid.tsx
deleted file mode 100644
index 659117a773..0000000000
--- a/apps/ui-library/components/grid.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { forwardRef } from 'react'
-import { cn } from 'ui'
-
-const Grid = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
-  ({ children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        {...props}
-        className={cn(
-          'grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 border-t border-l my-12',
-          props.className
-        )}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-
-Grid.displayName = 'Grid'
-
-const GridItem = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
-  ({ children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        {...props}
-        className={cn(
-          `
-            relative
-            min-h-32 
-            flex gap-4 flex-col items-center p-4
-            border-b border-r
-            bg-surface-75/50 
-            justify-center hover:bg-surface-100
-            group
-            cursor-pointer
-        `,
-          props.className
-        )}
-      >
-        <div
-          className="
-                    absolute
-                    w-full h-full box-content
-                    transition 
-                    group-hover:border 
-                    group-hover:border-foreground-muted 
-                    group-data-[state=open]:border 
-                    group-data-[state=open]:border-foreground-muted 
-                "
-        ></div>
-        {children}
-      </div>
-    )
-  }
-)
-
-GridItem.displayName = 'GridItem'
-
-export { Grid, GridItem }
diff --git a/apps/ui-library/components/homepage-svg-handler.tsx b/apps/ui-library/components/homepage-svg-handler.tsx
deleted file mode 100644
index 3ce0758b3b..0000000000
--- a/apps/ui-library/components/homepage-svg-handler.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import SVG from 'react-inlinesvg'
-import { cn } from 'ui'
-
-const HomepageSvgHandler = ({ name, className }: { name: string; className?: string }) => {
-  const { resolvedTheme } = useTheme()
-
-  return (
-    <div>
-      <SVG
-        className={cn('h-32 w-auto', className)}
-        src={`${process.env.NEXT_PUBLIC_BASE_PATH ?? ''}/img/design-system-marks/${name}--${resolvedTheme}.svg`}
-      />
-    </div>
-  )
-}
-
-export { HomepageSvgHandler }
diff --git a/apps/ui-library/components/icons.tsx b/apps/ui-library/components/icons.tsx
deleted file mode 100644
index e61c80fb46..0000000000
--- a/apps/ui-library/components/icons.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Index } from 'icons/__registry__/index'
-import { Copy } from 'lucide-react'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from 'ui'
-import { Grid, GridItem } from './grid'
-
-function Icons() {
-  return (
-    <>
-      <Grid>
-        {Index.map((icon: any, i: number) => (
-          <DropdownMenu key={i} modal={false}>
-            <DropdownMenuTrigger asChild>
-              <GridItem>
-                <icon.component
-                  strokeWidth={1.5}
-                  size={21}
-                  className="group-data-[state=open]:scale-125 transition-all"
-                />
-                <span className="bg-surface-100 rounded-full border px-2 font-mono text-xs text-foreground-lighter group-data-[state=open]:text-foreground">
-                  {icon.name}
-                </span>
-              </GridItem>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-48">
-              <DropdownMenuGroup>
-                <DropdownMenuItem
-                  className="flex items-center gap-2"
-                  onSelect={() => navigator.clipboard.writeText(icon.name)}
-                >
-                  <Copy size={14} strokeWidth={1} />
-                  Copy name
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  className="flex items-center gap-2"
-                  onSelect={() => navigator.clipboard.writeText(icon.jsx)}
-                >
-                  <Copy size={14} strokeWidth={1} />
-                  Copy JSX
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  className="flex items-center gap-2"
-                  onSelect={() => navigator.clipboard.writeText(icon.import)}
-                >
-                  <Copy size={14} strokeWidth={1} />
-                  Copy import path
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  className="flex items-center gap-2"
-                  onSelect={() => navigator.clipboard.writeText(icon.svg)}
-                >
-                  <Copy size={14} strokeWidth={1} />
-                  Copy SVG
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        ))}
-      </Grid>
-    </>
-  )
-}
-
-export { Icons }
diff --git a/apps/ui-library/components/mdx-components.tsx b/apps/ui-library/components/mdx-components.tsx
index d5989cb92c..ff192643d0 100644
--- a/apps/ui-library/components/mdx-components.tsx
+++ b/apps/ui-library/components/mdx-components.tsx
@@ -1,45 +1,23 @@
 import { useMDXComponent } from 'next-contentlayer2/hooks'
-import Image from 'next/image'
 import Link from 'next/link'
-import * as React from 'react'
-// import { NpmCommands } from 'types/unist'
-// import { Event } from '@/lib/events'
-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 } from '@/components/copy-button'
-import { cn } from 'ui'
-// import { FrameworkDocs } from '@/components/framework-docs'
-import { CodeFragment } from '@/components/code-fragment'
-import { DualRealtimeChat } from '@/components/dual-realtime-chat'
-import { Icons } from '@/components/icons'
-import { RegistryBlock } from '@/components/registry-block'
-import TanStackBeta from '@/components/tanstack-beta'
-import { ThemeSettings } from '@/components/theme-settings'
-import { Style } from '@/registry/styles'
+
+import type { Style } from '@/registry/styles'
 import {
   Accordion_Shadcn_ as Accordion,
   AccordionContent_Shadcn_ as AccordionContent,
   AccordionItem_Shadcn_ as AccordionItem,
   AccordionTrigger_Shadcn_ as AccordionTrigger,
-  Alert_Shadcn_ as Alert,
-  AlertDescription_Shadcn_ as AlertDescription,
-  AlertTitle_Shadcn_ as AlertTitle,
-  AspectRatio,
-  Tabs_Shadcn_ as Tabs,
-  TabsContent_Shadcn_ as TabsContent,
-  TabsList_Shadcn_ as TabsList,
-  TabsTrigger_Shadcn_ as TabsTrigger,
+  cn,
 } from 'ui'
-import { Admonition } from 'ui-patterns/admonition'
 import { BlockItem } from './block-item'
 import { BlockPreview } from './block-preview'
-import { ComponentProps } from './component-props'
-import { SonnerExpandConfig } from './sonner-expand-config'
-import { SonnerPositionConfig } from './sonner-expand-position'
+import { Callout } from './callout'
+import { ComponentPreview } from './component-preview'
+import { CopyButton } from './copy-button'
+import { DualRealtimeChat } from './dual-realtime-chat'
+import { RegistryBlock } from './registry-block'
 import { StyleWrapper } from './style-wrapper'
+import TanStackBeta from './tanstack-beta'
 
 const components = {
   RegistryBlock,
@@ -47,9 +25,6 @@ const components = {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-  Alert,
-  AlertTitle,
-  AlertDescription,
   h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
     <h1 className={cn('font-heading mt-2 scroll-m-20 text-4xl font-bold', className)} {...props} />
   ),
@@ -140,28 +115,19 @@ const components = {
       {...props}
     />
   ),
-  pre: (
-    {
-      className,
-      __rawString__,
-      // __npmCommand__,
-      // __yarnCommand__,
-      // __pnpmCommand__,
-      // __bunCommand__,
-      __withMeta__,
-      __src__,
-      // __event__,
-      __style__,
-      ...props
-    }: React.HTMLAttributes<HTMLPreElement> & {
-      __style__?: Style['name']
-      __rawString__?: string
-      __withMeta__?: boolean
-      __src__?: string
-      // __event__?: Event['name']
-    }
-    // & NpmCommands
-  ) => {
+  pre: ({
+    className,
+    __rawString__,
+    __withMeta__,
+    __src__,
+    __style__,
+    ...props
+  }: React.HTMLAttributes<HTMLPreElement> & {
+    __style__?: Style['name']
+    __rawString__?: string
+    __withMeta__?: boolean
+    __src__?: string
+  }) => {
     return (
       <StyleWrapper styleName={__style__}>
         <pre
@@ -172,25 +138,12 @@ const components = {
           {...props}
         />
         {__rawString__ && (
-          // !__npmCommand__ &&
           <CopyButton
             value={__rawString__}
             src={__src__}
-            // event={__event__}
             className={cn('absolute right-4 top-4', __withMeta__ && 'top-16')}
           />
         )}
-        {/* {__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && __bunCommand__ && (
-          <CopyNpmCommandButton
-            commands={{
-              __npmCommand__,
-              __yarnCommand__,
-              __pnpmCommand__,
-              __bunCommand__,
-            }}
-            className={cn('absolute right-4 top-4', __withMeta__ && 'top-16')}
-          />
-        )} */}
       </StyleWrapper>
     )
   },
@@ -203,60 +156,9 @@ const components = {
       {...props}
     />
   ),
-  Image,
   Callout,
   ComponentPreview,
-  ComponentExample,
-  ComponentSource,
-  ComponentProps,
-  AspectRatio,
-  CodeBlockWrapper: ({ ...props }) => <CodeBlockWrapper className="rounded-md border" {...props} />,
-  Step: ({ className, ...props }: React.ComponentProps<'h3'>) => (
-    <h3
-      className={cn(
-        'font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight',
-        className
-      )}
-      {...props}
-    />
-  ),
-  Steps: ({ ...props }) => (
-    <div className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]" {...props} />
-  ),
-  Tabs: ({ className, ...props }: React.ComponentProps<typeof Tabs>) => (
-    <Tabs className={cn('relative mt-6 w-full', className)} {...props} />
-  ),
-  TabsList: ({ className, ...props }: React.ComponentProps<typeof TabsList>) => (
-    <TabsList
-      className={cn('w-full justify-start rounded-none border-b bg-transparent p-0', className)}
-      {...props}
-    />
-  ),
-  TabsTrigger: ({ className, ...props }: React.ComponentProps<typeof TabsTrigger>) => (
-    <TabsTrigger
-      className={cn(
-        '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',
-        className
-      )}
-      {...props}
-    />
-  ),
-  TabsContent: ({ className, ...props }: React.ComponentProps<typeof TabsContent>) => (
-    <TabsContent
-      className={cn(
-        'relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold',
-        className
-      )}
-      {...props}
-    />
-  ),
   TanStackBeta,
-  // FrameworkDocs: ({ className, ...props }: React.ComponentProps<typeof FrameworkDocs>) => (
-  //   <FrameworkDocs className={cn(className)} {...props} />
-  // ),
-  Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
-    <Link className={cn('font-medium underline underline-offset-4', className)} {...props} />
-  ),
   LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
     <Link
       className={cn(
@@ -266,12 +168,6 @@ const components = {
       {...props}
     />
   ),
-  Icons,
-  ThemeSettings,
-  CodeFragment,
-  Admonition,
-  SonnerExpandConfig,
-  SonnerPositionConfig,
   BlockItem,
   BlockPreview,
   DualRealtimeChat,
diff --git a/apps/ui-library/components/mode-toggle.tsx b/apps/ui-library/components/mode-toggle.tsx
deleted file mode 100644
index 1036acb0ae..0000000000
--- a/apps/ui-library/components/mode-toggle.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'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/providers.tsx b/apps/ui-library/components/providers.tsx
deleted file mode 100644
index f8c19655cc..0000000000
--- a/apps/ui-library/components/providers.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'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/sonner-expand-config.tsx b/apps/ui-library/components/sonner-expand-config.tsx
deleted file mode 100644
index 43f2295c29..0000000000
--- a/apps/ui-library/components/sonner-expand-config.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useConfig } from '@/hooks/use-config'
-import { Switch } from 'ui'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-
-function SonnerExpandConfig() {
-  const [config, setConfig] = useConfig()
-
-  return (
-    <div className="px-5 py-5 border rounded-lg my-2 bg-surface-75">
-      <form>
-        <FormItemLayout
-          name="sonnerExpand"
-          id="sonnerExpand"
-          isReactForm={false}
-          label="Use expand prop"
-          description="You will need to fire a few Sonner toasts first"
-          layout="flex"
-        >
-          <Switch
-            name="sonnerExpand"
-            id="sonnerExpand"
-            size="large"
-            checked={config.sonnerExpand}
-            onCheckedChange={(e) =>
-              setConfig({
-                ...config,
-                sonnerExpand: e,
-              })
-            }
-          />
-        </FormItemLayout>
-      </form>
-    </div>
-  )
-}
-
-export { SonnerExpandConfig }
diff --git a/apps/ui-library/components/sonner-expand-position.tsx b/apps/ui-library/components/sonner-expand-position.tsx
deleted file mode 100644
index 82510e0339..0000000000
--- a/apps/ui-library/components/sonner-expand-position.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useConfig } from '@/hooks/use-config'
-import { ComponentProps } from 'react'
-import {
-  SelectContent_Shadcn_,
-  SelectGroup_Shadcn_,
-  SelectItem_Shadcn_,
-  SelectLabel_Shadcn_,
-  SelectTrigger_Shadcn_,
-  SelectValue_Shadcn_,
-  Select_Shadcn_,
-  SonnerToaster,
-} from 'ui'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-
-function SonnerPositionConfig() {
-  const [config, setConfig] = useConfig()
-
-  type Position = NonNullable<ComponentProps<typeof SonnerToaster>['position']>
-
-  const positions: Position[] = [
-    'top-left',
-    'top-right',
-    'bottom-left',
-    'bottom-right',
-    'top-center',
-    'bottom-center',
-  ]
-
-  return (
-    <div className="px-5 py-5 border rounded-lg my-2 bg-surface-75">
-      <form>
-        <FormItemLayout
-          name="sonnerExpand"
-          id="sonnerExpand"
-          isReactForm={false}
-          label="Use position prop"
-          description="You will need to fire a few Sonner toasts first"
-          layout="flex"
-        >
-          <Select_Shadcn_
-            value={config.sonnerPosition}
-            defaultValue={config.sonnerPosition}
-            onValueChange={(e: Position) => {
-              setConfig({
-                ...config,
-                sonnerPosition: e,
-              })
-            }}
-          >
-            <SelectTrigger_Shadcn_ className="w-[180px]">
-              <SelectValue_Shadcn_ placeholder="Select a position" />
-            </SelectTrigger_Shadcn_>
-            <SelectContent_Shadcn_>
-              <SelectGroup_Shadcn_>
-                <SelectLabel_Shadcn_>Positions available</SelectLabel_Shadcn_>
-                {positions.map((position) => (
-                  <SelectItem_Shadcn_ key={position} value={position}>
-                    {position}
-                  </SelectItem_Shadcn_>
-                ))}
-              </SelectGroup_Shadcn_>
-            </SelectContent_Shadcn_>
-          </Select_Shadcn_>
-        </FormItemLayout>
-      </form>
-    </div>
-  )
-}
-
-export { SonnerPositionConfig }
diff --git a/apps/ui-library/components/tailwind-indicator.tsx b/apps/ui-library/components/tailwind-indicator.tsx
deleted file mode 100644
index 3070028d10..0000000000
--- a/apps/ui-library/components/tailwind-indicator.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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/components/theme-settings.tsx b/apps/ui-library/components/theme-settings.tsx
deleted file mode 100644
index 0d06e68b37..0000000000
--- a/apps/ui-library/components/theme-settings.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import { useEffect, useState } from 'react'
-
-import SVG from 'react-inlinesvg'
-import { RadioGroupLargeItem_Shadcn_, RadioGroup_Shadcn_, Theme, singleThemes } from 'ui'
-
-const ThemeSettings = () => {
-  const [mounted, setMounted] = useState(false)
-  const { theme, setTheme } = useTheme()
-
-  /**
-   * Avoid Hydration Mismatch
-   * https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
-   */
-  // useEffect only runs on the client, so now we can safely show the UI
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return null
-  }
-
-  function SingleThemeSelection() {
-    return (
-      <form className="py-8">
-        <RadioGroup_Shadcn_
-          name="theme"
-          onValueChange={setTheme}
-          aria-label="Choose a theme"
-          defaultValue={theme}
-          value={theme}
-          className="flex flex-wrap gap-3"
-        >
-          {singleThemes.map((theme: Theme) => (
-            <RadioGroupLargeItem_Shadcn_ key={theme.value} value={theme.value} label={theme.name}>
-              <SVG src={`${process.env.NEXT_PUBLIC_BASE_PATH}/img/themes/${theme.value}.svg`} />
-            </RadioGroupLargeItem_Shadcn_>
-          ))}
-        </RadioGroup_Shadcn_>
-      </form>
-    )
-  }
-
-  return (
-    <>
-      <SingleThemeSelection />
-    </>
-  )
-}
-
-export { ThemeSettings }
diff --git a/apps/ui-library/components/theme-switcher-dropdown.tsx b/apps/ui-library/components/theme-switcher-dropdown.tsx
index 7aadc6fe9f..e52a515d14 100644
--- a/apps/ui-library/components/theme-switcher-dropdown.tsx
+++ b/apps/ui-library/components/theme-switcher-dropdown.tsx
@@ -3,7 +3,7 @@
 import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
-import SVG from 'react-inlinesvg'
+
 import {
   Button,
   DropdownMenu,
@@ -13,7 +13,6 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  RadioGroupLargeItem_Shadcn_,
   RadioGroup_Shadcn_,
   Theme,
   singleThemes,
diff --git a/apps/ui-library/components/top-navigation-search.tsx b/apps/ui-library/components/top-navigation-search.tsx
deleted file mode 100644
index af1c8e1286..0000000000
--- a/apps/ui-library/components/top-navigation-search.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client'
-
-import { Search } from 'lucide-react'
-import { Input } from 'ui-patterns/DataInputs/Input'
-
-function TopNavigationSearch() {
-  return (
-    <Input
-      size="small"
-      className="transition w-64 rounded-full hover:bg-surface-200 hover:border-foreground-muted cursor-pointer"
-      icon={<Search size={14} />}
-      placeholder="Search UI Library..."
-    />
-  )
-}
-
-export { TopNavigationSearch }
diff --git a/apps/ui-library/components/top-navigation.tsx b/apps/ui-library/components/top-navigation.tsx
deleted file mode 100644
index c4fd5ffa81..0000000000
--- a/apps/ui-library/components/top-navigation.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// import { docsConfig } from '@/config/docs'
-import Link from 'next/link'
-import { CommandMenu } from './command-menu'
-import { HomepageSvgHandler } from './homepage-svg-handler'
-import { ThemeSwitcherDropdown } from './theme-switcher-dropdown'
-
-function TopNavigation() {
-  return (
-    <header className="sticky top-0 z-50 w-full border-t bg-studio/95 backdrop-blur supports-[backdrop-filter]:bg-studio/60">
-      <div className="absolute border-b border-dashed w-full top-[3.4rem] -z-10"></div>
-      <nav className="h-14 w-full flex">
-        <div className="max-w-site border-b w-full flex flex-row items-center gap-6 mx-auto px-6 border-r border-l justify-between">
-          <div className="flex items-center gap-8">
-            <Link href="/">
-              <h1>Supabase UI Library</h1>
-            </Link>
-            <HomepageSvgHandler name="design-system-marks" className="h-4 w-auto" />
-          </div>
-          {/* {docsConfig.mainNav.map((section) => (
-            <>
-            <div className="font-mono uppercase text-xs text-foreground-lighter">
-            {section.title}
-            </div>
-            </>
-          ))} */}
-          <div className="flex items-center gap-8">
-            {/* <TopNavigationSearch /> */}
-            <CommandMenu />
-            <ThemeSwitcherDropdown />
-          </div>
-        </div>
-      </nav>
-    </header>
-  )
-}
-
-export default TopNavigation
diff --git a/apps/ui-library/content/docs/nextjs/dropzone.mdx b/apps/ui-library/content/docs/nextjs/dropzone.mdx
index b44046058f..bde845ff7d 100644
--- a/apps/ui-library/content/docs/nextjs/dropzone.mdx
+++ b/apps/ui-library/content/docs/nextjs/dropzone.mdx
@@ -6,6 +6,7 @@ description: Displays a control for easier uploading of files directly to Supaba
 <ComponentPreview
   name="dropzone-demo"
   description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+  showCode={false}
 />
 
 ## Installation
diff --git a/apps/ui-library/content/docs/react-router/dropzone.mdx b/apps/ui-library/content/docs/react-router/dropzone.mdx
index df505f31a6..fd7f6ef6d2 100644
--- a/apps/ui-library/content/docs/react-router/dropzone.mdx
+++ b/apps/ui-library/content/docs/react-router/dropzone.mdx
@@ -6,6 +6,7 @@ description: Displays a control for easier uploading of files directly to Supaba
 <ComponentPreview
   name="dropzone-demo"
   description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+  showCode={false}
 />
 
 ## Installation
diff --git a/apps/ui-library/content/docs/react/dropzone.mdx b/apps/ui-library/content/docs/react/dropzone.mdx
index 59f39112bf..f0e3661f64 100644
--- a/apps/ui-library/content/docs/react/dropzone.mdx
+++ b/apps/ui-library/content/docs/react/dropzone.mdx
@@ -6,6 +6,7 @@ description: Displays a control for easier uploading of files directly to Supaba
 <ComponentPreview
   name="dropzone-demo"
   description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+  showCode={false}
 />
 
 ## Installation
diff --git a/apps/ui-library/content/docs/tanstack/dropzone.mdx b/apps/ui-library/content/docs/tanstack/dropzone.mdx
index 024244b5c8..f095d3df4e 100644
--- a/apps/ui-library/content/docs/tanstack/dropzone.mdx
+++ b/apps/ui-library/content/docs/tanstack/dropzone.mdx
@@ -6,6 +6,7 @@ description: Displays a control for easier uploading of files directly to Supaba
 <ComponentPreview
   name="dropzone-demo"
   description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+  showCode={false}
 />
 
 ## Installation
diff --git a/apps/ui-library/contentlayer.config.js b/apps/ui-library/contentlayer.config.js
index edc30b91b1..3b54addb42 100644
--- a/apps/ui-library/contentlayer.config.js
+++ b/apps/ui-library/contentlayer.config.js
@@ -1,6 +1,6 @@
-import path from 'path'
 import { getHighlighter, loadTheme } from '@shikijs/compat'
 import { defineDocumentType, defineNestedType, makeSource } from 'contentlayer2/source-files'
+import path from 'path'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
@@ -8,9 +8,6 @@ import { codeImport } from 'remark-code-import'
 import remarkGfm from 'remark-gfm'
 import { visit } from 'unist-util-visit'
 
-import { rehypeComponent } from './lib/rehype-component'
-import { rehypeNpmCommand } from './lib/rehype-npm-command'
-
 /** @type {import('contentlayer2/source-files').ComputedFields} */
 const computedFields = {
   slug: {
@@ -112,7 +109,6 @@ export default makeSource({
     remarkPlugins: [remarkGfm, codeImport],
     rehypePlugins: [
       rehypeSlug,
-      rehypeComponent,
       () => (tree) => {
         visit(tree, (node) => {
           if (node?.type === 'element' && node?.tagName === 'pre') {
diff --git a/apps/ui-library/hooks/use-media-query.tsx b/apps/ui-library/hooks/use-media-query.tsx
deleted file mode 100644
index 1f02308ba7..0000000000
--- a/apps/ui-library/hooks/use-media-query.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react'
-
-export function useMediaQuery(query: string) {
-  const [value, setValue] = React.useState(false)
-
-  React.useEffect(() => {
-    function onChange(event: MediaQueryListEvent) {
-      setValue(event.matches)
-    }
-
-    const result = matchMedia(query)
-    result.addEventListener('change', onChange)
-    setValue(result.matches)
-
-    return () => result.removeEventListener('change', onChange)
-  }, [query])
-
-  return value
-}
diff --git a/apps/ui-library/lib/rehype-component.ts b/apps/ui-library/lib/rehype-component.ts
deleted file mode 100644
index adc038328e..0000000000
--- a/apps/ui-library/lib/rehype-component.ts
+++ /dev/null
@@ -1,406 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import { UnistNode, UnistTree } from 'types/unist'
-import { u } from 'unist-builder'
-import { visit } from 'unist-util-visit'
-
-import { Index } from '../__registry__'
-import { styles } from '../registry/styles'
-
-// import { parse } from 'react-docgen'
-
-// import * as reactDocgenTypescript from 'react-docgen-typescript'
-
-// import { Column, IColumnProps } from './sample-component'
-import React from 'react' // ComponentType
-
-function inspectComponentProps<T>(component: React.ComponentType<T>): void {
-  // Assert the component's props type
-  const defaultProps = (component as React.ComponentType<any>).defaultProps || {}
-
-  // console.log('Component props:')
-  // console.log('----------------')
-
-  for (const propName in defaultProps) {
-    const propType = typeof defaultProps[propName]
-    console.log(`${propName}: ${propType}`)
-  }
-}
-
-export function rehypeComponent() {
-  return async (tree: UnistTree) => {
-    visit(tree, (node: UnistNode) => {
-      // src prop overrides both name and fileName.
-      const { value: srcPath, name: componentName } =
-        (getNodeAttributeByName(node, 'src') as {
-          name: string
-          value?: string
-          type?: string
-        }) || {}
-
-      // console.log(srcPath, componentName)
-
-      // inspectComponentProps(Column)
-
-      // console.log('NEW NODE: ', node.name)
-
-      // if (node.name === 'ComponentProps') {
-      //   // Parse a file for docgen info
-      //   const options = {
-      //     // savePropValueAsString: true,
-      //   }
-
-      //   // const parser = reactDocgenTypescript.parse('./sample-component.tsx', options)
-
-      //   // console.log('PARSER', parser)
-
-      //   const code = `
-      //   /** My first component */
-      //   export default ({ name, title }: {
-      //     /** My first component */
-      //     name: string,
-      //     /** My first component */
-      //     title: string
-      //   }) => <div>{{name}}</div>;
-      //   `
-      //   // console.log('node', node)
-
-      //   const documentation = parse(code)[0]
-
-      //   // console.log('documentation', documentation)
-
-      //   // Add attributes to object
-
-      //   node.attributes?.push({
-      //     type: 'mdxJsxAttribute',
-      //     name: 'docs',
-      //     value: JSON.stringify(documentation),
-      //   })
-
-      //   // console.log('node after', node)
-
-      //   // Add random text as children
-      //   // node.children?.push({
-      //   //   type: 'text',
-      //   //   value: 'I am random text', // Generate a random UUID as text content
-      //   // })
-
-      //   // node.data = {
-      //   //   ...node.data,
-      //   //   name: 'documentation',
-      //   //   type: 'mdxJsxAttribute',
-      //   //   value: documentation,
-      //   // }
-      // }
-
-      if (node.name === 'ComponentSource') {
-        // console.log('DO NOT USE THIS COMPONENT')
-        // This component should not be in use!
-        // console.log('node', node)
-
-        const name = getNodeAttributeByName(node, 'name')?.value as string
-        const fileName = getNodeAttributeByName(node, 'fileName')?.value as string | undefined
-
-        if (!name && !srcPath) {
-          return null
-        }
-
-        try {
-          for (const style of styles) {
-            let src: string
-
-            if (srcPath) {
-              src = srcPath
-            } else {
-              const component = Index[style.name][name]
-              // console.log('got to ELSE STATEMENT')
-              // console.log('filename', fileName)
-              // console.log('name', name)
-
-              src = fileName
-                ? component.files.find((file: string) => {
-                    return file.endsWith(`${fileName}.tsx`) || file.endsWith(`${fileName}.ts`)
-                  }) || component.files[0]
-                : component.files[0]
-              // console.log('got to END of ELSE STATEMENT')
-            }
-
-            // Read the source file.
-            const filePath = path.join(process.cwd(), src)
-            let source = fs.readFileSync(filePath, 'utf8')
-
-            // Replace imports.
-            // TODO: Use @swc/core and a visitor to replace this.
-            // For now a simple regex should do.
-            // source = source.replaceAll(`@/registry/${style.name}/`, '@/components/') // COMMENT THEE OUT
-            // source = source.replaceAll('export default', 'export')
-
-            // Add code as children so that rehype can take over at build time.
-            node.children?.push(
-              u('element', {
-                tagName: 'pre',
-                properties: {
-                  __src__: src,
-                  __style__: style.name,
-                },
-                attributes: [
-                  {
-                    name: 'styleName',
-                    type: 'mdxJsxAttribute',
-                    value: style.name,
-                  },
-                ],
-                children: [
-                  u('element', {
-                    tagName: 'code',
-                    properties: {
-                      className: ['language-tsx'],
-                    },
-                    children: [
-                      {
-                        type: 'text',
-                        value: source,
-                      },
-                    ],
-                  }),
-                ],
-              })
-            )
-          }
-        } catch (error) {
-          console.error(error)
-        }
-      }
-
-      if (node.name === 'ComponentPreview') {
-        const name = getNodeAttributeByName(node, 'name')?.value as string
-
-        if (!name) {
-          return null
-        }
-
-        try {
-          for (const style of styles) {
-            const component = Index[style.name][name]
-            // console.log('GOT HERE')
-            const src = component.files[0]
-
-            // Read the source file.
-            const filePath = path.join(process.cwd(), src)
-            let source = fs.readFileSync(filePath, 'utf8')
-
-            // Replace imports.
-            // TODO: Use @swc/core and a visitor to replace this.
-            // For now a simple regex should do.
-            source = source.replaceAll(`@/registry/${style.name}/`, '@/components/')
-            source = source.replaceAll('export default', 'export')
-
-            // Add code as children so that rehype can take over at build time.
-            node.children?.push(
-              u('element', {
-                tagName: 'pre',
-                properties: {
-                  __src__: src,
-                },
-                children: [
-                  u('element', {
-                    tagName: 'code',
-                    properties: {
-                      className: ['language-tsx'],
-                    },
-                    children: [
-                      {
-                        type: 'text',
-                        value: source,
-                      },
-                    ],
-                  }),
-                ],
-              })
-            )
-          }
-        } catch (error) {
-          console.error(error)
-        }
-      }
-
-      if (node.name === 'CodeFragment') {
-        const name = getNodeAttributeByName(node, 'name')?.value as string
-
-        if (!name) {
-          return null
-        }
-
-        try {
-          for (const style of styles) {
-            const component = Index[style.name][name]
-            // console.log('GOT HERE')
-            const src = component.files[0]
-
-            // Read the source file.
-            const filePath = path.join(process.cwd(), src)
-            let source = fs.readFileSync(filePath, 'utf8')
-
-            // Replace imports.
-            // TODO: Use @swc/core and a visitor to replace this.
-            // For now a simple regex should do.
-            source = source.replaceAll(`@/registry/${style.name}/`, '@/components/')
-            source = source.replaceAll('export default', 'export')
-
-            // Add code as children so that rehype can take over at build time.
-            node.children?.push(
-              u('element', {
-                tagName: 'pre',
-                properties: {
-                  __src__: src,
-                },
-                children: [
-                  u('element', {
-                    tagName: 'code',
-                    properties: {
-                      className: ['language-tsx'],
-                    },
-                    children: [
-                      {
-                        type: 'text',
-                        value: source,
-                      },
-                    ],
-                  }),
-                ],
-              })
-            )
-          }
-        } catch (error) {
-          console.error(error)
-        }
-      }
-
-      // if (node.name === "ComponentExample") {
-      //   const source = getComponentSourceFileContent(node)
-      //   if (!source) {
-      //     return
-      //   }
-
-      //   // Replace the Example component with a pre element.
-      //   node.children?.push(
-      //     u("element", {
-      //       tagName: "pre",
-      //       properties: {
-      //         __src__: src,
-      //       },
-      //       children: [
-      //         u("element", {
-      //           tagName: "code",
-      //           properties: {
-      //             className: ["language-tsx"],
-      //           },
-      //           children: [
-      //             {
-      //               type: "text",
-      //               value: source,
-      //             },
-      //           ],
-      //         }),
-      //       ],
-      //     })
-      //   )
-
-      //   const extractClassname = getNodeAttributeByName(
-      //     node,
-      //     "extractClassname"
-      //   )
-      //   if (
-      //     extractClassname &&
-      //     typeof extractClassname.value !== "undefined" &&
-      //     extractClassname.value !== "false"
-      //   ) {
-      //     // Extract className from string
-      //     // TODO: Use @swc/core and a visitor to extract this.
-      //     // For now, a simple regex should do.
-      //     const values = source.match(/className="(.*)"/)
-      //     const className = values ? values[1] : ""
-
-      //     // Add the className as a jsx prop so we can pass it to the copy button.
-      //     node.attributes?.push({
-      //       name: "extractedClassNames",
-      //       type: "mdxJsxAttribute",
-      //       value: className,
-      //     })
-
-      //     // Add a pre element with the className only.
-      //     node.children?.push(
-      //       u("element", {
-      //         tagName: "pre",
-      //         properties: {},
-      //         children: [
-      //           u("element", {
-      //             tagName: "code",
-      //             properties: {
-      //               className: ["language-tsx"],
-      //             },
-      //             children: [
-      //               {
-      //                 type: "text",
-      //                 value: className,
-      //               },
-      //             ],
-      //           }),
-      //         ],
-      //       })
-      //     )
-      //   }
-      // }
-
-      // if (node.name === "ComponentSource") {
-      //   const source = getComponentSourceFileContent(node)
-      //   if (!source) {
-      //     return
-      //   }
-
-      //   // Replace the Source component with a pre element.
-      //   node.children?.push(
-      //     u("element", {
-      //       tagName: "pre",
-      //       properties: {
-      //         __src__: src,
-      //       },
-      //       children: [
-      //         u("element", {
-      //           tagName: "code",
-      //           properties: {
-      //             className: ["language-tsx"],
-      //           },
-      //           children: [
-      //             {
-      //               type: "text",
-      //               value: source,
-      //             },
-      //           ],
-      //         }),
-      //       ],
-      //     })
-      //   )
-      // }
-    })
-  }
-}
-
-function getNodeAttributeByName(node: UnistNode, name: string) {
-  return node.attributes?.find((attribute) => attribute.name === name)
-}
-
-function getComponentSourceFileContent(node: UnistNode) {
-  const src = getNodeAttributeByName(node, 'src')?.value as string
-
-  if (!src) {
-    return null
-  }
-
-  // Read the source file.
-  const filePath = path.join(process.cwd(), src)
-  console.log('filePath', filePath)
-  const source = fs.readFileSync(filePath, 'utf8')
-
-  return source
-}
diff --git a/apps/ui-library/lib/rehype-npm-command.ts b/apps/ui-library/lib/rehype-npm-command.ts
deleted file mode 100644
index aaa3792922..0000000000
--- a/apps/ui-library/lib/rehype-npm-command.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { UnistNode, UnistTree } from 'types/unist'
-import { visit } from 'unist-util-visit'
-
-export function rehypeNpmCommand() {
-  return (tree: UnistTree) => {
-    visit(tree, (node: UnistNode) => {
-      if (node.type !== 'element' || node?.tagName !== 'pre') {
-        return
-      }
-
-      // npm install.
-      if (node.properties?.['__rawString__']?.startsWith('npm install')) {
-        const npmCommand = node.properties?.['__rawString__']
-        node.properties['__npmCommand__'] = npmCommand
-        node.properties['__yarnCommand__'] = npmCommand.replace('npm install', 'yarn add')
-        node.properties['__pnpmCommand__'] = npmCommand.replace('npm install', 'pnpm add')
-        node.properties['__bunCommand__'] = npmCommand.replace('npm install', 'bun add')
-      }
-
-      // npx create.
-      if (node.properties?.['__rawString__']?.startsWith('npx create-')) {
-        const npmCommand = node.properties?.['__rawString__']
-        node.properties['__npmCommand__'] = npmCommand
-        node.properties['__yarnCommand__'] = npmCommand.replace('npx create-', 'yarn create ')
-        node.properties['__pnpmCommand__'] = npmCommand.replace('npx create-', 'pnpm create ')
-        node.properties['__bunCommand__'] = npmCommand.replace('npx', 'bunx --bun')
-      }
-
-      // npx.
-      if (
-        node.properties?.['__rawString__']?.startsWith('npx') &&
-        !node.properties?.['__rawString__']?.startsWith('npx create-')
-      ) {
-        const npmCommand = node.properties?.['__rawString__']
-        node.properties['__npmCommand__'] = npmCommand
-        node.properties['__yarnCommand__'] = npmCommand
-        node.properties['__pnpmCommand__'] = npmCommand.replace('npx', 'pnpm dlx')
-        node.properties['__bunCommand__'] = npmCommand.replace('npx', 'bunx --bun')
-      }
-    })
-  }
-}
diff --git a/apps/ui-library/lib/sample-component.tsx b/apps/ui-library/lib/sample-component.tsx
deleted file mode 100644
index 7f12bfb241..0000000000
--- a/apps/ui-library/lib/sample-component.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react'
-import { Component } from 'react'
-
-/**
- * Column properties.
- */
-export interface IColumnProps {
-  /** prop1 description */
-  prop1?: string
-  /** prop2 description */
-  prop2: number
-  /**
-   * prop3 description
-   */
-  prop3: () => void
-  /** prop4 description */
-  prop4: 'option1' | 'option2' | 'option3'
-}
-
-/**
- * Form column.
- */
-export class Column extends Component<IColumnProps, {}> {
-  render() {
-    return <div>Test</div>
-  }
-}
diff --git a/apps/ui-library/lib/utils.ts b/apps/ui-library/lib/utils.ts
index 74c32aaec2..6edcf90fba 100644
--- a/apps/ui-library/lib/utils.ts
+++ b/apps/ui-library/lib/utils.ts
@@ -2,15 +2,6 @@ import { cn as uiCN } from 'ui'
 
 export const cn = uiCN
 
-export function formatDate(input: string | number): string {
-  const date = new Date(input)
-  return date.toLocaleDateString('en-US', {
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric',
-  })
-}
-
 export function absoluteUrl(path: string) {
   return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
 }
diff --git a/apps/ui-library/package.json b/apps/ui-library/package.json
index c153d40143..00a3f742a9 100644
--- a/apps/ui-library/package.json
+++ b/apps/ui-library/package.json
@@ -70,7 +70,6 @@
     "react-docgen": "^7.0.3",
     "react-dom": "catalog:",
     "react-hook-form": "^7.45.0",
-    "react-inlinesvg": "^4.0.4",
     "react-markdown": "^10.1.0",
     "react-wrap-balancer": "^1.1.0",
     "recharts": "^2.8.0",
@@ -111,7 +110,6 @@
     "tsconfig": "workspace:*",
     "tsx": "^4.19.3",
     "typescript": "~5.5.0",
-    "unist-builder": "3.0.0",
     "vite": "catalog:"
   }
 }
diff --git a/apps/ui-library/scripts/build-registry.mts b/apps/ui-library/scripts/build-registry.mts
index e74dafaeeb..5dc0fee41c 100644
--- a/apps/ui-library/scripts/build-registry.mts
+++ b/apps/ui-library/scripts/build-registry.mts
@@ -19,30 +19,24 @@ fs.writeFileSync(registryPath, JSON.stringify(cleanedRegistry, null, 2))
 // Create a registry index file for use by ComponentPreview in the app.
 const registryIndex = `
 // @ts-nocheck
-// This file is autogenerated by scripts/build-registry.ts
+// This file is autogenerated by scripts/build-registry.mts
 // Do not edit this file directly.
 import * as React from "react"
 
-export const Index: Record<string, any> = {
+export const Index = {
   "default": {
-    ${registry.items.map((item) => {
-      const componentFile = item.files.find((file) => file.path.endsWith('.tsx'))
+    ${registry.items
+      .filter((item) => item.type === 'registry:example')
+      .map((item) => {
+        const componentFile = item.files.find((file) => file.path.endsWith('.tsx'))
 
-      return `
+        return `
     "${item.name}": {
-      name: "${item.name}",
-      type: "${item.type}",
-      registryDependencies: [${item.registryDependencies.map((dep) => `"${dep}"`).join(',')}],
-      ${componentFile ? `component: React.lazy(() => import("@/${componentFile.path}")),` : ''}
-      source: "",
-      files: [${item.files?.map((file) => `"${file.path}"`).join(',')}],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
+      component: ${componentFile ? `React.lazy(() => import("@/${componentFile.path}"))` : 'null'},
     }
     `
-    })}
+      })}
   },
-}
+} as const
 `
 fs.writeFileSync(`__registry__/index.tsx`, registryIndex)
diff --git a/apps/ui-library/types/unist.ts b/apps/ui-library/types/unist.ts
deleted file mode 100644
index 76d6710e8f..0000000000
--- a/apps/ui-library/types/unist.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Node } from 'unist-builder'
-
-export interface UnistNode extends Node {
-  type: string
-  name?: string
-  tagName?: string
-  value?: string
-  properties?: {
-    __rawString__?: string
-    __className__?: string
-    __event__?: string
-    [key: string]: unknown
-  } & NpmCommands
-  attributes?: {
-    name: string
-    value: unknown
-    type?: string
-  }[]
-  children?: UnistNode[]
-}
-
-export interface UnistTree extends Node {
-  children: UnistNode[]
-}
-
-export interface NpmCommands {
-  __npmCommand__?: string
-  __yarnCommand__?: string
-  __pnpmCommand__?: string
-  __bunCommand__?: string
-}
diff --git a/knip.jsonc b/knip.jsonc
index 6e21bfaf29..32c1d9dd9f 100644
--- a/knip.jsonc
+++ b/knip.jsonc
@@ -11,5 +11,8 @@
     "apps/studio/public/**",
     // ignore studio components, they're dynamically imported
     "apps/studio/components/interfaces/Connect/content/**",
+    // ignore registry blocks in ui-library
+    "apps/ui-library/registry/default/**",
+    "apps/ui-library/contentlayer.config.js",
   ],
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 290ca0b20a..30bc57a9c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1387,9 +1387,6 @@ importers:
       react-hook-form:
         specifier: ^7.45.0
         version: 7.47.0(react@18.3.1)
-      react-inlinesvg:
-        specifier: ^4.0.4
-        version: 4.0.4(react@18.3.1)
       react-markdown:
         specifier: ^10.1.0
         version: 10.1.0(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
@@ -1505,9 +1502,6 @@ importers:
       typescript:
         specifier: ~5.5.0
         version: 5.5.2
-      unist-builder:
-        specifier: 3.0.0
-        version: 3.0.0
       vite:
         specifier: 'catalog:'
         version: 6.3.5(@types/node@22.13.14)(jiti@2.4.2)(sass@1.77.4)(terser@5.39.0)(tsx@4.19.3)(yaml@2.4.5)