typography-demo.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typography-demo",
  "files": [
    {
      "path": "registry/new-york-v4/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 text-balance\">\n        Taxing Laughter: The Joke Tax Chronicles\n      </h1>\n      <p className=\"text-muted-foreground text-xl 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&apos;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=\"text-primary font-medium 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        &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so\n        it&apos;s only fair that they should pay for the privilege.&quot;\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&apos;s subjects were not amused. They grumbled and complained,\n        but 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&apos;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&apos;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&apos;s pillow, in his\n        soup, even in the royal toilet. The king was furious, but he\n        couldn&apos;t seem to 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&apos;t help but laugh.\n        And once they started laughing, they couldn&apos;t stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People&apos;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=\"even:bg-muted m-0 border-t p-0\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King&apos;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&apos;s happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\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=\"even:bg-muted m-0 border-t p-0\">\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=\"even:bg-muted m-0 border-t p-0\">\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"
    }
  ],
  "type": "registry:example"
}