What is the difference between Default and New York style in shadcn/ui?

After successfully releasing the shadcn/ui kit for Figma based on the Default style of shadcn/ui, we embarked on a journey to create a version of the UI kit based on the New York style.

With just little information about the differences between these two shadcn/ui style choices, we decided to take matters into our own hands and explore the details of each component. We carefully analyzed every shadcn/ui component to spot the differences and ensure each component in Figma is a pixel-perfect twin of its code counterpart.

In this article, I'll briefly uncover the differences we discovered between the Default and New York styles, helping you choose the right one for your project.

Introduction

The shadcn/ui is a popular, open-source collection of beautifully designed and accessible React components. Built with Radix UI and Tailwind CSS, shadcn/ui offers developers a flexible and customizable toolkit for creating modern web applications. One of its standout features is the ability to choose between two distinct styles: Default and New York. While both styles share the same component structure, they offer unique visual aesthetics to suit different project needs. In this article, we'll explore the key differences between these two styles, helping you make an informed decision for your next project.

TLDR;

Overall, we’ve noticed significant differences in the areas listed below. I further explain and illustrate the differences in the following paragraphs.

• Components height
• Shadows application
• Card title size
• Focus states
• Border radii
• Small differences in some components

So what are the differences?

Components height

• The Default style components, such as buttons and form inputs, use the h-10 class, which makes them 40 px high.
• The New York style is more condensed. These components use the TailwindCSS h-9 class, which is 36 px high.

Shadows application

• The Default style components, such as buttons and form inputs, are flat and don’t use shadows.
• The New York style uses shadow-sm class in components such as buttons, inputs, select, and date pickers.

Card title size

• In the Default style, the Card component’s title is set to 1.5 rem, using the text2xl TailwindCSS class.
• In the New York style, the Card title is set to a base font size, which is 1 rem.

Focus states

• In the Default style, the outline width in the focus ring of the components is set to 2 px, and the offset is also set to 2 px.
• In the New York style, the outline width in the focus ring of the components is set to 1 px, and the offset is set to 0 px.

Border radii

There are also some differences in border-radius used in some components. Here’s the list of the components and how their border-radius differs:

Default:

• Card: rounded-lg (8 px)
• Badge: rounded-full
• Carousel: rounded-lg (8px)
• Tabs: rounded-md (6px)
• Tabs Trigger: rounded-sm (2px)

New York:

• Card: rounded-xl (12 px)
• Badge: rounded-md (6px)
• Carousel: rounded-xl (12px)
• Tabs: rounded-lg (8px)
• Tabs Trigger: rounded-md (6px)

Small details found in components:

Switch

• In the Default style, the switch is h-6 high and w-11 wide, and the "thumb" is h-5 and w-5.
• In the New York style, the switch is h-5 high and w-9 wide, with the "thumb" sized at h-4 and w-4.

Tooltip

• In the Default style, the tooltip has a background of bg-popover, text color text-popover-foreground, and an additional shadow shadow-md.
• In the New York style, the tooltip has a background of bg-primary, and text color text-primary-foreground.

Radio Button

• In the Default style, the radio button uses a Circle icon.
• In the New York style, the radio button uses a Check icon instead.

Select menu item

• In the Default style, in the Select Menu Item component, the check icon of the selected element is placed on the left side of the text.
• In the New York style, this icon is on the right side.

Which style you should use?

As you can see, there are some significant differences between these shadcn/ui styles. Of course, you can also customize both styles to match your needs. When considering which style to use, consider the overall aesthetic and user experience you want to achieve in your project.

Default style might be more suitable when:

• You prefer a more spacious and traditional UI layout
• You want larger, more prominent text elements
• You're aiming for a flatter design without shadows
• You want a more subtle focus state

New York style could be better when:

• You need a more compact UI design
• You prefer a slightly more modern look with subtle shadows
• You want a more prominent focus state for accessibility
• You're looking for a sleeker, more refined appearance

Choosing between the Default and New York styles will ultimately depend on your project's specific requirements, target audience, and overall design direction. Both styles are fully customizable, so you can start with either style as a foundation and tailor it to perfectly match your project's unique aesthetic and functional needs. This customizability allows you to leverage the strengths of each style while still maintaining the ability to create a distinct and cohesive user interface that aligns with your brand identity and user expectations.

Get both styles in shadcn/ui kit for Figma

In the shadcn/ui kit for Figma, you will find both styles, Default and New York as a separate files. We provide frequent updates to make sure that the Figma kit is perfectly aligned with the code version of shadcn/ui. You can learn more about the UI kit and preview it on our preview page.