Typography
Styles for headings, paragraphs, lists, etc. No typography styles ship by default — this page shows how to style your text with utility classes.
Last updated August 8, 2026
Copied from shadcn/ui.
- Replaced physical text-left/ml-6/border-l-2/pl-6/text-left th alignment with logical text-start/ms-6/border-s-2/ps-6 throughout
Overview
کتابخانه رابط کاربری فارسی
کامپوننتهایی که برای زبان فارسی و راستبهچپ ساخته شدهاند، آماده برای کپی در پروژه شما.
نصب و راهاندازی
برای شروع، مستندات نصب را مطالعه کنید.
"راستبهچپ بهعنوان پیشفرض، نه یک افترتات."
h1
Taxing Laughter: The Joke Tax Chronicles
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
Taxing Laughter: The Joke Tax Chronicles
</h1>h2
The King's Plan
<h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
The King's Plan
</h2>h3
The Joke Tax
<h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
The Joke Tax
</h3>p
The king's subjects were not amused. They grumbled and complained, but the king was firm.
<p className="text-start leading-7 [&:not(:first-child)]:mt-6">
The king's subjects were not amused.
</p>blockquote
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
<blockquote className="mt-6 border-s-2 ps-6 italic">
"After all," he said, "everyone enjoys a good joke..."
</blockquote>list
- 1st level of puns: 5 gold coins
- 2nd level of jokes: 10 gold coins
- 3rd level of one-liners: 20 gold coins
<ul className="my-6 ms-6 list-disc text-start [&>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>Inline code
On your keyboard, press ⌘K to open the command menu.
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
@radix-ui/react-alert-dialog
</code>lead / large / small / muted
A modal dialog that interrupts the user with important content.
Enter your email address.
<p className="text-start text-xl text-muted-foreground">Lead</p>
<div className="text-start text-lg font-semibold">Large</div>
<small className="text-start text-sm leading-none font-medium">Small</small>
<p className="text-start text-sm text-muted-foreground">Muted</p>table
| King's Treasury | People's happiness |
|---|---|
| Empty | Overflowing |
<table className="w-full text-start">
<thead>
<tr>
<th className="border px-4 py-2 text-start font-bold">King's Treasury</th>
</tr>
</thead>
</table>RTL
Because every example above uses logical alignment (text-start) and logical spacing (ms-*, border-s-*), the same classes render correctly with no changes when dir="rtl" — see the Farsi example under Overview above.