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

Short answer: there is no longer a choice to make. The Default style in shadcn/ui is deprecated, and New York is the style every new project gets. The official docs now state it plainly — use new-york instead of default. If you are starting a project today, you will get New York whether you think about it or not.

That does not make the question pointless, though. Plenty of codebases still have "style": "default" sitting in their components.json, and that one line explains why their buttons are taller and flatter than the components in the current docs. So this article covers three things: what actually differed between the two styles, what New York looks like in 2026 (it has moved a long way from the original), and what to do if you are still on Default.

TL;DR

• Default is deprecated. New projects use New York. The style field in components.json cannot be changed after initialization.
• Nothing breaks. The registry still serves Default-style components, so existing projects keep working — this was a deprecation, not a removal.
• New York itself has changed substantially since these two styles were compared. Several of the original differences no longer describe the components you get today.
• Styles did not disappear — they were reborn as the named presets in shadcn/create.

What happened to the Default style?

The deprecation landed with the Tailwind v4 release in February 2025. That release converted the theme colors from HSL to OKLCH, moved to the @theme directive, and along the way retired Default. The components.json documentation now carries the note directly: the default style is deprecated, and you should use new-york.

Two practical details are worth knowing.

The style field is set once. It is written when you run init and cannot be changed afterwards. Editing it by hand does not restyle the components you already have — those are plain files in your repo at that point. It only affects what the CLI pulls down next.

Default components are still being served. If you fetch a Default-style component from the registry today, you still get one back:

# Both of these still return a component
curl https://ui.shadcn.com/r/styles/default/button.json
curl https://ui.shadcn.com/r/styles/new-york/button.json

So an old project running npx shadcn@latest add dialog with "style": "default" will keep receiving Default-style components. Deprecated here means "no longer the recommended path," not "switched off."

So what were the differences?

These are the differences we catalogued when we built the New York version of the shadcn/ui kit for Figma — we went through every component to make each Figma component a pixel-perfect twin of its code counterpart. They describe the two styles as they existed side by side, which is still the useful comparison if you are looking at an older codebase.

Component height

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

This is the difference people notice first, and it is the one that survived — New York's 36 px control height is still the baseline today.

Shadows

• Default components are flat and use no shadows.
• New York applies shadow-sm to components such as buttons, inputs, select, and date pickers.

Card title size

• In Default, the Card title is 1.5 rem via text-2xl.
• In New York, the Card title drops to the base font size of 1 rem.

Focus states

• In Default, the focus ring outline is 2 px wide with a 2 px offset.
• In New York, the outline is 1 px with no offset.

Border radii

Default:

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

New York:

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

Smaller component details

Switch

• Default: h-6 by w-11, with an h-5 / w-5 thumb.
• New York: h-5 by w-9, with an h-4 / w-4 thumb.

Tooltip

• Default: bg-popover background, text-popover-foreground text, plus shadow-md.
• New York: bg-primary background with text-primary-foreground text.

Radio button

• Default uses a Circle icon.
• New York uses a Check icon.

Select menu item

• Default puts the check icon for the selected item on the left of the text.
• New York puts it on the right.

What New York looks like in 2026

Here is the part that trips people up. New York won, but it did not stand still — the current components differ from the New York described above in several places. If you are comparing a 2024 tutorial against what the CLI gives you today, this is why they disagree.

Pulling the current Button from the registry shows the shape of the change:

size: {
  default: "h-9 px-4 py-2 has-[>svg]:px-3",
  xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5",
  sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
  lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
  icon: "size-9",
  "icon-xs": "size-6 rounded-md",
  "icon-sm": "size-8",
  "icon-lg": "size-10",
}

A few things changed:

The focus ring is thicker now, not thinner. The original New York used a 1 px ring. The current components use focus-visible:ring-[3px] with focus-visible:ring-ring/50 and a focus-visible:border-ring border change. So the "New York has a subtler focus ring" advice from 2024 is now backwards — today's focus state is the most visible either style has had.

Buttons lost their shadow. The default Button variant is now just bg-primary text-primary-foreground hover:bg-primary/90. Only the outline and secondary variants carry a shadow, and it is shadow-xs rather than shadow-sm.

There are eight size variants instead of four. xs, icon-xs, icon-sm, and icon-lg were added, and icon sizes moved to the size-* utility.

Inputs gained validation states. The current Input still sits at h-9, but it now ships with aria-invalid:border-destructive and aria-invalid:ring-destructive/20 styling built in, plus dark:bg-input/30.

Components are keyed by data-slot. Every part now carries a data-slot attribute — data-slot="card-header", data-slot="input" — which gives you a stable hook for styling internals without reaching for class-name guesswork.

Radix imports were unified. Following the February 2026 update, components import from the single radix-ui package rather than individual @radix-ui/react-* packages:

// Before
import * as SelectPrimitive from "@radix-ui/react-select"

// Now
import { Select as SelectPrimitive } from "radix-ui"

What did carry over intact: the 36 px control height, the rounded-xl Card, and the Card title at base size rather than text-2xl. New York's density won the argument.

If your components.json still says "default"

You do not have to do anything. Default components still install, and a working project is not a problem to be fixed.

But if you want to move to New York, the honest answer is that there is no migration command. Since style cannot be changed after init and your existing components are already files in your repo, moving over means replacing components yourself. In practice:

1. Do it incrementally, not all at once. Update style in components.json to new-york, then re-add components one at a time with npx shadcn@latest add button --overwrite as you touch them.
2. Diff before you accept. The current components use data-slot attributes and a different focus-ring approach. If you have customized a component, the overwrite will discard those edits — check the diff rather than trusting the CLI.
3. Expect layout shift. Controls drop from 40 px to 36 px. Anything you sized against a 40 px button — toolbars, table row heights, hand-tuned paddings — will need a second look.
4. Start with leaf components. Button, Input, and Badge are low-risk. Leave Form, Dialog, and anything you have heavily customized until the pattern is clear.

If you are only after the visual density and not the churn, adjusting your own theme tokens is often the cheaper path. Our guide to how semantic colors work in shadcn/ui covers the token layer, and the Theme Generator will give you a matching set of CSS variables.

Where shadcn/ui styles went next

The two-style era ended, but the idea of a style did not. It came back in shadcn/create as a set of named presets — Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra — each with its own density, radius ramp, and proportions. That is the modern version of the question this article asks: not "Default or New York," but "which style preset matches the product I am building?"

Nova is the closest thing to the direction New York established, which makes it the natural landing spot if you liked where shadcn/ui ended up. If you are weighing the others, we wrote a full guide on how to choose the right shadcn/ui style, and the styles documentation explains how all 8 styles work inside a single Figma file.

FAQ

Is the Default style removed from shadcn/ui?

No — it is deprecated, not removed. The registry still serves Default-style components, so existing projects continue to work. New projects get New York.

Can I change the style in components.json after init?

Not meaningfully. The field is set at initialization and changing it does not touch components you already have. It only affects what the CLI installs from that point on.

Which style do I get if I run the CLI today?

New York. It is what new projects are initialized with, and it is what the components in the official docs show.

Are the differences in this article still accurate?

The Default-versus-New-York comparison describes the two styles as they existed side by side, which is what you need for reading an older codebase. Current New York has moved on in several places — see the 2026 section above, particularly the focus ring, button shadows, and size variants.

Is New York the same as Nova?

No, but they are related. New York is the deprecated-era style value in components.json. Nova is a preset in shadcn/create and the closest match to the current official component docs.