[{"data":1,"prerenderedAt":408},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fcomponents\u002Ftypography":66,"surround-\u002Fdocs\u002Fcomponents\u002Ftypography":405},[4],{"title":5,"path":6,"stem":7,"children":8,"page":14},"Docs","\u002Fdocs","docs",[9,16,20,60],{"title":10,"path":11,"stem":12,"navigation":13,"new":14,"soon":14,"hide":14,"type":15,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",null,false,"page",{"title":17,"path":18,"stem":19,"navigation":13,"new":14,"soon":14,"hide":14,"type":15,"children":-1},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",{"title":21,"path":22,"stem":23,"children":24,"navigation":13,"new":14,"soon":14,"hide":14,"type":59},"Components","\u002Fdocs\u002Fcomponents","docs\u002F03.components",[25,31,35,39,43,47,51,55],{"title":26,"path":27,"stem":28,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Autocomplete","\u002Fdocs\u002Fcomponents\u002Fautocomplete","docs\u002F03.components\u002F01.autocomplete",true,"component",{"title":32,"path":33,"stem":34,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Show More","\u002Fdocs\u002Fcomponents\u002Fshow-more","docs\u002F03.components\u002F02.show-more",{"title":36,"path":37,"stem":38,"navigation":13,"new":29,"soon":14,"hide":14,"type":30,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002F03.components\u002F03.typography",{"title":40,"path":41,"stem":42,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Code Block","\u002Fdocs\u002Fcomponents\u002Fcode-block","docs\u002F03.components\u002Fcode-block",{"title":44,"path":45,"stem":46,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Code Snippet","\u002Fdocs\u002Fcomponents\u002Fcode-snippet","docs\u002F03.components\u002Fcode-snippet",{"title":48,"path":49,"stem":50,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Guided Tour","\u002Fdocs\u002Fcomponents\u002Fguided-tour","docs\u002F03.components\u002Fguided-tour",{"title":52,"path":53,"stem":54,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Meter","\u002Fdocs\u002Fcomponents\u002Fmeter","docs\u002F03.components\u002Fmeter",{"title":56,"path":57,"stem":58,"navigation":13,"new":14,"soon":29,"hide":14,"type":30,"children":-1},"Star Rating","\u002Fdocs\u002Fcomponents\u002Fstar-rating","docs\u002F03.components\u002Fstar-rating","group",{"title":61,"path":62,"stem":63,"children":64,"navigation":13,"new":14,"soon":29,"hide":29,"type":59},"Animations","\u002Fdocs\u002Fanimation","docs\u002F04.animation\u002Findex",[65],{"title":61,"path":62,"stem":63,"navigation":13,"new":14,"soon":29,"hide":29,"type":15,"children":-1},{"id":67,"title":36,"body":68,"component":14,"description":398,"extension":399,"hide":14,"lastUpdated":400,"links":13,"meta":401,"navigation":13,"new":29,"path":37,"rawbody":402,"seo":403,"soon":14,"stem":38,"__hash__":404},"content\u002Fdocs\u002F03.components\u002F03.typography.md",{"type":69,"value":70,"toc":378},"minimark",[71,75,83,87,90,92,95,98,101,104,107,110,113,116,119,121,124,127,130,133,136,139,142,146,149,153,156,160,163,167,170,174,177,181,200,357,360,368],[72,73,74],"p",{},"We do not ship any typography styles by default. This page is an example of how you can use utility classes to style your text.",[76,77],"component-preview",{"name":78,":hideCode":79,"className":80,"description":82},"TypographyDemo","true",[81],"[&_.preview]:!h-auto","A collection of typographic elements.",[84,85,86],"h2",{"id":86},"h1",[76,88],{"name":89},"TypographyH1",[84,91,84],{"id":84},[76,93],{"name":94},"TypographyH2",[84,96,97],{"id":97},"h3",[76,99],{"name":100},"TypographyH3",[84,102,103],{"id":103},"h4",[76,105],{"name":106},"TypographyH4",[84,108,109],{"id":109},"h5",[76,111],{"name":112},"TypographyH5",[84,114,115],{"id":115},"h6",[76,117],{"name":118},"TypographyH6",[84,120,72],{"id":72},[76,122],{"name":123},"TypographyP",[84,125,126],{"id":126},"blockquote",[76,128],{"name":129},"TypographyBlockquote",[84,131,132],{"id":132},"table",[76,134],{"name":135},"TypographyTable",[84,137,138],{"id":138},"list",[76,140],{"name":141},"TypographyList",[84,143,145],{"id":144},"inline-code","Inline code",[76,147],{"name":148},"TypographyInlineCode",[84,150,152],{"id":151},"lead","Lead",[76,154],{"name":155},"TypographyLead",[84,157,159],{"id":158},"large","Large",[76,161],{"name":162},"TypographyLarge",[84,164,166],{"id":165},"small","Small",[76,168],{"name":169},"TypographySmall",[84,171,173],{"id":172},"muted","Muted",[76,175],{"name":176},"TypographyMuted",[84,178,180],{"id":179},"typography-scale","Typography Scale",[72,182,183,184,188,189,188,192,195,196,199],{},"Use these raw text sizing utilities anywhere you need them. They only define ",[185,186,187],"code",{},"font-size",", ",[185,190,191],{},"line-height",[185,193,194],{},"letter-spacing",", and ",[185,197,198],{},"font-weight",".",[132,201,202,218],{},[203,204,205],"thead",{},[206,207,208,212,215],"tr",{},[209,210,211],"th",{},"Size",[209,213,214],{},"Classes",[209,216,217],{},"Use Case",[219,220,221,244,263,279,295,311,327,342],"tbody",{},[206,222,223,227,241],{},[224,225,226],"td",{},"48px",[224,228,229,232,233,236,237,240],{},[185,230,231],{},"text-[32px] leading-[1.1] tracking-[-0.03em] font-bold"," (sm: ",[185,234,235],{},"text-[40px]",", md: ",[185,238,239],{},"text-[48px]",")",[224,242,243],{},"Main page titles",[206,245,246,249,260],{},[224,247,248],{},"36px",[224,250,251,232,254,236,257,240],{},[185,252,253],{},"text-[28px] leading-[1.2] tracking-[-0.02em] font-bold",[185,255,256],{},"text-[32px]",[185,258,259],{},"text-[36px]",[224,261,262],{},"Section headers",[206,264,265,268,276],{},[224,266,267],{},"24px",[224,269,270,232,273,240],{},[185,271,272],{},"text-[22px] leading-[1.2] tracking-[-0.02em] font-bold",[185,274,275],{},"text-2xl",[224,277,278],{},"Card titles",[206,280,281,284,292],{},[224,282,283],{},"22px",[224,285,286,232,289,240],{},[185,287,288],{},"text-xl leading-[1.3] tracking-[-0.01em] font-bold",[185,290,291],{},"text-[22px]",[224,293,294],{},"Sub-sections",[206,296,297,300,308],{},[224,298,299],{},"20px",[224,301,302,232,305,240],{},[185,303,304],{},"text-[18px] leading-[1.3] tracking-[-0.01em] font-bold",[185,306,307],{},"text-xl",[224,309,310],{},"Sub-sub-sections",[206,312,313,316,324],{},[224,314,315],{},"16px",[224,317,318,232,321,240],{},[185,319,320],{},"text-[14px] leading-[1.3] tracking-[-0.01em] font-bold",[185,322,323],{},"text-base",[224,325,326],{},"Small headings",[206,328,329,332,339],{},[224,330,331],{},"Base",[224,333,334,232,337,240],{},[185,335,336],{},"text-sm leading-7",[185,338,323],{},[224,340,341],{},"Body text",[206,343,344,346,354],{},[224,345,166],{},[224,347,348,232,351,240],{},[185,349,350],{},"text-xs",[185,352,353],{},"text-sm",[224,355,356],{},"Labels, captions",[84,358,17],{"id":359},"installation",[72,361,362,363,367],{},"Want automatic styling on native HTML elements? Add these styles to your global CSS. This applies the scale classes above ",[364,365,366],"strong",{},"plus"," structural styles like spacing, borders, and transitions.",[369,370,376],"pre",{"className":371,"code":373,"language":374,"meta":375},[372],"language-css","@layer components {\n  h1 {\n    @apply scroll-m-20 text-4xl leading-[1.1] tracking-[-0.03em] font-bold sm:text-5xl;\n  }\n\n  h2 {\n    @apply scroll-m-20 border-b pb-2 text-3xl leading-[1.2] tracking-[-0.02em] font-bold transition-colors first:mt-0 sm:text-[32px] md:text-4xl;\n  }\n\n  h3 {\n    @apply scroll-m-20 text-[22px] leading-[1.2] tracking-[-0.02em] font-bold sm:text-2xl;\n  }\n\n  h4 {\n    @apply scroll-m-20 text-xl leading-[1.3] tracking-[-0.01em] font-bold sm:text-[22px];\n  }\n\n  h5 {\n    @apply scroll-m-20 text-[18px] leading-[1.3] tracking-[-0.01em] font-bold sm:text-xl;\n  }\n\n  h6 {\n    @apply scroll-m-20 text-[14px] leading-[1.3] tracking-[-0.01em] font-bold sm:text-base;\n  }\n\n  p {\n    @apply leading-7 not-first:mt-6;\n  }\n\n  blockquote {\n    @apply mt-4 border-l-2 pl-4 text-base italic sm:mt-6 sm:pl-6;\n  }\n\n  ul {\n    @apply my-4 ml-4 list-disc text-base [&>li]:mt-2 sm:my-6 sm:ml-6 sm:text-lg;\n  }\n\n  table {\n    @apply w-full min-w-[320px];\n  }\n\n  thead {\n    @apply [&>tr]:border-b;\n  }\n\n  th {\n    @apply whitespace-nowrap border px-3 py-2 text-left font-bold sm:px-4 [[align=center]]:text-center [[align=right]]:text-right;\n  }\n\n  td {\n    @apply border px-3 py-2 text-left sm:px-4 [[align=center]]:text-center [[align=right]]:text-right;\n  }\n\n  tbody tr {\n    @apply m-0 border-t p-0 even:bg-muted;\n  }\n\n  code {\n    @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold;\n  }\n\n  .lead {\n    @apply text-lg text-muted-foreground sm:text-xl md:text-2xl;\n  }\n\n  .large {\n    @apply text-lg font-semibold sm:text-xl md:text-2xl;\n  }\n\n  .small {\n    @apply text-sm font-medium leading-none sm:text-base md:text-lg;\n  }\n\n  .muted {\n    @apply text-muted-foreground;\n  }\n}\n","css","",[185,377,373],{"__ignoreMap":375},{"title":375,"searchDepth":379,"depth":379,"links":380},2,[381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397],{"id":86,"depth":379,"text":86},{"id":84,"depth":379,"text":84},{"id":97,"depth":379,"text":97},{"id":103,"depth":379,"text":103},{"id":109,"depth":379,"text":109},{"id":115,"depth":379,"text":115},{"id":72,"depth":379,"text":72},{"id":126,"depth":379,"text":126},{"id":132,"depth":379,"text":132},{"id":138,"depth":379,"text":138},{"id":144,"depth":379,"text":145},{"id":151,"depth":379,"text":152},{"id":158,"depth":379,"text":159},{"id":165,"depth":379,"text":166},{"id":172,"depth":379,"text":173},{"id":179,"depth":379,"text":180},{"id":359,"depth":379,"text":17},"Styles for headings, paragraphs, lists...etc","md","2026-04-14T18:14:16.944Z",{},"---\ntitle: Typography\ndescription: Styles for headings, paragraphs, lists...etc\ncomponent: false\nnew: true\n---\n\nWe do not ship any typography styles by default. This page is an example of how you can use utility classes to style your text.\n\n::component-preview\n---\nname: TypographyDemo\ndescription: A collection of typographic elements.\nclass: \"[&_.preview]:!h-auto\"\nhideCode: true\n---\n::\n\n## h1\n\n::component-preview\n---\nname: TypographyH1\n---\n::\n\n## h2\n\n::component-preview\n---\nname: TypographyH2\n---\n::\n\n## h3\n\n::component-preview\n---\nname: TypographyH3\n---\n::\n\n## h4\n\n::component-preview\n---\nname: TypographyH4\n---\n::\n\n## h5\n\n::component-preview\n---\nname: TypographyH5\n---\n::\n\n## h6\n\n::component-preview\n---\nname: TypographyH6\n---\n::\n\n## p\n\n::component-preview\n---\nname: TypographyP\n---\n::\n\n## blockquote\n\n::component-preview\n---\nname: TypographyBlockquote\n---\n::\n\n## table\n\n::component-preview\n---\nname: TypographyTable\n---\n::\n\n## list\n\n::component-preview\n---\nname: TypographyList\n---\n::\n\n## Inline code\n\n::component-preview\n---\nname: TypographyInlineCode\n---\n::\n\n## Lead\n\n::component-preview\n---\nname: TypographyLead\n---\n::\n\n## Large\n\n::component-preview\n---\nname: TypographyLarge\n---\n::\n\n## Small\n\n::component-preview\n---\nname: TypographySmall\n---\n::\n\n## Muted\n\n::component-preview\n---\nname: TypographyMuted\n---\n::\n\n## Typography Scale\n\nUse these raw text sizing utilities anywhere you need them. They only define `font-size`, `line-height`, `letter-spacing`, and `font-weight`.\n\n| Size | Classes | Use Case |\n|------|---------|----------|\n| 48px | `text-[32px] leading-[1.1] tracking-[-0.03em] font-bold` (sm: `text-[40px]`, md: `text-[48px]`) | Main page titles |\n| 36px | `text-[28px] leading-[1.2] tracking-[-0.02em] font-bold` (sm: `text-[32px]`, md: `text-[36px]`) | Section headers |\n| 24px | `text-[22px] leading-[1.2] tracking-[-0.02em] font-bold` (sm: `text-2xl`) | Card titles |\n| 22px | `text-xl leading-[1.3] tracking-[-0.01em] font-bold` (sm: `text-[22px]`) | Sub-sections |\n| 20px | `text-[18px] leading-[1.3] tracking-[-0.01em] font-bold` (sm: `text-xl`) | Sub-sub-sections |\n| 16px | `text-[14px] leading-[1.3] tracking-[-0.01em] font-bold` (sm: `text-base`) | Small headings |\n| Base | `text-sm leading-7` (sm: `text-base`) | Body text |\n| Small | `text-xs` (sm: `text-sm`) | Labels, captions |\n\n## Installation\n\nWant automatic styling on native HTML elements? Add these styles to your global CSS. This applies the scale classes above **plus** structural styles like spacing, borders, and transitions.\n\n```css\n@layer components {\n  h1 {\n    @apply scroll-m-20 text-4xl leading-[1.1] tracking-[-0.03em] font-bold sm:text-5xl;\n  }\n\n  h2 {\n    @apply scroll-m-20 border-b pb-2 text-3xl leading-[1.2] tracking-[-0.02em] font-bold transition-colors first:mt-0 sm:text-[32px] md:text-4xl;\n  }\n\n  h3 {\n    @apply scroll-m-20 text-[22px] leading-[1.2] tracking-[-0.02em] font-bold sm:text-2xl;\n  }\n\n  h4 {\n    @apply scroll-m-20 text-xl leading-[1.3] tracking-[-0.01em] font-bold sm:text-[22px];\n  }\n\n  h5 {\n    @apply scroll-m-20 text-[18px] leading-[1.3] tracking-[-0.01em] font-bold sm:text-xl;\n  }\n\n  h6 {\n    @apply scroll-m-20 text-[14px] leading-[1.3] tracking-[-0.01em] font-bold sm:text-base;\n  }\n\n  p {\n    @apply leading-7 not-first:mt-6;\n  }\n\n  blockquote {\n    @apply mt-4 border-l-2 pl-4 text-base italic sm:mt-6 sm:pl-6;\n  }\n\n  ul {\n    @apply my-4 ml-4 list-disc text-base [&>li]:mt-2 sm:my-6 sm:ml-6 sm:text-lg;\n  }\n\n  table {\n    @apply w-full min-w-[320px];\n  }\n\n  thead {\n    @apply [&>tr]:border-b;\n  }\n\n  th {\n    @apply whitespace-nowrap border px-3 py-2 text-left font-bold sm:px-4 [[align=center]]:text-center [[align=right]]:text-right;\n  }\n\n  td {\n    @apply border px-3 py-2 text-left sm:px-4 [[align=center]]:text-center [[align=right]]:text-right;\n  }\n\n  tbody tr {\n    @apply m-0 border-t p-0 even:bg-muted;\n  }\n\n  code {\n    @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold;\n  }\n\n  .lead {\n    @apply text-lg text-muted-foreground sm:text-xl md:text-2xl;\n  }\n\n  .large {\n    @apply text-lg font-semibold sm:text-xl md:text-2xl;\n  }\n\n  .small {\n    @apply text-sm font-medium leading-none sm:text-base md:text-lg;\n  }\n\n  .muted {\n    @apply text-muted-foreground;\n  }\n}\n```\n\n\n",{"title":36,"description":398},"-ZYXLjjm3CdTOHEhxR06aFk4npjRQycFa3bPZCV7oX0",[406,407],{"title":32,"path":33,"stem":34,"children":-1},{"title":40,"path":41,"stem":42,"children":-1},1776190579459]