Typography in shadcn/ui
Learn about how typography works in shadcn/ui and how it differs from regular shadcn/ui components.
Shadcn/ui offers a variety of styles that you can use to style text in a variety of ways.
In this lesson, you will learn about how Typography works in shadcn/ui.
Typography determines how text looks to the reader and how the words literally appear on a page or screen. You can find the beginner's guide to typography here.
Compared to how you install components with shadcn/ui CLI, the typography of shadcn/ui comes as a suite of pre-made tailwind className you copy-paste into your code without a Radix or any other component alongside it.
For example, this is the h1 style shadcn/ui provides:
xxxxxxxxxx<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"> Lorem Ipsum</h1>Available Styles#
The available styles are:
Heading styles (H1, H2, H3, H4)
Paragraph
Lead
Large
Small
Blockquote
List
Table
Muted
Implementing the Styles#
It's a good idea to keep a consistent style for typography across the app to encapsulate the styles into components. For each typography style shadcn/ui offers, you should create a separate component that you will re-use later on.
Open your favorite code editor, go to the app folder, and create a new file called typography.tsx under components/ui.
This lesson preview is part of the Sleek Next.JS Applications with shadcn/ui course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Sleek Next.JS Applications with shadcn/ui, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
