Typography in shadcn/ui

[00:00 - 00:10] What is typography? Typography determines how text looks to the reader and how the words literally appear on a page or screen.

[00:11 - 00:24] In the web context, we control typography through CSS and HTML properties like the font size, the font weight, or for example letter spacing. Now shadcn/ui offers a variety of typography components that we are going to use throughout the course.

[00:25 - 00:38] The components are available for copying and pasting, and meaning they cannot be installed via the CLI like other components. Now the last thing is that tailwind CSS is the only dependency you'd need for creating those components.

[00:39 - 00:47] Here is an example of an H1 component, the shadcn/ui offers. You can see the tailwind class names like the font, text, or ball or the tracking type one.

[00:48 - 01:07] You are going to see how this component looks like in a few seconds. The available typography components in shadcn/ui are headings like the H1 we just saw, a paragraph style with lead, large, and small modifiers, a block what, a list, a table, and a muted style which is a spatial shadcn/ui column.

[01:08 - 01:15] Now let's implement the components inside the application we created in the previous module. We'll start with the headings.

[01:16 - 01:28] First, copy the heading components from the course text. So in the course text of this lesson, go to implementing the styles header and copy the heading code.

[01:29 - 01:44] Then open your editor and navigate to the app folder, create a new file called typography.tsx under components/ui. Typography.tsx under components UI folders.

[01:45 - 01:51] Now paste the adding components that you just copied. The next step is to add the paragraph components.

[01:52 - 02:00] So scroll down and you can see the paragraph components code. Paste them the same as you did for the headings.

[02:01 - 02:12] We just added the paragraph, the lead, the large, the small and the muted components. A word about the muted style.

[02:13 - 02:23] The muted modifier is formal, soft, subtle, and less bite elements and it's a shadcn/ui feature. You'll learn about shadcn/ui teaming and colors in the next module.

[02:24 - 02:38] Now implement the Blockquote and the List components. And it's time to create the showcase page.

[02:39 - 02:46] You'd need to create a new route in the application for that. So under the app folder, create a new folder called typography.

[02:47 - 02:58] Inside of it, create a file called page.tsx. Now copy and paste the showcase code.

[02:59 - 03:19] Then open your favorite terminal, make sure you are inside the project folder, the project we created in the previous module, and then run the npm rundev command. You should expect to see the ready check mark after you've run the command.

[03:20 - 03:33] Then navigate to http://localhost:3000/typography in your favorite browser. You should now see the complete styles for the typography components.

[03:34 - 03:42] So here we have the headings, we have the paragraph, lead, large and small, the muted one. We have a blockwot.

[03:43 - 03:51] And then we have a list to summarize. You've just learned about creating your first page on the app.

[03:52 - 03:59] You've learned about the typography components in shadcn/ui, you've also implemented them. And in the next lesson, you'll create the news site's layout.