diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
index 5b61ac36371..2a4ffc218b1 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -4944,213 +4944,18 @@ export const Index: Record<string, any> = {
       source: "",
       meta: undefined,
     },
-    "typography-blockquote": {
-      name: "typography-blockquote",
+    "text-demo": {
+      name: "text-demo",
       description: "",
       type: "registry:example",
       registryDependencies: undefined,
       files: [{
-        path: "registry/new-york/examples/typography-blockquote.tsx",
+        path: "registry/new-york/examples/text-demo.tsx",
         type: "registry:example",
         target: ""
       }],
       categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-blockquote.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-demo": {
-      name: "typography-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-demo.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-h1": {
-      name: "typography-h1",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-h1.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-h1.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-h2": {
-      name: "typography-h2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-h2.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-h2.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-h3": {
-      name: "typography-h3",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-h3.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-h3.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-h4": {
-      name: "typography-h4",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-h4.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-h4.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-inline-code": {
-      name: "typography-inline-code",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-inline-code.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-inline-code.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-large": {
-      name: "typography-large",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-large.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-large.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-lead": {
-      name: "typography-lead",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-lead.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-lead.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-list": {
-      name: "typography-list",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-list.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-list.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-muted": {
-      name: "typography-muted",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-muted.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-muted.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-p": {
-      name: "typography-p",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-p.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-p.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-small": {
-      name: "typography-small",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-small.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-small.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-table": {
-      name: "typography-table",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/new-york/examples/typography-table.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/new-york/examples/typography-table.tsx")),
+      component: React.lazy(() => import("@/registry/new-york/examples/text-demo.tsx")),
       source: "",
       meta: undefined,
     },
@@ -10199,213 +10004,18 @@ export const Index: Record<string, any> = {
       source: "",
       meta: undefined,
     },
-    "typography-blockquote": {
-      name: "typography-blockquote",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-blockquote.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-blockquote.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-demo": {
-      name: "typography-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-demo.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-demo.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-h1": {
-      name: "typography-h1",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-h1.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-h1.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-h2": {
-      name: "typography-h2",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-h2.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-h2.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-h3": {
-      name: "typography-h3",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-h3.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-h3.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-h4": {
-      name: "typography-h4",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-h4.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-h4.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-inline-code": {
-      name: "typography-inline-code",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-inline-code.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-inline-code.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-large": {
-      name: "typography-large",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-large.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-large.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-lead": {
-      name: "typography-lead",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-lead.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-lead.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-list": {
-      name: "typography-list",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-list.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-list.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-muted": {
-      name: "typography-muted",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-muted.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-muted.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-p": {
-      name: "typography-p",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-p.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-p.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-small": {
-      name: "typography-small",
-      description: "",
-      type: "registry:example",
-      registryDependencies: undefined,
-      files: [{
-        path: "registry/default/examples/typography-small.tsx",
-        type: "registry:example",
-        target: ""
-      }],
-      categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-small.tsx")),
-      source: "",
-      meta: undefined,
-    },
-    "typography-table": {
-      name: "typography-table",
+    "text-demo": {
+      name: "text-demo",
       description: "",
       type: "registry:example",
       registryDependencies: undefined,
       files: [{
-        path: "registry/default/examples/typography-table.tsx",
+        path: "registry/default/examples/text-demo.tsx",
         type: "registry:example",
         target: ""
       }],
       categories: undefined,
-      component: React.lazy(() => import("@/registry/default/examples/typography-table.tsx")),
+      component: React.lazy(() => import("@/registry/default/examples/text-demo.tsx")),
       source: "",
       meta: undefined,
     },
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index 92d4ac8075d..99a5d26b3f3 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -82,11 +82,6 @@ export const docsConfig: DocsConfig = {
           href: "/docs/react-19",
           items: [],
         },
-        {
-          title: "Typography",
-          href: "/docs/components/typography",
-          items: [],
-        },
         {
           title: "Open in v0",
           href: "/docs/v0",
@@ -372,6 +367,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/tabs",
           items: [],
         },
+        {
+          title: "Text",
+          href: "/docs/components/text",
+          items: [],
+        },
         {
           title: "Textarea",
           href: "/docs/components/textarea",
diff --git a/apps/www/content/docs/components/text.mdx b/apps/www/content/docs/components/text.mdx
new file mode 100644
index 00000000000..36c73a2d680
--- /dev/null
+++ b/apps/www/content/docs/components/text.mdx
@@ -0,0 +1,11 @@
+---
+title: Text
+description: Displays a text or a component that looks like a text.
+component: true
+---
+
+<ComponentPreview
+  name="text-demo"
+  className="[&>div.min-h-[350px]]:p-6"
+  description="A collection of typographic elements."
+/>
diff --git a/apps/www/content/docs/components/typography.mdx b/apps/www/content/docs/components/typography.mdx
deleted file mode 100644
index 419d20cfd54..00000000000
--- a/apps/www/content/docs/components/typography.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Typography
-description: Styles for headings, paragraphs, lists...etc
-component: true
----
-
-<ComponentPreview
-  name="typography-demo"
-  className="[&>div.min-h-[350px]]:p-6"
-  description="A collection of typographic elements."
-/>
-
-## h1
-
-<ComponentPreview name="typography-h1" />
-
-## h2
-
-<ComponentPreview name="typography-h2" />
-
-## h3
-
-<ComponentPreview name="typography-h3" />
-
-## h4
-
-<ComponentPreview name="typography-h4" />
-
-## p
-
-<ComponentPreview name="typography-p" />
-
-## blockquote
-
-<ComponentPreview name="typography-blockquote" />
-
-## table
-
-<ComponentPreview name="typography-table" />
-
-## list
-
-<ComponentPreview name="typography-list" />
-
-## Inline code
-
-<ComponentPreview name="typography-inline-code" />
-
-## Lead
-
-<ComponentPreview name="typography-lead" />
-
-## Large
-
-<ComponentPreview name="typography-large" />
-
-## Small
-
-<ComponentPreview name="typography-small" />
-
-## Muted
-
-<ComponentPreview name="typography-muted" />
diff --git a/apps/www/public/r/styles/default/text-demo.json b/apps/www/public/r/styles/default/text-demo.json
new file mode 100644
index 00000000000..4410ddd178a
--- /dev/null
+++ b/apps/www/public/r/styles/default/text-demo.json
@@ -0,0 +1,12 @@
+{
+  "name": "text-demo",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "examples/text-demo.tsx",
+      "content": "import { Text } from \"@/registry/default/ui/text\"\n\nexport default function TextDemo() {\n  return (\n    <div>\n      <Text variant=\"h1\">The Joke Tax Chronicles</Text>\n      <Text variant=\"p\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </Text>\n      <Text variant=\"h2\">The King's Plan</Text>\n      <Text>\n        The king thought long and hard, and finally came up with{\" \"}\n        <Text href=\"#\" variant=\"a\">\n          a brilliant plan\n        </Text>\n        : he would tax the jokes in the kingdom.\n      </Text>\n      <Text variant=\"blockquote\">\n        \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n        that they should pay for the privilege.\"\n      </Text>\n      <Text variant=\"h3\">The Joke Tax</Text>\n      <Text>\n        The king's subjects were not amused. They grumbled and complained, but\n        the king was firm:\n      </Text>\n      <Text variant=\"ul\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </Text>\n      <Text>\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king's\n        foolishness get him down: a court jester named Jokester.\n      </Text>\n      <Text variant=\"h3\">Jokester's Revolt</Text>\n      <Text>\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king's pillow, in his soup,\n        even in the royal toilet. The king was furious, but he couldn't seem to\n        stop Jokester.\n      </Text>\n      <Text>\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn't help but laugh. And\n        once they started laughing, they couldn't stop.\n      </Text>\n      <Text variant=\"h3\">The People's Rebellion</Text>\n      <Text>\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </Text>\n      <Text>\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </Text>\n      <Text>\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </Text>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-blockquote.json b/apps/www/public/r/styles/default/typography-blockquote.json
deleted file mode 100644
index 08ddcfd9a20..00000000000
--- a/apps/www/public/r/styles/default/typography-blockquote.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-blockquote",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-blockquote.tsx",
-      "content": "export default function TypographyBlockquote() {\n  return (\n    <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n      they should pay for the privilege.\"\n    </blockquote>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-demo.json b/apps/www/public/r/styles/default/typography-demo.json
deleted file mode 100644
index 8db6def4d14..00000000000
--- a/apps/www/public/r/styles/default/typography-demo.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-demo",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-demo.tsx",
-      "content": "export default function TypographyDemo() {\n  return (\n    <div>\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n        The Joke Tax Chronicles\n      </h1>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </p>\n      <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n        The King's Plan\n      </h2>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king thought long and hard, and finally came up with{\" \"}\n        <a\n          href=\"#\"\n          className=\"font-medium text-primary underline underline-offset-4\"\n        >\n          a brilliant plan\n        </a>\n        : he would tax the jokes in the kingdom.\n      </p>\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n        \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n        that they should pay for the privilege.\"\n      </blockquote>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The Joke Tax\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king's subjects were not amused. They grumbled and complained, but\n        the king was firm:\n      </p>\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king's\n        foolishness get him down: a court jester named Jokester.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        Jokester's Revolt\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king's pillow, in his soup,\n        even in the royal toilet. The king was furious, but he couldn't seem to\n        stop Jokester.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn't help but laugh. And\n        once they started laughing, they couldn't stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People's Rebellion\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </p>\n      <div className=\"my-6 w-full overflow-y-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King's Treasury\n              </th>\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                People's happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Empty\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Overflowing\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Modest\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Satisfied\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Full\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Ecstatic\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </p>\n    </div>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-h1.json b/apps/www/public/r/styles/default/typography-h1.json
deleted file mode 100644
index ac9b2a69f50..00000000000
--- a/apps/www/public/r/styles/default/typography-h1.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-h1",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-h1.tsx",
-      "content": "export default function TypographyH1() {\n  return (\n    <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      Taxing Laughter: The Joke Tax Chronicles\n    </h1>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-h2.json b/apps/www/public/r/styles/default/typography-h2.json
deleted file mode 100644
index 57909033817..00000000000
--- a/apps/www/public/r/styles/default/typography-h2.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-h2",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-h2.tsx",
-      "content": "export default function TypographyH2() {\n  return (\n    <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n      The People of the Kingdom\n    </h2>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-h3.json b/apps/www/public/r/styles/default/typography-h3.json
deleted file mode 100644
index 193e089e74e..00000000000
--- a/apps/www/public/r/styles/default/typography-h3.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-h3",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-h3.tsx",
-      "content": "export default function TypographyH3() {\n  return (\n    <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-h4.json b/apps/www/public/r/styles/default/typography-h4.json
deleted file mode 100644
index 19852b679e2..00000000000
--- a/apps/www/public/r/styles/default/typography-h4.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-h4",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-h4.tsx",
-      "content": "export default function TypographyH4() {\n  return (\n    <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n      People stopped telling jokes\n    </h4>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-inline-code.json b/apps/www/public/r/styles/default/typography-inline-code.json
deleted file mode 100644
index eee8b57bd6d..00000000000
--- a/apps/www/public/r/styles/default/typography-inline-code.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-inline-code",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-inline-code.tsx",
-      "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n      @radix-ui/react-alert-dialog\n    </code>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-large.json b/apps/www/public/r/styles/default/typography-large.json
deleted file mode 100644
index 553e9e70fa1..00000000000
--- a/apps/www/public/r/styles/default/typography-large.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-large",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-large.tsx",
-      "content": "export default function TypographyLarge() {\n  return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-lead.json b/apps/www/public/r/styles/default/typography-lead.json
deleted file mode 100644
index d07c6a0c1d0..00000000000
--- a/apps/www/public/r/styles/default/typography-lead.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-lead",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-lead.tsx",
-      "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-xl text-muted-foreground\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-list.json b/apps/www/public/r/styles/default/typography-list.json
deleted file mode 100644
index a53659185b8..00000000000
--- a/apps/www/public/r/styles/default/typography-list.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-list",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-list.tsx",
-      "content": "export default function TypographyList() {\n  return (\n    <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-muted.json b/apps/www/public/r/styles/default/typography-muted.json
deleted file mode 100644
index b8b411d0846..00000000000
--- a/apps/www/public/r/styles/default/typography-muted.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-muted",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-muted.tsx",
-      "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-p.json b/apps/www/public/r/styles/default/typography-p.json
deleted file mode 100644
index 7d9847196b0..00000000000
--- a/apps/www/public/r/styles/default/typography-p.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-p",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-p.tsx",
-      "content": "export default function TypographyP() {\n  return (\n    <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error of\n      his ways and repealed the joke tax.\n    </p>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-small.json b/apps/www/public/r/styles/default/typography-small.json
deleted file mode 100644
index 79bae7bb51f..00000000000
--- a/apps/www/public/r/styles/default/typography-small.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-small",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-small.tsx",
-      "content": "export default function TypographySmall() {\n  return (\n    <small className=\"text-sm font-medium leading-none\">Email address</small>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/typography-table.json b/apps/www/public/r/styles/default/typography-table.json
deleted file mode 100644
index 904c6d14179..00000000000
--- a/apps/www/public/r/styles/default/typography-table.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-table",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-table.tsx",
-      "content": "export default function TypographyTable() {\n  return (\n    <div className=\"my-6 w-full overflow-y-auto\">\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              King's Treasury\n            </th>\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Empty\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Overflowing\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Modest\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Satisfied\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Full\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/text-demo.json b/apps/www/public/r/styles/new-york/text-demo.json
new file mode 100644
index 00000000000..4410ddd178a
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/text-demo.json
@@ -0,0 +1,12 @@
+{
+  "name": "text-demo",
+  "type": "registry:example",
+  "files": [
+    {
+      "path": "examples/text-demo.tsx",
+      "content": "import { Text } from \"@/registry/default/ui/text\"\n\nexport default function TextDemo() {\n  return (\n    <div>\n      <Text variant=\"h1\">The Joke Tax Chronicles</Text>\n      <Text variant=\"p\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </Text>\n      <Text variant=\"h2\">The King's Plan</Text>\n      <Text>\n        The king thought long and hard, and finally came up with{\" \"}\n        <Text href=\"#\" variant=\"a\">\n          a brilliant plan\n        </Text>\n        : he would tax the jokes in the kingdom.\n      </Text>\n      <Text variant=\"blockquote\">\n        \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n        that they should pay for the privilege.\"\n      </Text>\n      <Text variant=\"h3\">The Joke Tax</Text>\n      <Text>\n        The king's subjects were not amused. They grumbled and complained, but\n        the king was firm:\n      </Text>\n      <Text variant=\"ul\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </Text>\n      <Text>\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king's\n        foolishness get him down: a court jester named Jokester.\n      </Text>\n      <Text variant=\"h3\">Jokester's Revolt</Text>\n      <Text>\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king's pillow, in his soup,\n        even in the royal toilet. The king was furious, but he couldn't seem to\n        stop Jokester.\n      </Text>\n      <Text>\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn't help but laugh. And\n        once they started laughing, they couldn't stop.\n      </Text>\n      <Text variant=\"h3\">The People's Rebellion</Text>\n      <Text>\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </Text>\n      <Text>\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </Text>\n      <Text>\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </Text>\n    </div>\n  )\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-blockquote.json b/apps/www/public/r/styles/new-york/typography-blockquote.json
deleted file mode 100644
index 08ddcfd9a20..00000000000
--- a/apps/www/public/r/styles/new-york/typography-blockquote.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-blockquote",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-blockquote.tsx",
-      "content": "export default function TypographyBlockquote() {\n  return (\n    <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n      they should pay for the privilege.\"\n    </blockquote>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-demo.json b/apps/www/public/r/styles/new-york/typography-demo.json
deleted file mode 100644
index 8db6def4d14..00000000000
--- a/apps/www/public/r/styles/new-york/typography-demo.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-demo",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-demo.tsx",
-      "content": "export default function TypographyDemo() {\n  return (\n    <div>\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n        The Joke Tax Chronicles\n      </h1>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </p>\n      <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n        The King's Plan\n      </h2>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king thought long and hard, and finally came up with{\" \"}\n        <a\n          href=\"#\"\n          className=\"font-medium text-primary underline underline-offset-4\"\n        >\n          a brilliant plan\n        </a>\n        : he would tax the jokes in the kingdom.\n      </p>\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n        \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n        that they should pay for the privilege.\"\n      </blockquote>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The Joke Tax\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king's subjects were not amused. They grumbled and complained, but\n        the king was firm:\n      </p>\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king's\n        foolishness get him down: a court jester named Jokester.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        Jokester's Revolt\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king's pillow, in his soup,\n        even in the royal toilet. The king was furious, but he couldn't seem to\n        stop Jokester.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn't help but laugh. And\n        once they started laughing, they couldn't stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People's Rebellion\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </p>\n      <div className=\"my-6 w-full overflow-y-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King's Treasury\n              </th>\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                People's happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Empty\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Overflowing\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Modest\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Satisfied\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Full\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Ecstatic\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </p>\n    </div>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-h1.json b/apps/www/public/r/styles/new-york/typography-h1.json
deleted file mode 100644
index ac9b2a69f50..00000000000
--- a/apps/www/public/r/styles/new-york/typography-h1.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-h1",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-h1.tsx",
-      "content": "export default function TypographyH1() {\n  return (\n    <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      Taxing Laughter: The Joke Tax Chronicles\n    </h1>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-h2.json b/apps/www/public/r/styles/new-york/typography-h2.json
deleted file mode 100644
index 57909033817..00000000000
--- a/apps/www/public/r/styles/new-york/typography-h2.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-h2",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-h2.tsx",
-      "content": "export default function TypographyH2() {\n  return (\n    <h2 className=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\">\n      The People of the Kingdom\n    </h2>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-h3.json b/apps/www/public/r/styles/new-york/typography-h3.json
deleted file mode 100644
index 193e089e74e..00000000000
--- a/apps/www/public/r/styles/new-york/typography-h3.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-h3",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-h3.tsx",
-      "content": "export default function TypographyH3() {\n  return (\n    <h3 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-h4.json b/apps/www/public/r/styles/new-york/typography-h4.json
deleted file mode 100644
index 19852b679e2..00000000000
--- a/apps/www/public/r/styles/new-york/typography-h4.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-h4",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-h4.tsx",
-      "content": "export default function TypographyH4() {\n  return (\n    <h4 className=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n      People stopped telling jokes\n    </h4>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-inline-code.json b/apps/www/public/r/styles/new-york/typography-inline-code.json
deleted file mode 100644
index eee8b57bd6d..00000000000
--- a/apps/www/public/r/styles/new-york/typography-inline-code.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-inline-code",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-inline-code.tsx",
-      "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n      @radix-ui/react-alert-dialog\n    </code>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-large.json b/apps/www/public/r/styles/new-york/typography-large.json
deleted file mode 100644
index 553e9e70fa1..00000000000
--- a/apps/www/public/r/styles/new-york/typography-large.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-large",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-large.tsx",
-      "content": "export default function TypographyLarge() {\n  return <div className=\"text-lg font-semibold\">Are you absolutely sure?</div>\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-lead.json b/apps/www/public/r/styles/new-york/typography-lead.json
deleted file mode 100644
index d07c6a0c1d0..00000000000
--- a/apps/www/public/r/styles/new-york/typography-lead.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-lead",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-lead.tsx",
-      "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-xl text-muted-foreground\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-list.json b/apps/www/public/r/styles/new-york/typography-list.json
deleted file mode 100644
index a53659185b8..00000000000
--- a/apps/www/public/r/styles/new-york/typography-list.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-list",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-list.tsx",
-      "content": "export default function TypographyList() {\n  return (\n    <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-muted.json b/apps/www/public/r/styles/new-york/typography-muted.json
deleted file mode 100644
index b8b411d0846..00000000000
--- a/apps/www/public/r/styles/new-york/typography-muted.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-muted",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-muted.tsx",
-      "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-p.json b/apps/www/public/r/styles/new-york/typography-p.json
deleted file mode 100644
index 7d9847196b0..00000000000
--- a/apps/www/public/r/styles/new-york/typography-p.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-p",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-p.tsx",
-      "content": "export default function TypographyP() {\n  return (\n    <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error of\n      his ways and repealed the joke tax.\n    </p>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-small.json b/apps/www/public/r/styles/new-york/typography-small.json
deleted file mode 100644
index 79bae7bb51f..00000000000
--- a/apps/www/public/r/styles/new-york/typography-small.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-small",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-small.tsx",
-      "content": "export default function TypographySmall() {\n  return (\n    <small className=\"text-sm font-medium leading-none\">Email address</small>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/typography-table.json b/apps/www/public/r/styles/new-york/typography-table.json
deleted file mode 100644
index 904c6d14179..00000000000
--- a/apps/www/public/r/styles/new-york/typography-table.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "typography-table",
-  "type": "registry:example",
-  "files": [
-    {
-      "path": "examples/typography-table.tsx",
-      "content": "export default function TypographyTable() {\n  return (\n    <div className=\"my-6 w-full overflow-y-auto\">\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              King's Treasury\n            </th>\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Empty\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Overflowing\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Modest\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Satisfied\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Full\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
-      "type": "registry:example",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/registry/default/examples/text-demo.tsx b/apps/www/registry/default/examples/text-demo.tsx
new file mode 100644
index 00000000000..e804b62f805
--- /dev/null
+++ b/apps/www/registry/default/examples/text-demo.tsx
@@ -0,0 +1,68 @@
+import { Text } from "@/registry/default/ui/text"
+
+export default function TextDemo() {
+  return (
+    <div>
+      <Text variant="h1">The Joke Tax Chronicles</Text>
+      <Text variant="p">
+        Once upon a time, in a far-off land, there was a very lazy king who
+        spent all day lounging on his throne. One day, his advisors came to him
+        with a problem: the kingdom was running out of money.
+      </Text>
+      <Text variant="h2">The King's Plan</Text>
+      <Text>
+        The king thought long and hard, and finally came up with{" "}
+        <Text href="#" variant="a">
+          a brilliant plan
+        </Text>
+        : he would tax the jokes in the kingdom.
+      </Text>
+      <Text variant="blockquote">
+        "After all," he said, "everyone enjoys a good joke, so it's only fair
+        that they should pay for the privilege."
+      </Text>
+      <Text variant="h3">The Joke Tax</Text>
+      <Text>
+        The king's subjects were not amused. They grumbled and complained, but
+        the king was firm:
+      </Text>
+      <Text variant="ul">
+        <li>1st level of puns: 5 gold coins</li>
+        <li>2nd level of jokes: 10 gold coins</li>
+        <li>3rd level of one-liners : 20 gold coins</li>
+      </Text>
+      <Text>
+        As a result, people stopped telling jokes, and the kingdom fell into a
+        gloom. But there was one person who refused to let the king's
+        foolishness get him down: a court jester named Jokester.
+      </Text>
+      <Text variant="h3">Jokester's Revolt</Text>
+      <Text>
+        Jokester began sneaking into the castle in the middle of the night and
+        leaving jokes all over the place: under the king's pillow, in his soup,
+        even in the royal toilet. The king was furious, but he couldn't seem to
+        stop Jokester.
+      </Text>
+      <Text>
+        And then, one day, the people of the kingdom discovered that the jokes
+        left by Jokester were so funny that they couldn't help but laugh. And
+        once they started laughing, they couldn't stop.
+      </Text>
+      <Text variant="h3">The People's Rebellion</Text>
+      <Text>
+        The people of the kingdom, feeling uplifted by the laughter, started to
+        tell jokes and puns again, and soon the entire kingdom was in on the
+        joke.
+      </Text>
+      <Text>
+        The king, seeing how much happier his subjects were, realized the error
+        of his ways and repealed the joke tax. Jokester was declared a hero, and
+        the kingdom lived happily ever after.
+      </Text>
+      <Text>
+        The moral of the story is: never underestimate the power of a good laugh
+        and always be careful of bad ideas.
+      </Text>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/examples/typography-blockquote.tsx b/apps/www/registry/default/examples/typography-blockquote.tsx
deleted file mode 100644
index 21712995c0f..00000000000
--- a/apps/www/registry/default/examples/typography-blockquote.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyBlockquote() {
-  return (
-    <blockquote className="mt-6 border-l-2 pl-6 italic">
-      "After all," he said, "everyone enjoys a good joke, so it's only fair that
-      they should pay for the privilege."
-    </blockquote>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-demo.tsx b/apps/www/registry/default/examples/typography-demo.tsx
deleted file mode 100644
index dfc6deebd50..00000000000
--- a/apps/www/registry/default/examples/typography-demo.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-export default function TypographyDemo() {
-  return (
-    <div>
-      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-        The Joke Tax Chronicles
-      </h1>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        Once upon a time, in a far-off land, there was a very lazy king who
-        spent all day lounging on his throne. One day, his advisors came to him
-        with a problem: the kingdom was running out of money.
-      </p>
-      <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-        The King's Plan
-      </h2>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        The king thought long and hard, and finally came up with{" "}
-        <a
-          href="#"
-          className="font-medium text-primary underline underline-offset-4"
-        >
-          a brilliant plan
-        </a>
-        : he would tax the jokes in the kingdom.
-      </p>
-      <blockquote className="mt-6 border-l-2 pl-6 italic">
-        "After all," he said, "everyone enjoys a good joke, so it's only fair
-        that they should pay for the privilege."
-      </blockquote>
-      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-        The Joke Tax
-      </h3>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        The king's subjects were not amused. They grumbled and complained, but
-        the king was firm:
-      </p>
-      <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
-        <li>1st level of puns: 5 gold coins</li>
-        <li>2nd level of jokes: 10 gold coins</li>
-        <li>3rd level of one-liners : 20 gold coins</li>
-      </ul>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        As a result, people stopped telling jokes, and the kingdom fell into a
-        gloom. But there was one person who refused to let the king's
-        foolishness get him down: a court jester named Jokester.
-      </p>
-      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-        Jokester's Revolt
-      </h3>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        Jokester began sneaking into the castle in the middle of the night and
-        leaving jokes all over the place: under the king's pillow, in his soup,
-        even in the royal toilet. The king was furious, but he couldn't seem to
-        stop Jokester.
-      </p>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        And then, one day, the people of the kingdom discovered that the jokes
-        left by Jokester were so funny that they couldn't help but laugh. And
-        once they started laughing, they couldn't stop.
-      </p>
-      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-        The People's Rebellion
-      </h3>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        The people of the kingdom, feeling uplifted by the laughter, started to
-        tell jokes and puns again, and soon the entire kingdom was in on the
-        joke.
-      </p>
-      <div className="my-6 w-full overflow-y-auto">
-        <table className="w-full">
-          <thead>
-            <tr className="m-0 border-t p-0 even:bg-muted">
-              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-                King's Treasury
-              </th>
-              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-                People's happiness
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr className="m-0 border-t p-0 even:bg-muted">
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Empty
-              </td>
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Overflowing
-              </td>
-            </tr>
-            <tr className="m-0 border-t p-0 even:bg-muted">
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Modest
-              </td>
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Satisfied
-              </td>
-            </tr>
-            <tr className="m-0 border-t p-0 even:bg-muted">
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Full
-              </td>
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Ecstatic
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        The king, seeing how much happier his subjects were, realized the error
-        of his ways and repealed the joke tax. Jokester was declared a hero, and
-        the kingdom lived happily ever after.
-      </p>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        The moral of the story is: never underestimate the power of a good laugh
-        and always be careful of bad ideas.
-      </p>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-h1.tsx b/apps/www/registry/default/examples/typography-h1.tsx
deleted file mode 100644
index 0ee8f5dd4b7..00000000000
--- a/apps/www/registry/default/examples/typography-h1.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function TypographyH1() {
-  return (
-    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-      Taxing Laughter: The Joke Tax Chronicles
-    </h1>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-h2.tsx b/apps/www/registry/default/examples/typography-h2.tsx
deleted file mode 100644
index ea794416542..00000000000
--- a/apps/www/registry/default/examples/typography-h2.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function TypographyH2() {
-  return (
-    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
-      The People of the Kingdom
-    </h2>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-h3.tsx b/apps/www/registry/default/examples/typography-h3.tsx
deleted file mode 100644
index 4e8a1859cf5..00000000000
--- a/apps/www/registry/default/examples/typography-h3.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function TypographyH3() {
-  return (
-    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
-      The Joke Tax
-    </h3>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-h4.tsx b/apps/www/registry/default/examples/typography-h4.tsx
deleted file mode 100644
index 583516625ea..00000000000
--- a/apps/www/registry/default/examples/typography-h4.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function TypographyH4() {
-  return (
-    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
-      People stopped telling jokes
-    </h4>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-inline-code.tsx b/apps/www/registry/default/examples/typography-inline-code.tsx
deleted file mode 100644
index fbbc96ba688..00000000000
--- a/apps/www/registry/default/examples/typography-inline-code.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function TypographyInlineCode() {
-  return (
-    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
-      @radix-ui/react-alert-dialog
-    </code>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-large.tsx b/apps/www/registry/default/examples/typography-large.tsx
deleted file mode 100644
index 944f4478d38..00000000000
--- a/apps/www/registry/default/examples/typography-large.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function TypographyLarge() {
-  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
-}
diff --git a/apps/www/registry/default/examples/typography-lead.tsx b/apps/www/registry/default/examples/typography-lead.tsx
deleted file mode 100644
index aac39ea29ed..00000000000
--- a/apps/www/registry/default/examples/typography-lead.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyLead() {
-  return (
-    <p className="text-xl text-muted-foreground">
-      A modal dialog that interrupts the user with important content and expects
-      a response.
-    </p>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-list.tsx b/apps/www/registry/default/examples/typography-list.tsx
deleted file mode 100644
index a814f661f0b..00000000000
--- a/apps/www/registry/default/examples/typography-list.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function TypographyList() {
-  return (
-    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
-      <li>1st level of puns: 5 gold coins</li>
-      <li>2nd level of jokes: 10 gold coins</li>
-      <li>3rd level of one-liners : 20 gold coins</li>
-    </ul>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-muted.tsx b/apps/www/registry/default/examples/typography-muted.tsx
deleted file mode 100644
index 545dcfc74f1..00000000000
--- a/apps/www/registry/default/examples/typography-muted.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function TypographyMuted() {
-  return (
-    <p className="text-sm text-muted-foreground">Enter your email address.</p>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-p.tsx b/apps/www/registry/default/examples/typography-p.tsx
deleted file mode 100644
index 88fd4795485..00000000000
--- a/apps/www/registry/default/examples/typography-p.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyP() {
-  return (
-    <p className="leading-7 [&:not(:first-child)]:mt-6">
-      The king, seeing how much happier his subjects were, realized the error of
-      his ways and repealed the joke tax.
-    </p>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-small.tsx b/apps/www/registry/default/examples/typography-small.tsx
deleted file mode 100644
index 822019d1df0..00000000000
--- a/apps/www/registry/default/examples/typography-small.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function TypographySmall() {
-  return (
-    <small className="text-sm font-medium leading-none">Email address</small>
-  )
-}
diff --git a/apps/www/registry/default/examples/typography-table.tsx b/apps/www/registry/default/examples/typography-table.tsx
deleted file mode 100644
index 0698c475194..00000000000
--- a/apps/www/registry/default/examples/typography-table.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-export default function TypographyTable() {
-  return (
-    <div className="my-6 w-full overflow-y-auto">
-      <table className="w-full">
-        <thead>
-          <tr className="m-0 border-t p-0 even:bg-muted">
-            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-              King's Treasury
-            </th>
-            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-              People's happiness
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr className="m-0 border-t p-0 even:bg-muted">
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Empty
-            </td>
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Overflowing
-            </td>
-          </tr>
-          <tr className="m-0 border-t p-0 even:bg-muted">
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Modest
-            </td>
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Satisfied
-            </td>
-          </tr>
-          <tr className="m-0 border-t p-0 even:bg-muted">
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Full
-            </td>
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Ecstatic
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/ui/text.tsx b/apps/www/registry/default/ui/text.tsx
new file mode 100644
index 00000000000..2c54e7b6b41
--- /dev/null
+++ b/apps/www/registry/default/ui/text.tsx
@@ -0,0 +1,102 @@
+import * as React from "react"
+import { forwardRef } from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const shared = {
+  p: "leading-7 [&:not(:first-child)]:mt-6",
+  l: "my-6 ml-6 list-disc [&>li]:mt-2",
+}
+
+const textVariants = cva("", {
+  defaultVariants: { variant: "p" },
+  variants: {
+    variant: {
+      a: "text-primary font-medium underline underline-offset-4",
+      blockquote: "mt-6 border-l-2 pl-6 italic",
+      h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+      h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+      h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+      h5: shared.p,
+      p: shared.p,
+      small: "text-sm font-medium leading-none",
+      ul: shared.l,
+      ol: shared.l,
+      code: "bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+      lead: "text-muted-foreground text-xl",
+      large: "text-lg font-semibold",
+      muted: "text-muted-foreground text-sm",
+    },
+  },
+})
+
+interface AnchorProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof textVariants> {
+  variant: "a"
+  asChild?: boolean
+  ref?: React.Ref<HTMLAnchorElement>
+}
+
+interface BaseProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof textVariants> {
+  variant?: Exclude<VariantProps<typeof textVariants>["variant"], "a">
+  asChild?: boolean
+  ref?: React.Ref<HTMLElement>
+}
+
+type TextProps = AnchorProps | BaseProps
+
+const variantToTag: Record<
+  NonNullable<VariantProps<typeof textVariants>["variant"]>,
+  HTMLElement["tagName"]
+> = {
+  a: "a",
+  blockquote: "blockquote",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  p: "p",
+  small: "small",
+  code: "code",
+  ul: "ul",
+  ol: "ol",
+  lead: "p",
+  large: "div",
+  muted: "p",
+}
+
+const Text = forwardRef<HTMLAnchorElement | HTMLElement, TextProps>(
+  (props, ref) => {
+    const { variant, asChild, className, ...rest } = props
+    const Component = asChild ? Slot : variantToTag[variant ?? "p"]
+
+    if (variant === "a") {
+      return (
+        <Component
+          ref={ref}
+          className={cn(textVariants({ variant }), className)}
+          {...rest}
+        />
+      )
+    }
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(textVariants({ variant }), className)}
+        {...rest}
+      />
+    )
+  }
+)
+
+Text.displayName = "Text"
+
+export { Text, textVariants }
diff --git a/apps/www/registry/new-york/examples/text-demo.tsx b/apps/www/registry/new-york/examples/text-demo.tsx
new file mode 100644
index 00000000000..e804b62f805
--- /dev/null
+++ b/apps/www/registry/new-york/examples/text-demo.tsx
@@ -0,0 +1,68 @@
+import { Text } from "@/registry/default/ui/text"
+
+export default function TextDemo() {
+  return (
+    <div>
+      <Text variant="h1">The Joke Tax Chronicles</Text>
+      <Text variant="p">
+        Once upon a time, in a far-off land, there was a very lazy king who
+        spent all day lounging on his throne. One day, his advisors came to him
+        with a problem: the kingdom was running out of money.
+      </Text>
+      <Text variant="h2">The King's Plan</Text>
+      <Text>
+        The king thought long and hard, and finally came up with{" "}
+        <Text href="#" variant="a">
+          a brilliant plan
+        </Text>
+        : he would tax the jokes in the kingdom.
+      </Text>
+      <Text variant="blockquote">
+        "After all," he said, "everyone enjoys a good joke, so it's only fair
+        that they should pay for the privilege."
+      </Text>
+      <Text variant="h3">The Joke Tax</Text>
+      <Text>
+        The king's subjects were not amused. They grumbled and complained, but
+        the king was firm:
+      </Text>
+      <Text variant="ul">
+        <li>1st level of puns: 5 gold coins</li>
+        <li>2nd level of jokes: 10 gold coins</li>
+        <li>3rd level of one-liners : 20 gold coins</li>
+      </Text>
+      <Text>
+        As a result, people stopped telling jokes, and the kingdom fell into a
+        gloom. But there was one person who refused to let the king's
+        foolishness get him down: a court jester named Jokester.
+      </Text>
+      <Text variant="h3">Jokester's Revolt</Text>
+      <Text>
+        Jokester began sneaking into the castle in the middle of the night and
+        leaving jokes all over the place: under the king's pillow, in his soup,
+        even in the royal toilet. The king was furious, but he couldn't seem to
+        stop Jokester.
+      </Text>
+      <Text>
+        And then, one day, the people of the kingdom discovered that the jokes
+        left by Jokester were so funny that they couldn't help but laugh. And
+        once they started laughing, they couldn't stop.
+      </Text>
+      <Text variant="h3">The People's Rebellion</Text>
+      <Text>
+        The people of the kingdom, feeling uplifted by the laughter, started to
+        tell jokes and puns again, and soon the entire kingdom was in on the
+        joke.
+      </Text>
+      <Text>
+        The king, seeing how much happier his subjects were, realized the error
+        of his ways and repealed the joke tax. Jokester was declared a hero, and
+        the kingdom lived happily ever after.
+      </Text>
+      <Text>
+        The moral of the story is: never underestimate the power of a good laugh
+        and always be careful of bad ideas.
+      </Text>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/typography-blockquote.tsx b/apps/www/registry/new-york/examples/typography-blockquote.tsx
deleted file mode 100644
index 21712995c0f..00000000000
--- a/apps/www/registry/new-york/examples/typography-blockquote.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyBlockquote() {
-  return (
-    <blockquote className="mt-6 border-l-2 pl-6 italic">
-      "After all," he said, "everyone enjoys a good joke, so it's only fair that
-      they should pay for the privilege."
-    </blockquote>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-demo.tsx b/apps/www/registry/new-york/examples/typography-demo.tsx
deleted file mode 100644
index dfc6deebd50..00000000000
--- a/apps/www/registry/new-york/examples/typography-demo.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-export default function TypographyDemo() {
-  return (
-    <div>
-      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-        The Joke Tax Chronicles
-      </h1>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        Once upon a time, in a far-off land, there was a very lazy king who
-        spent all day lounging on his throne. One day, his advisors came to him
-        with a problem: the kingdom was running out of money.
-      </p>
-      <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-        The King's Plan
-      </h2>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        The king thought long and hard, and finally came up with{" "}
-        <a
-          href="#"
-          className="font-medium text-primary underline underline-offset-4"
-        >
-          a brilliant plan
-        </a>
-        : he would tax the jokes in the kingdom.
-      </p>
-      <blockquote className="mt-6 border-l-2 pl-6 italic">
-        "After all," he said, "everyone enjoys a good joke, so it's only fair
-        that they should pay for the privilege."
-      </blockquote>
-      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-        The Joke Tax
-      </h3>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        The king's subjects were not amused. They grumbled and complained, but
-        the king was firm:
-      </p>
-      <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
-        <li>1st level of puns: 5 gold coins</li>
-        <li>2nd level of jokes: 10 gold coins</li>
-        <li>3rd level of one-liners : 20 gold coins</li>
-      </ul>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        As a result, people stopped telling jokes, and the kingdom fell into a
-        gloom. But there was one person who refused to let the king's
-        foolishness get him down: a court jester named Jokester.
-      </p>
-      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-        Jokester's Revolt
-      </h3>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        Jokester began sneaking into the castle in the middle of the night and
-        leaving jokes all over the place: under the king's pillow, in his soup,
-        even in the royal toilet. The king was furious, but he couldn't seem to
-        stop Jokester.
-      </p>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        And then, one day, the people of the kingdom discovered that the jokes
-        left by Jokester were so funny that they couldn't help but laugh. And
-        once they started laughing, they couldn't stop.
-      </p>
-      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
-        The People's Rebellion
-      </h3>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        The people of the kingdom, feeling uplifted by the laughter, started to
-        tell jokes and puns again, and soon the entire kingdom was in on the
-        joke.
-      </p>
-      <div className="my-6 w-full overflow-y-auto">
-        <table className="w-full">
-          <thead>
-            <tr className="m-0 border-t p-0 even:bg-muted">
-              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-                King's Treasury
-              </th>
-              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-                People's happiness
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr className="m-0 border-t p-0 even:bg-muted">
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Empty
-              </td>
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Overflowing
-              </td>
-            </tr>
-            <tr className="m-0 border-t p-0 even:bg-muted">
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Modest
-              </td>
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Satisfied
-              </td>
-            </tr>
-            <tr className="m-0 border-t p-0 even:bg-muted">
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Full
-              </td>
-              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-                Ecstatic
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        The king, seeing how much happier his subjects were, realized the error
-        of his ways and repealed the joke tax. Jokester was declared a hero, and
-        the kingdom lived happily ever after.
-      </p>
-      <p className="leading-7 [&:not(:first-child)]:mt-6">
-        The moral of the story is: never underestimate the power of a good laugh
-        and always be careful of bad ideas.
-      </p>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-h1.tsx b/apps/www/registry/new-york/examples/typography-h1.tsx
deleted file mode 100644
index 0ee8f5dd4b7..00000000000
--- a/apps/www/registry/new-york/examples/typography-h1.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function TypographyH1() {
-  return (
-    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-      Taxing Laughter: The Joke Tax Chronicles
-    </h1>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-h2.tsx b/apps/www/registry/new-york/examples/typography-h2.tsx
deleted file mode 100644
index ea794416542..00000000000
--- a/apps/www/registry/new-york/examples/typography-h2.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function TypographyH2() {
-  return (
-    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
-      The People of the Kingdom
-    </h2>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-h3.tsx b/apps/www/registry/new-york/examples/typography-h3.tsx
deleted file mode 100644
index 4e8a1859cf5..00000000000
--- a/apps/www/registry/new-york/examples/typography-h3.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function TypographyH3() {
-  return (
-    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
-      The Joke Tax
-    </h3>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-h4.tsx b/apps/www/registry/new-york/examples/typography-h4.tsx
deleted file mode 100644
index 583516625ea..00000000000
--- a/apps/www/registry/new-york/examples/typography-h4.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function TypographyH4() {
-  return (
-    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
-      People stopped telling jokes
-    </h4>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-inline-code.tsx b/apps/www/registry/new-york/examples/typography-inline-code.tsx
deleted file mode 100644
index fbbc96ba688..00000000000
--- a/apps/www/registry/new-york/examples/typography-inline-code.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function TypographyInlineCode() {
-  return (
-    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
-      @radix-ui/react-alert-dialog
-    </code>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-large.tsx b/apps/www/registry/new-york/examples/typography-large.tsx
deleted file mode 100644
index 944f4478d38..00000000000
--- a/apps/www/registry/new-york/examples/typography-large.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function TypographyLarge() {
-  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
-}
diff --git a/apps/www/registry/new-york/examples/typography-lead.tsx b/apps/www/registry/new-york/examples/typography-lead.tsx
deleted file mode 100644
index aac39ea29ed..00000000000
--- a/apps/www/registry/new-york/examples/typography-lead.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyLead() {
-  return (
-    <p className="text-xl text-muted-foreground">
-      A modal dialog that interrupts the user with important content and expects
-      a response.
-    </p>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-list.tsx b/apps/www/registry/new-york/examples/typography-list.tsx
deleted file mode 100644
index a814f661f0b..00000000000
--- a/apps/www/registry/new-york/examples/typography-list.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function TypographyList() {
-  return (
-    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
-      <li>1st level of puns: 5 gold coins</li>
-      <li>2nd level of jokes: 10 gold coins</li>
-      <li>3rd level of one-liners : 20 gold coins</li>
-    </ul>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-muted.tsx b/apps/www/registry/new-york/examples/typography-muted.tsx
deleted file mode 100644
index 545dcfc74f1..00000000000
--- a/apps/www/registry/new-york/examples/typography-muted.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function TypographyMuted() {
-  return (
-    <p className="text-sm text-muted-foreground">Enter your email address.</p>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-p.tsx b/apps/www/registry/new-york/examples/typography-p.tsx
deleted file mode 100644
index 88fd4795485..00000000000
--- a/apps/www/registry/new-york/examples/typography-p.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function TypographyP() {
-  return (
-    <p className="leading-7 [&:not(:first-child)]:mt-6">
-      The king, seeing how much happier his subjects were, realized the error of
-      his ways and repealed the joke tax.
-    </p>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-small.tsx b/apps/www/registry/new-york/examples/typography-small.tsx
deleted file mode 100644
index 822019d1df0..00000000000
--- a/apps/www/registry/new-york/examples/typography-small.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function TypographySmall() {
-  return (
-    <small className="text-sm font-medium leading-none">Email address</small>
-  )
-}
diff --git a/apps/www/registry/new-york/examples/typography-table.tsx b/apps/www/registry/new-york/examples/typography-table.tsx
deleted file mode 100644
index 0698c475194..00000000000
--- a/apps/www/registry/new-york/examples/typography-table.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-export default function TypographyTable() {
-  return (
-    <div className="my-6 w-full overflow-y-auto">
-      <table className="w-full">
-        <thead>
-          <tr className="m-0 border-t p-0 even:bg-muted">
-            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-              King's Treasury
-            </th>
-            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
-              People's happiness
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr className="m-0 border-t p-0 even:bg-muted">
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Empty
-            </td>
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Overflowing
-            </td>
-          </tr>
-          <tr className="m-0 border-t p-0 even:bg-muted">
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Modest
-            </td>
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Satisfied
-            </td>
-          </tr>
-          <tr className="m-0 border-t p-0 even:bg-muted">
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Full
-            </td>
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
-              Ecstatic
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/ui/text.tsx b/apps/www/registry/new-york/ui/text.tsx
new file mode 100644
index 00000000000..2c54e7b6b41
--- /dev/null
+++ b/apps/www/registry/new-york/ui/text.tsx
@@ -0,0 +1,102 @@
+import * as React from "react"
+import { forwardRef } from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const shared = {
+  p: "leading-7 [&:not(:first-child)]:mt-6",
+  l: "my-6 ml-6 list-disc [&>li]:mt-2",
+}
+
+const textVariants = cva("", {
+  defaultVariants: { variant: "p" },
+  variants: {
+    variant: {
+      a: "text-primary font-medium underline underline-offset-4",
+      blockquote: "mt-6 border-l-2 pl-6 italic",
+      h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+      h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+      h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+      h5: shared.p,
+      p: shared.p,
+      small: "text-sm font-medium leading-none",
+      ul: shared.l,
+      ol: shared.l,
+      code: "bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+      lead: "text-muted-foreground text-xl",
+      large: "text-lg font-semibold",
+      muted: "text-muted-foreground text-sm",
+    },
+  },
+})
+
+interface AnchorProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof textVariants> {
+  variant: "a"
+  asChild?: boolean
+  ref?: React.Ref<HTMLAnchorElement>
+}
+
+interface BaseProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof textVariants> {
+  variant?: Exclude<VariantProps<typeof textVariants>["variant"], "a">
+  asChild?: boolean
+  ref?: React.Ref<HTMLElement>
+}
+
+type TextProps = AnchorProps | BaseProps
+
+const variantToTag: Record<
+  NonNullable<VariantProps<typeof textVariants>["variant"]>,
+  HTMLElement["tagName"]
+> = {
+  a: "a",
+  blockquote: "blockquote",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  p: "p",
+  small: "small",
+  code: "code",
+  ul: "ul",
+  ol: "ol",
+  lead: "p",
+  large: "div",
+  muted: "p",
+}
+
+const Text = forwardRef<HTMLAnchorElement | HTMLElement, TextProps>(
+  (props, ref) => {
+    const { variant, asChild, className, ...rest } = props
+    const Component = asChild ? Slot : variantToTag[variant ?? "p"]
+
+    if (variant === "a") {
+      return (
+        <Component
+          ref={ref}
+          className={cn(textVariants({ variant }), className)}
+          {...rest}
+        />
+      )
+    }
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(textVariants({ variant }), className)}
+        {...rest}
+      />
+    )
+  }
+)
+
+Text.displayName = "Text"
+
+export { Text, textVariants }
diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts
index fde9da6d44e..cd3b7d820d9 100644
--- a/apps/www/registry/registry-examples.ts
+++ b/apps/www/registry/registry-examples.ts
@@ -1403,141 +1403,11 @@ export const examples: Registry = [
     ],
   },
   {
-    name: "typography-blockquote",
+    name: "text-demo",
     type: "registry:example",
     files: [
       {
-        path: "examples/typography-blockquote.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-demo",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-demo.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-h1",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-h1.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-h2",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-h2.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-h3",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-h3.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-h4",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-h4.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-inline-code",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-inline-code.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-large",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-large.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-lead",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-lead.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-list",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-list.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-muted",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-muted.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-p",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-p.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-small",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-small.tsx",
-        type: "registry:example",
-      },
-    ],
-  },
-  {
-    name: "typography-table",
-    type: "registry:example",
-    files: [
-      {
-        path: "examples/typography-table.tsx",
+        path: "examples/text-demo.tsx",
         type: "registry:example",
       },
     ],