Shadcn/ui Styles
Learn what shadcn/ui styles are, how they work, and how to use them
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
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.
[00:00 - 00:10] In this lesson, you're going to learn about shadcn/ui styles. If themes are responsible for the colors on a website, then styles are the visual foundation.
[00:11 - 00:18] The shapes, icons and animations. shadcn/ui offers two styles by default, the default one and the New York one.
[00:19 - 00:30] Each style provides the same set of components, but with different styles and different design. And practically with different class names, we'll talk more about it in a second.
[00:31 - 00:43] Notice the difference between the default, on the left and the New York styles. The New York style comes with smaller buttons, cars and shadows, and a new set of icons from Radix.
[00:44 - 00:58] You can select the style on the project level when you need a new project, or you can also select when you copy components from the docs. Right now it's not available to install specific components with different styles.
[00:59 - 01:06] The style is set on a project level. Let's see a few examples.
[01:07 - 01:19] So, take the switch component, for example, I'm looking at the docs. When you switch between the default and the New York style, you can notice the different border, the switch becoming more narrow.
[01:20 - 01:31] Let's go to the tabs components as well. And you can look at the New York style, which is a bit of more narrow and sharp buttons.
[01:32 - 01:40] And the default ones. The New York styles, which has a bit more rounded and smaller narrow buttons.
[01:41 - 01:48] Then the default one, which have a bit more larger and sharper buttons. So how does the styles work behind the scenes?
[01:49 - 01:53] The difference is simple. The components, class names are different between styles.
[01:54 - 02:01] The structure and functionality stays the same. But what's changed is the shapes, icons and animation.
[02:02 - 02:11] Let's look at the tabs source code in shadcn/ui, between the New York and default styles. I'm looking at the tabs source code in the shadcn/ui repository.
[02:12 - 02:17] And when looking at the tabs list, for example, you can see that the height is different. It's pretty minor, but it's still different.
[02:18 - 02:31] The H10 and the H9. And the rounded, the border radius, which is the rounded class name in tailwind is MD for the default style and large for the New York style.
[02:32 - 02:48] And if you go to the tabs trigger, for example, you can see the difference between the rounded small medium to the rounded medium class name. So I really encourage you to try to go to shadcn/ui source code and find the difference yourself between components in different styles.
[02:49 - 02:59] There is a link in the text below. And to summarize, the structure and color are the same between both styles, but the visual foundation will be different.
[03:00 - 03:09] In the end of this module, there'll be an exercise to create a new style. And in the next lesson, you learn about how to customize the default animations of shadcn/ui.