diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
index 7fcfda380b..4996505a07 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -1,9 +1,269 @@
+// @ts-nocheck
 // This file is autogenerated by scripts/build-registry.ts
 // Do not edit this file directly.
 import * as React from "react"
 
 export const Index: Record<string, any> = {
   "default": {
+    "accordion": {
+      name: "accordion",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/accordion")),
+      files: ["registry/default/ui/accordion.tsx"],
+    },
+    "alert": {
+      name: "alert",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/alert")),
+      files: ["registry/default/ui/alert.tsx"],
+    },
+    "alert-dialog": {
+      name: "alert-dialog",
+      type: "components:ui",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/ui/alert-dialog")),
+      files: ["registry/default/ui/alert-dialog.tsx"],
+    },
+    "aspect-ratio": {
+      name: "aspect-ratio",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/aspect-ratio")),
+      files: ["registry/default/ui/aspect-ratio.tsx"],
+    },
+    "avatar": {
+      name: "avatar",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/avatar")),
+      files: ["registry/default/ui/avatar.tsx"],
+    },
+    "badge": {
+      name: "badge",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/badge")),
+      files: ["registry/default/ui/badge.tsx"],
+    },
+    "button": {
+      name: "button",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/button")),
+      files: ["registry/default/ui/button.tsx"],
+    },
+    "calendar": {
+      name: "calendar",
+      type: "components:ui",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/ui/calendar")),
+      files: ["registry/default/ui/calendar.tsx"],
+    },
+    "card": {
+      name: "card",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/card")),
+      files: ["registry/default/ui/card.tsx"],
+    },
+    "checkbox": {
+      name: "checkbox",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/checkbox")),
+      files: ["registry/default/ui/checkbox.tsx"],
+    },
+    "collapsible": {
+      name: "collapsible",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/collapsible")),
+      files: ["registry/default/ui/collapsible.tsx"],
+    },
+    "command": {
+      name: "command",
+      type: "components:ui",
+      registryDependencies: ["dialog"],
+      component: React.lazy(() => import("@/registry/default/ui/command")),
+      files: ["registry/default/ui/command.tsx"],
+    },
+    "context-menu": {
+      name: "context-menu",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/context-menu")),
+      files: ["registry/default/ui/context-menu.tsx"],
+    },
+    "dialog": {
+      name: "dialog",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/dialog")),
+      files: ["registry/default/ui/dialog.tsx"],
+    },
+    "dropdown-menu": {
+      name: "dropdown-menu",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/dropdown-menu")),
+      files: ["registry/default/ui/dropdown-menu.tsx"],
+    },
+    "form": {
+      name: "form",
+      type: "components:ui",
+      registryDependencies: ["button","label"],
+      component: React.lazy(() => import("@/registry/default/ui/form")),
+      files: ["registry/default/ui/form.tsx"],
+    },
+    "hover-card": {
+      name: "hover-card",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/hover-card")),
+      files: ["registry/default/ui/hover-card.tsx"],
+    },
+    "input": {
+      name: "input",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/input")),
+      files: ["registry/default/ui/input.tsx"],
+    },
+    "label": {
+      name: "label",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/label")),
+      files: ["registry/default/ui/label.tsx"],
+    },
+    "menubar": {
+      name: "menubar",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/menubar")),
+      files: ["registry/default/ui/menubar.tsx"],
+    },
+    "navigation-menu": {
+      name: "navigation-menu",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/navigation-menu")),
+      files: ["registry/default/ui/navigation-menu.tsx"],
+    },
+    "popover": {
+      name: "popover",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/popover")),
+      files: ["registry/default/ui/popover.tsx"],
+    },
+    "progress": {
+      name: "progress",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/progress")),
+      files: ["registry/default/ui/progress.tsx"],
+    },
+    "radio-group": {
+      name: "radio-group",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/radio-group")),
+      files: ["registry/default/ui/radio-group.tsx"],
+    },
+    "scroll-area": {
+      name: "scroll-area",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/scroll-area")),
+      files: ["registry/default/ui/scroll-area.tsx"],
+    },
+    "select": {
+      name: "select",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/select")),
+      files: ["registry/default/ui/select.tsx"],
+    },
+    "separator": {
+      name: "separator",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/separator")),
+      files: ["registry/default/ui/separator.tsx"],
+    },
+    "sheet": {
+      name: "sheet",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/sheet")),
+      files: ["registry/default/ui/sheet.tsx"],
+    },
+    "skeleton": {
+      name: "skeleton",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/skeleton")),
+      files: ["registry/default/ui/skeleton.tsx"],
+    },
+    "slider": {
+      name: "slider",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/slider")),
+      files: ["registry/default/ui/slider.tsx"],
+    },
+    "switch": {
+      name: "switch",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/switch")),
+      files: ["registry/default/ui/switch.tsx"],
+    },
+    "table": {
+      name: "table",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/table")),
+      files: ["registry/default/ui/table.tsx"],
+    },
+    "tabs": {
+      name: "tabs",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/tabs")),
+      files: ["registry/default/ui/tabs.tsx"],
+    },
+    "textarea": {
+      name: "textarea",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/textarea")),
+      files: ["registry/default/ui/textarea.tsx"],
+    },
+    "toast": {
+      name: "toast",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/toast")),
+      files: ["registry/default/ui/toast.tsx","registry/default/ui/use-toast.ts","registry/default/ui/toaster.tsx"],
+    },
+    "toggle": {
+      name: "toggle",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/toggle")),
+      files: ["registry/default/ui/toggle.tsx"],
+    },
+    "tooltip": {
+      name: "tooltip",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/tooltip")),
+      files: ["registry/default/ui/tooltip.tsx"],
+    },
     "accordion-demo": {
       name: "accordion-demo",
       type: "components:example",
@@ -747,6 +1007,265 @@ export const Index: Record<string, any> = {
       files: ["registry/default/example/mode-toggle.tsx"],
     },
   },  "new-york": {
+    "accordion": {
+      name: "accordion",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/accordion")),
+      files: ["registry/new-york/ui/accordion.tsx"],
+    },
+    "alert": {
+      name: "alert",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/alert")),
+      files: ["registry/new-york/ui/alert.tsx"],
+    },
+    "alert-dialog": {
+      name: "alert-dialog",
+      type: "components:ui",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/new-york/ui/alert-dialog")),
+      files: ["registry/new-york/ui/alert-dialog.tsx"],
+    },
+    "aspect-ratio": {
+      name: "aspect-ratio",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/aspect-ratio")),
+      files: ["registry/new-york/ui/aspect-ratio.tsx"],
+    },
+    "avatar": {
+      name: "avatar",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/avatar")),
+      files: ["registry/new-york/ui/avatar.tsx"],
+    },
+    "badge": {
+      name: "badge",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/badge")),
+      files: ["registry/new-york/ui/badge.tsx"],
+    },
+    "button": {
+      name: "button",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/button")),
+      files: ["registry/new-york/ui/button.tsx"],
+    },
+    "calendar": {
+      name: "calendar",
+      type: "components:ui",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/new-york/ui/calendar")),
+      files: ["registry/new-york/ui/calendar.tsx"],
+    },
+    "card": {
+      name: "card",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/card")),
+      files: ["registry/new-york/ui/card.tsx"],
+    },
+    "checkbox": {
+      name: "checkbox",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/checkbox")),
+      files: ["registry/new-york/ui/checkbox.tsx"],
+    },
+    "collapsible": {
+      name: "collapsible",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/collapsible")),
+      files: ["registry/new-york/ui/collapsible.tsx"],
+    },
+    "command": {
+      name: "command",
+      type: "components:ui",
+      registryDependencies: ["dialog"],
+      component: React.lazy(() => import("@/registry/new-york/ui/command")),
+      files: ["registry/new-york/ui/command.tsx"],
+    },
+    "context-menu": {
+      name: "context-menu",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/context-menu")),
+      files: ["registry/new-york/ui/context-menu.tsx"],
+    },
+    "dialog": {
+      name: "dialog",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/dialog")),
+      files: ["registry/new-york/ui/dialog.tsx"],
+    },
+    "dropdown-menu": {
+      name: "dropdown-menu",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/dropdown-menu")),
+      files: ["registry/new-york/ui/dropdown-menu.tsx"],
+    },
+    "form": {
+      name: "form",
+      type: "components:ui",
+      registryDependencies: ["button","label"],
+      component: React.lazy(() => import("@/registry/new-york/ui/form")),
+      files: ["registry/new-york/ui/form.tsx"],
+    },
+    "hover-card": {
+      name: "hover-card",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/hover-card")),
+      files: ["registry/new-york/ui/hover-card.tsx"],
+    },
+    "input": {
+      name: "input",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/input")),
+      files: ["registry/new-york/ui/input.tsx"],
+    },
+    "label": {
+      name: "label",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/label")),
+      files: ["registry/new-york/ui/label.tsx"],
+    },
+    "menubar": {
+      name: "menubar",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/menubar")),
+      files: ["registry/new-york/ui/menubar.tsx"],
+    },
+    "navigation-menu": {
+      name: "navigation-menu",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/navigation-menu")),
+      files: ["registry/new-york/ui/navigation-menu.tsx"],
+    },
+    "popover": {
+      name: "popover",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/popover")),
+      files: ["registry/new-york/ui/popover.tsx"],
+    },
+    "progress": {
+      name: "progress",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/progress")),
+      files: ["registry/new-york/ui/progress.tsx"],
+    },
+    "radio-group": {
+      name: "radio-group",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/radio-group")),
+      files: ["registry/new-york/ui/radio-group.tsx"],
+    },
+    "scroll-area": {
+      name: "scroll-area",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/scroll-area")),
+      files: ["registry/new-york/ui/scroll-area.tsx"],
+    },
+    "select": {
+      name: "select",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/select")),
+      files: ["registry/new-york/ui/select.tsx"],
+    },
+    "separator": {
+      name: "separator",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/separator")),
+      files: ["registry/new-york/ui/separator.tsx"],
+    },
+    "sheet": {
+      name: "sheet",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/sheet")),
+      files: ["registry/new-york/ui/sheet.tsx"],
+    },
+    "skeleton": {
+      name: "skeleton",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/skeleton")),
+      files: ["registry/new-york/ui/skeleton.tsx"],
+    },
+    "slider": {
+      name: "slider",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/slider")),
+      files: ["registry/new-york/ui/slider.tsx"],
+    },
+    "switch": {
+      name: "switch",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/switch")),
+      files: ["registry/new-york/ui/switch.tsx"],
+    },
+    "table": {
+      name: "table",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/table")),
+      files: ["registry/new-york/ui/table.tsx"],
+    },
+    "tabs": {
+      name: "tabs",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/tabs")),
+      files: ["registry/new-york/ui/tabs.tsx"],
+    },
+    "textarea": {
+      name: "textarea",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/textarea")),
+      files: ["registry/new-york/ui/textarea.tsx"],
+    },
+    "toast": {
+      name: "toast",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/toast")),
+      files: ["registry/new-york/ui/toast.tsx","registry/new-york/ui/use-toast.ts","registry/new-york/ui/toaster.tsx"],
+    },
+    "toggle": {
+      name: "toggle",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/toggle")),
+      files: ["registry/new-york/ui/toggle.tsx"],
+    },
+    "tooltip": {
+      name: "tooltip",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/tooltip")),
+      files: ["registry/new-york/ui/tooltip.tsx"],
+    },
     "accordion-demo": {
       name: "accordion-demo",
       type: "components:example",
diff --git a/apps/www/components/code-block-wrapper.tsx b/apps/www/components/code-block-wrapper.tsx
index bb5fd27f11..1f961adf3c 100644
--- a/apps/www/components/code-block-wrapper.tsx
+++ b/apps/www/components/code-block-wrapper.tsx
@@ -40,7 +40,7 @@ export function CodeBlockWrapper({
         </CollapsibleContent>
         <div
           className={cn(
-            "absolute flex items-center justify-center bg-gradient-to-b from-background/30 to-muted/90 p-2",
+            "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"
           )}
         >
diff --git a/apps/www/components/component-source.tsx b/apps/www/components/component-source.tsx
index 70d4bb13af..31150384c0 100644
--- a/apps/www/components/component-source.tsx
+++ b/apps/www/components/component-source.tsx
@@ -9,7 +9,11 @@ interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
   src: string
 }
 
-export function ComponentSource({ children, className }: ComponentSourceProps) {
+export function ComponentSource({
+  children,
+  className,
+  ...props
+}: ComponentSourceProps) {
   return (
     <CodeBlockWrapper
       expandButtonTitle="Expand"
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index 9344a329e8..3cbae0a1e2 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -7,12 +7,14 @@ import { NpmCommands } from "types/unist"
 
 import { Event } from "@/lib/events"
 import { cn } from "@/lib/utils"
+import { useConfig } from "@/hooks/use-config"
 import { Callout } from "@/components/callout"
 import { CodeBlockWrapper } from "@/components/code-block-wrapper"
 import { ComponentExample } from "@/components/component-example"
 import { ComponentPreview } from "@/components/component-preview"
 import { ComponentSource } from "@/components/component-source"
 import { CopyButton, CopyNpmCommandButton } from "@/components/copy-button"
+import { StyleWrapper } from "@/components/style-wrapper"
 import {
   Accordion,
   AccordionContent,
@@ -25,6 +27,13 @@ import {
   AlertTitle,
 } from "@/registry/new-york/ui/alert"
 import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/ui/tabs"
+import { Style } from "@/registry/styles"
 
 const components = {
   Accordion,
@@ -164,15 +173,17 @@ const components = {
     __withMeta__,
     __src__,
     __event__,
+    __style__,
     ...props
   }: React.HTMLAttributes<HTMLPreElement> & {
+    __style__?: Style["name"]
     __rawString__?: string
     __withMeta__?: boolean
     __src__?: string
     __event__?: Event["name"]
   } & NpmCommands) => {
     return (
-      <>
+      <StyleWrapper styleName={__style__}>
         <pre
           className={cn(
             "mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900",
@@ -198,7 +209,7 @@ const components = {
             className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
           />
         )}
-      </>
+      </StyleWrapper>
     )
   },
   code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
@@ -219,12 +230,60 @@ const components = {
   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 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-normal",
+        className
+      )}
+      {...props}
+    />
+  ),
 }
 
 interface MdxProps {
@@ -232,7 +291,10 @@ interface MdxProps {
 }
 
 export function Mdx({ code }: MdxProps) {
-  const Component = useMDXComponent(code)
+  const [config] = useConfig()
+  const Component = useMDXComponent(code, {
+    style: config.style,
+  })
 
   return (
     <div className="mdx">
diff --git a/apps/www/components/style-wrapper.tsx b/apps/www/components/style-wrapper.tsx
new file mode 100644
index 0000000000..c53352fffb
--- /dev/null
+++ b/apps/www/components/style-wrapper.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+
+import { useConfig } from "@/hooks/use-config"
+import { Style } from "@/registry/styles"
+
+interface StyleWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+  styleName?: Style["name"]
+}
+
+export function StyleWrapper({ styleName, children }: StyleWrapperProps) {
+  const [config] = useConfig()
+
+  if (!styleName || config.style === styleName) {
+    return <>{children}</>
+  }
+
+  return null
+}
diff --git a/apps/www/content/docs/components/accordion.mdx b/apps/www/content/docs/components/accordion.mdx
index 5f7bf9ed07..3542dfbe5a 100644
--- a/apps/www/content/docs/components/accordion.mdx
+++ b/apps/www/content/docs/components/accordion.mdx
@@ -14,15 +14,24 @@ radix:
 
 ## Installation
 
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
 <Steps>
 
-### Command
+<Step>Run the following command:</Step>
 
 ```bash
 npx shadcn-ui@latest add accordion
 ```
 
-### tailwind.config.js
+<Step>Update `tailwind.config.js`</Step>
 
 Add the following animations to your `tailwind.config.js` file:
 
@@ -50,7 +59,55 @@ module.exports = {
 }
 ```
 
-### Usage
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="accordion" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-18}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -71,5 +128,3 @@ import {
   </AccordionItem>
 </Accordion>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/alert-dialog.mdx b/apps/www/content/docs/components/alert-dialog.mdx
index 0467c2fea3..eb191ff687 100644
--- a/apps/www/content/docs/components/alert-dialog.mdx
+++ b/apps/www/content/docs/components/alert-dialog.mdx
@@ -12,15 +12,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add alert-dialog
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="alert-dialog" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -54,5 +76,3 @@ import {
   </AlertDialogContent>
 </AlertDialog>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/alert.mdx b/apps/www/content/docs/components/alert.mdx
index 8356aad070..e3e55effc8 100644
--- a/apps/www/content/docs/components/alert.mdx
+++ b/apps/www/content/docs/components/alert.mdx
@@ -8,15 +8,37 @@ component: true
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add alert
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="alert" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
@@ -32,8 +54,6 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 </Alert>
 ```
 
-</Steps>
-
 ## Examples
 
 ### Default
diff --git a/apps/www/content/docs/components/aspect-ratio.mdx b/apps/www/content/docs/components/aspect-ratio.mdx
index 6d14e24450..773238adfc 100644
--- a/apps/www/content/docs/components/aspect-ratio.mdx
+++ b/apps/www/content/docs/components/aspect-ratio.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add aspect-ratio
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="aspect-ratio" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import Image from "next/image"
@@ -38,5 +60,3 @@ import { AspectRatio } from "@/components/ui/aspect-ratio"
   </AspectRatio>
 </div>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
index aed1c49ec4..5eec3019c1 100644
--- a/apps/www/content/docs/components/avatar.mdx
+++ b/apps/www/content/docs/components/avatar.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add avatar
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="avatar" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
@@ -31,5 +53,3 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
   <AvatarFallback>CN</AvatarFallback>
 </Avatar>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx
index 5129f94ef2..1786bdd672 100644
--- a/apps/www/content/docs/components/badge.mdx
+++ b/apps/www/content/docs/components/badge.mdx
@@ -8,15 +8,37 @@ component: true
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add badge
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="badge" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Badge } from "@/components/ui/badge"
@@ -26,8 +48,6 @@ import { Badge } from "@/components/ui/badge"
 <Badge variant="outline">Badge</Badge>
 ```
 
-</Steps>
-
 ### Link
 
 You can use the `badgeVariants` helper to create a link that looks like a badge.
diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx
index 48f1d08131..d61ac4c168 100644
--- a/apps/www/content/docs/components/button.mdx
+++ b/apps/www/content/docs/components/button.mdx
@@ -9,15 +9,37 @@ component: true
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add button
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="button" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Button } from "@/components/ui/button"
@@ -27,9 +49,7 @@ import { Button } from "@/components/ui/button"
 <Button variant="outline">Button</Button>
 ```
 
-</Steps>
-
-### Link
+## Link
 
 You can use the `buttonVariants` helper to create a link that looks like a button.
 
diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx
index fec63d710b..146c5caab9 100644
--- a/apps/www/content/docs/components/calendar.mdx
+++ b/apps/www/content/docs/components/calendar.mdx
@@ -12,15 +12,37 @@ The `Calendar` component is built on top of [React DayPicker](https://react-day-
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add calendar
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="calendar" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Calendar } from "@/components/ui/calendar"
@@ -41,8 +63,6 @@ return (
 
 See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
 
-</Steps>
-
 ## Date Picker
 
 You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.
diff --git a/apps/www/content/docs/components/card.mdx b/apps/www/content/docs/components/card.mdx
index eda4d05abe..d4c1309e0d 100644
--- a/apps/www/content/docs/components/card.mdx
+++ b/apps/www/content/docs/components/card.mdx
@@ -4,19 +4,41 @@ description: Displays a card with header, content, and footer.
 component: true
 ---
 
-<ComponentPreview name="card-demo" />
+<ComponentPreview name="card-with-form" />
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add card
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="card" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -44,8 +66,6 @@ import {
 </Card>
 ```
 
-</Steps>
-
 ## Examples
 
-<ComponentPreview name="card-with-form" />
+<ComponentPreview name="card-demo" />
diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx
index 163fcdeea5..da8f30a75f 100644
--- a/apps/www/content/docs/components/checkbox.mdx
+++ b/apps/www/content/docs/components/checkbox.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add checkbox
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="checkbox" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Checkbox } from "@/components/ui/checkbox"
@@ -29,8 +51,6 @@ import { Checkbox } from "@/components/ui/checkbox"
 <Checkbox />
 ```
 
-</Steps>
-
 ## Examples
 
 ### With text
@@ -39,7 +59,7 @@ import { Checkbox } from "@/components/ui/checkbox"
 
 ### Disabled
 
-<ComponentPreview name="checkbox-with-disabled" />
+<ComponentPreview name="checkbox-disabled" />
 
 ### Form
 
diff --git a/apps/www/content/docs/components/collapsible.mdx b/apps/www/content/docs/components/collapsible.mdx
index 25806632bc..2e9ce76e81 100644
--- a/apps/www/content/docs/components/collapsible.mdx
+++ b/apps/www/content/docs/components/collapsible.mdx
@@ -12,15 +12,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add collapsible
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="collapsible" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -39,5 +61,3 @@ import {
   </CollapsibleContent>
 </Collapsible>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/combobox.mdx b/apps/www/content/docs/components/combobox.mdx
index 5f727cf0ca..7f8b537f21 100644
--- a/apps/www/content/docs/components/combobox.mdx
+++ b/apps/www/content/docs/components/combobox.mdx
@@ -8,13 +8,11 @@ component: true
 
 ## Installation
 
-<Steps>
+The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
 
-### About
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
 
-The Combobox is built using a composition of the `<Popover />` and the `<Command />` components. See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
-
-### Usage
+## Usage
 
 ```tsx
 "use client"
@@ -109,8 +107,6 @@ export function ComboboxDemo() {
 }
 ```
 
-</Steps>
-
 ## Examples
 
 ### Combobox
diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
index 83a491f6d9..6ca274186b 100644
--- a/apps/www/content/docs/components/command.mdx
+++ b/apps/www/content/docs/components/command.mdx
@@ -16,15 +16,37 @@ The `<Command />` component uses the [`cmdk`](https://cmdk.paco.me) component by
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add command
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="command" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -59,10 +81,6 @@ import {
 </Command>
 ```
 
-</Steps>
-
----
-
 ## Examples
 
 ### Dialog
diff --git a/apps/www/content/docs/components/context-menu.mdx b/apps/www/content/docs/components/context-menu.mdx
index cfcb18e373..ef2bb995f6 100644
--- a/apps/www/content/docs/components/context-menu.mdx
+++ b/apps/www/content/docs/components/context-menu.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add context-menu
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="context-menu" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -41,5 +63,3 @@ import {
   </ContextMenuContent>
 </ContextMenu>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/date-picker.mdx b/apps/www/content/docs/components/date-picker.mdx
index 2ff8f6c241..040dbf8959 100644
--- a/apps/www/content/docs/components/date-picker.mdx
+++ b/apps/www/content/docs/components/date-picker.mdx
@@ -8,11 +8,9 @@ component: true
 
 ## Installation
 
-<Steps>
+The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
 
-### About
-
-The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components. See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
 
 ## Usage
 
@@ -64,8 +62,6 @@ export function DatePickerDemo() {
 
 See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
 
-</Steps>
-
 ## Examples
 
 ### Date Picker
diff --git a/apps/www/content/docs/components/dialog.mdx b/apps/www/content/docs/components/dialog.mdx
index d4c5b97e12..1f35039431 100644
--- a/apps/www/content/docs/components/dialog.mdx
+++ b/apps/www/content/docs/components/dialog.mdx
@@ -12,15 +12,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add dialog
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="dialog" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -48,10 +70,6 @@ import {
 </Dialog>
 ```
 
-</Steps>
-
----
-
 ## Notes
 
 To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or
diff --git a/apps/www/content/docs/components/dropdown-menu.mdx b/apps/www/content/docs/components/dropdown-menu.mdx
index b6f59bef78..ff8730d196 100644
--- a/apps/www/content/docs/components/dropdown-menu.mdx
+++ b/apps/www/content/docs/components/dropdown-menu.mdx
@@ -12,15 +12,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add dropdown-menu
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="dropdown-menu" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -47,10 +69,6 @@ import {
 </DropdownMenu>
 ```
 
-</Steps>
-
----
-
 ## Examples
 
 ### Checkboxes
diff --git a/apps/www/content/docs/components/hover-card.mdx b/apps/www/content/docs/components/hover-card.mdx
index ae7d23063b..0273ec8bf7 100644
--- a/apps/www/content/docs/components/hover-card.mdx
+++ b/apps/www/content/docs/components/hover-card.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add hover-card
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="hover-card" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -37,5 +59,3 @@ import {
   </HoverCardContent>
 </HoverCard>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/input.mdx b/apps/www/content/docs/components/input.mdx
index 2e22bd8fc6..af4bdfbaef 100644
--- a/apps/www/content/docs/components/input.mdx
+++ b/apps/www/content/docs/components/input.mdx
@@ -8,15 +8,37 @@ component: true
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add input
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="input" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Input } from "@/components/ui/input"
@@ -26,10 +48,6 @@ import { Input } from "@/components/ui/input"
 <Input />
 ```
 
-</Steps>
-
----
-
 ## Examples
 
 ### Default
diff --git a/apps/www/content/docs/components/label.mdx b/apps/www/content/docs/components/label.mdx
index 477f84ca75..c95d9c779f 100644
--- a/apps/www/content/docs/components/label.mdx
+++ b/apps/www/content/docs/components/label.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add label
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="label" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Label } from "@/components/ui/label"
@@ -28,5 +50,3 @@ import { Label } from "@/components/ui/label"
 ```tsx
 <Label htmlFor="email">Your email address</Label>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/menubar.mdx b/apps/www/content/docs/components/menubar.mdx
index d8a0fa7cc7..a7625d4a40 100644
--- a/apps/www/content/docs/components/menubar.mdx
+++ b/apps/www/content/docs/components/menubar.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add menubar
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="menubar" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -50,5 +72,3 @@ import {
   </MenubarMenu>
 </Menubar>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/navigation-menu.mdx b/apps/www/content/docs/components/navigation-menu.mdx
index 6760035a8e..f801077fd6 100644
--- a/apps/www/content/docs/components/navigation-menu.mdx
+++ b/apps/www/content/docs/components/navigation-menu.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add navigation-menu
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="navigation-menu" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -47,8 +69,6 @@ import {
 </NavigationMenu>
 ```
 
-</Steps>
-
 ## Examples
 
 ### Link Component
diff --git a/apps/www/content/docs/components/popover.mdx b/apps/www/content/docs/components/popover.mdx
index 816f46d3ef..26cb2649a2 100644
--- a/apps/www/content/docs/components/popover.mdx
+++ b/apps/www/content/docs/components/popover.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add popover
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="popover" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -35,5 +57,3 @@ import {
   <PopoverContent>Place content for the popover here.</PopoverContent>
 </Popover>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/progress.mdx b/apps/www/content/docs/components/progress.mdx
index 7a129a546d..f362f0b811 100644
--- a/apps/www/content/docs/components/progress.mdx
+++ b/apps/www/content/docs/components/progress.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add progress
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="progress" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Progress } from "@/components/ui/progress"
@@ -28,5 +50,3 @@ import { Progress } from "@/components/ui/progress"
 ```tsx
 <Progress value={33} />
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/radio-group.mdx b/apps/www/content/docs/components/radio-group.mdx
index 8ae1da9650..ba1530f4c1 100644
--- a/apps/www/content/docs/components/radio-group.mdx
+++ b/apps/www/content/docs/components/radio-group.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add radio-group
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="radio-group" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Label } from "@/components/ui/label"
@@ -39,8 +61,6 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 </RadioGroup>
 ```
 
-</Steps>
-
 ## Examples
 
 ### Form
diff --git a/apps/www/content/docs/components/scroll-area.mdx b/apps/www/content/docs/components/scroll-area.mdx
index 02951eeeff..5120e9e66b 100644
--- a/apps/www/content/docs/components/scroll-area.mdx
+++ b/apps/www/content/docs/components/scroll-area.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add scroll-area
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="scroll-area" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { ScrollArea } from "@/components/ui/scroll-area"
@@ -35,5 +57,3 @@ import { ScrollArea } from "@/components/ui/scroll-area"
   started laughing, they couldn't stop.
 </ScrollArea>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx
index bc8433890c..2ada78957d 100644
--- a/apps/www/content/docs/components/select.mdx
+++ b/apps/www/content/docs/components/select.mdx
@@ -12,15 +12,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add select
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="select" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -45,10 +67,6 @@ import {
 </Select>
 ```
 
-</Steps>
-
----
-
 ## Examples
 
 ### Form
diff --git a/apps/www/content/docs/components/separator.mdx b/apps/www/content/docs/components/separator.mdx
index 8c83944e15..87e7123e60 100644
--- a/apps/www/content/docs/components/separator.mdx
+++ b/apps/www/content/docs/components/separator.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### CommandMenu
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add separator
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="separator" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Separator } from "@/components/ui/separator"
@@ -28,5 +50,3 @@ import { Separator } from "@/components/ui/separator"
 ```tsx
 <Separator />
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/sheet.mdx b/apps/www/content/docs/components/sheet.mdx
index c91b5c2d61..ccadaca7df 100644
--- a/apps/www/content/docs/components/sheet.mdx
+++ b/apps/www/content/docs/components/sheet.mdx
@@ -11,14 +11,36 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add sheet
 ```
 
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="sheet" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
 ### Usage
 
 ```tsx
@@ -47,10 +69,6 @@ import {
 </Sheet>
 ```
 
-</Steps>
-
----
-
 ## Examples
 
 ### Side
diff --git a/apps/www/content/docs/components/skeleton.mdx b/apps/www/content/docs/components/skeleton.mdx
index deb856aa9b..c44b401ffd 100644
--- a/apps/www/content/docs/components/skeleton.mdx
+++ b/apps/www/content/docs/components/skeleton.mdx
@@ -8,15 +8,41 @@ component: true
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add skeleton
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="skeleton" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+```bash
+npx shadcn-ui@latest add skeleton
+```
+
+## Usage
 
 ```tsx
 import { Skeleton } from "@/components/ui/skeleton"
@@ -25,5 +51,3 @@ import { Skeleton } from "@/components/ui/skeleton"
 ```tsx
 <Skeleton className="w-[100px] h-[20px] rounded-full" />
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/slider.mdx b/apps/www/content/docs/components/slider.mdx
index 95bdc325ed..2900c15b64 100644
--- a/apps/www/content/docs/components/slider.mdx
+++ b/apps/www/content/docs/components/slider.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add slider
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="slider" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Slider } from "@/components/ui/slider"
@@ -28,5 +50,3 @@ import { Slider } from "@/components/ui/slider"
 ```tsx
 <Slider defaultValue={[33]} max={100} step={1} />
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx
index bf0838d43e..2bad0bc164 100644
--- a/apps/www/content/docs/components/switch.mdx
+++ b/apps/www/content/docs/components/switch.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add switch
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="switch" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Switch } from "@/components/ui/switch"
@@ -29,8 +51,6 @@ import { Switch } from "@/components/ui/switch"
 <Switch />
 ```
 
-</Steps>
-
 ## Examples
 
 ### Form
diff --git a/apps/www/content/docs/components/table.mdx b/apps/www/content/docs/components/table.mdx
index d854ec194e..64b3f0e0ed 100644
--- a/apps/www/content/docs/components/table.mdx
+++ b/apps/www/content/docs/components/table.mdx
@@ -8,15 +8,37 @@ component: true
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add table
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="table" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -52,8 +74,6 @@ import {
 </Table>
 ```
 
-</Steps>
-
 ## Data Table
 
 You can use the `<Table />` component to build more complex data tables. Combine it with [@tanstack/react-table](https://tanstack.com/table/v8) to create tables with sorting, filtering and pagination.
diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx
index fc3247fd8b..8cbaa1e2b5 100644
--- a/apps/www/content/docs/components/tabs.mdx
+++ b/apps/www/content/docs/components/tabs.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add tabs
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="tabs" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
@@ -35,5 +57,3 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
   <TabsContent value="password">Change your password here.</TabsContent>
 </Tabs>
 ```
-
-</Steps>
diff --git a/apps/www/content/docs/components/textarea.mdx b/apps/www/content/docs/components/textarea.mdx
index 6847db4294..bafe12436c 100644
--- a/apps/www/content/docs/components/textarea.mdx
+++ b/apps/www/content/docs/components/textarea.mdx
@@ -8,15 +8,37 @@ component: true
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add textarea
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="textarea" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Textarea } from "@/components/ui/textarea"
@@ -26,8 +48,6 @@ import { Textarea } from "@/components/ui/textarea"
 <Textarea />
 ```
 
-</Steps>
-
 ## Examples
 
 ### Default
diff --git a/apps/www/content/docs/components/toast.mdx b/apps/www/content/docs/components/toast.mdx
index f8fce5293f..8b0f607ed9 100644
--- a/apps/www/content/docs/components/toast.mdx
+++ b/apps/www/content/docs/components/toast.mdx
@@ -11,36 +11,23 @@ radix:
 
 ## Installation
 
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
 <Steps>
 
-### Command
+<Step>Run the following command:</Step>
 
 ```bash
-npx shadcn-ui@latest add toast
+npx shadcn-ui@latest add avatar
 ```
 
-### Toaster
-
-Add the `<Toaster />` component to your app.
-
-The `<Toaster />` component is where your toasts are displayed. You can place it anywhere in your app, but it's recommended to place it at the root of your app.
-
-#### Pages
-
-```tsx title="_app.tsx" {1,7}
-import { Toaster } from "@/components/ui/toaster"
-
-export default function App({ Component, pageProps }) {
-  return (
-    <Steps>
-      <Component {...pageProps} />
-      <Toaster />
-    </>
-  )
-}
-```
-
-#### App Directory
+<Step>Add the Toaster component</Step>
 
 ```tsx title="app/layout.tsx" {1,9}
 import { Toaster } from "@/components/ui/toaster"
@@ -58,7 +45,45 @@ export default function RootLayout({ children }) {
 }
 ```
 
-### Usage
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="avatar" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Add the Toaster component</Step>
+
+```tsx title="app/layout.tsx" {1,9}
+import { Toaster } from "@/components/ui/toaster"
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <main>{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  )
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 The `useToast` hook returns a `toast` function that you can use to display a toast.
 
@@ -91,8 +116,6 @@ To display multiple toasts at the same time, you can update the `TOAST_LIMIT` in
 
 </Callout>
 
-</Steps>
-
 ## Examples
 
 ### Simple
diff --git a/apps/www/content/docs/components/toggle.mdx b/apps/www/content/docs/components/toggle.mdx
index 2eafbeefbc..5258731eef 100644
--- a/apps/www/content/docs/components/toggle.mdx
+++ b/apps/www/content/docs/components/toggle.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add toggle
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="toggle" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import { Toggle } from "@/components/ui/toggle"
@@ -29,8 +51,6 @@ import { Toggle } from "@/components/ui/toggle"
 <Toggle>Toggle</Toggle>
 ```
 
-</Steps>
-
 ## Examples
 
 ### Default
diff --git a/apps/www/content/docs/components/tooltip.mdx b/apps/www/content/docs/components/tooltip.mdx
index ae6b101e0e..bd93d2d74a 100644
--- a/apps/www/content/docs/components/tooltip.mdx
+++ b/apps/www/content/docs/components/tooltip.mdx
@@ -11,15 +11,37 @@ radix:
 
 ## Installation
 
-<Steps>
+<Tabs defaultValue="cli">
 
-### Command
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
 
 ```bash
 npx shadcn-ui@latest add tooltip
 ```
 
-### Usage
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="tooltip" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
 
 ```tsx
 import {
@@ -40,5 +62,3 @@ import {
   </Tooltip>
 </TooltipProvider>
 ```
-
-</Steps>
diff --git a/apps/www/contentlayer.config.js b/apps/www/contentlayer.config.js
index fda1c4020d..ba8d534b55 100644
--- a/apps/www/contentlayer.config.js
+++ b/apps/www/contentlayer.config.js
@@ -108,6 +108,7 @@ export default makeSource({
 
             node.__rawString__ = codeEl.children?.[0].value
             node.__src__ = node.properties?.__src__
+            node.__style__ = node.properties?.__style__
           }
         })
       },
@@ -158,6 +159,10 @@ export default makeSource({
             if (node.__event__) {
               preElement.properties["__event__"] = node.__event__
             }
+
+            if (node.__style__) {
+              preElement.properties["__style__"] = node.__style__
+            }
           }
         })
       },
diff --git a/apps/www/lib/rehype-component.ts b/apps/www/lib/rehype-component.ts
index b7246f5a61..b8d7f39a2c 100644
--- a/apps/www/lib/rehype-component.ts
+++ b/apps/www/lib/rehype-component.ts
@@ -12,6 +12,68 @@ export function rehypeComponent() {
     visit(tree, (node: UnistNode) => {
       const { value: src } = getNodeAttributeByName(node, "src") || {}
 
+      if (node.name === "ComponentSource") {
+        const name = getNodeAttributeByName(node, "name")?.value as string
+
+        if (!name) {
+          return null
+        }
+
+        try {
+          for (const style of styles) {
+            const component = Index[style.name][name]
+            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,
+                  __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
 
diff --git a/apps/www/lib/toc.ts b/apps/www/lib/toc.ts
index 019eadd179..6e7de5680c 100644
--- a/apps/www/lib/toc.ts
+++ b/apps/www/lib/toc.ts
@@ -65,7 +65,9 @@ function getItems(node, current): Items {
 
 const getToc = () => (node, file) => {
   const table = toc(node)
-  file.data = getItems(table.map, {})
+  const items = getItems(table.map, {})
+
+  file.data = items
 }
 
 export type TableOfContents = Items
diff --git a/apps/www/public/registry/styles/default/toggle.json b/apps/www/public/registry/styles/default/toggle.json
index 433c8e69a1..3bb19f632e 100644
--- a/apps/www/public/registry/styles/default/toggle.json
+++ b/apps/www/public/registry/styles/default/toggle.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"bg-transparent border border-input hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3\",\n        sm: \"h-9 px-2.5\",\n        lg: \"h-11 px-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3\",\n        sm: \"h-9 px-2.5\",\n        lg: \"h-11 px-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/button.json b/apps/www/public/registry/styles/new-york/button.json
index 05b74149d4..2efbdfea98 100644
--- a/apps/www/public/registry/styles/new-york/button.json
+++ b/apps/www/public/registry/styles/new-york/button.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "button.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-7 rounded-md px-3 text-xs\",\n        lg: \"h-9 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/toggle.json b/apps/www/public/registry/styles/new-york/toggle.json
index 6d99529a0f..c51417ad68 100644
--- a/apps/www/public/registry/styles/new-york/toggle.json
+++ b/apps/www/public/registry/styles/new-york/toggle.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-3\",\n        sm: \"h-7 px-1.5\",\n        lg: \"h-9 px-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-3\",\n        sm: \"h-8 px-2\",\n        lg: \"h-10 px-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index 36f2f9e653..d7ece1c273 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -22,7 +22,8 @@ if (!result.success) {
 // ----------------------------------------------------------------------------
 // Build __registry__/index.tsx.
 // ----------------------------------------------------------------------------
-let index = `// This file is autogenerated by scripts/build-registry.ts
+let index = `// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
 // Do not edit this file directly.
 import * as React from "react"
 
@@ -34,9 +35,9 @@ for (const style of styles) {
 
   // Build style index.
   for (const item of result.data) {
-    if (item.type === "components:ui") {
-      continue
-    }
+    // if (item.type === "components:ui") {
+    //   continue
+    // }
 
     const resolveFiles = item.files.map(
       (file) => `registry/${style.name}/${file}`