Shadcn/ui Styles

In this lesson, you're going to learn about Shatsunui styles. If themes are responsible for the colors on a website, then styles are the visual foundation. The shapes, icons and animations. Shatsunui offers two styles by default, the default one and the New York one. 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. 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. 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. The style is set on a project level. Let's see a few examples. 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. 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. And the default ones. The New York styles, which has a bit more rounded and smaller narrow buttons. Then the default one, which have a bit more larger and sharper buttons. So how does the styles work behind the scenes? The difference is simple. The components, class names are different between styles. The structure and functionality stays the same. But what's changed is the shapes, icons and animation. Let's look at the tabs source code in Shads in UI, between the New York and default styles. I'm looking at the tabs source code in the Shads in UI repository. 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. 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. 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 Shads in UI source code and find the difference yourself between components in different styles. 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. 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 Shads in UI.