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

> The Default style in shadcn/ui is deprecated and New York is what new projects get. Here's what actually differed between the two, what New York looks like today, and what to do if your components.json still says default.

Published: 2026-07-29 · Author: Matt Wierzbicki · Canonical: https://www.shadcndesign.com/blog/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](https://ui.shadcn.com/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](https://ui.shadcn.com/docs/components-json) 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:

```bash
# 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](https://www.shadcndesign.com) — 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.

<RichImage
  src="/blog/what-is-the-difference-between-default-and-new-york-style-in-shadcnui-2.png"
  alt="Image showing a comparison between shadcn/ui Default and New York components"
/>

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.

<RichImage
  src="/blog/what-is-the-difference-between-default-and-new-york-style-in-shadcnui-3.png"
  alt="Image showing a comparison between shadcn/ui Default and New York components"
/>

### 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.

<RichImage
  src="/blog/what-is-the-difference-between-default-and-new-york-style-in-shadcnui-4.png"
  alt="Image showing a comparison between shadcn/ui Default and New York components"
/>

### 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.

<RichImage
  src="/blog/what-is-the-difference-between-default-and-new-york-style-in-shadcnui-5.png"
  alt="Image showing a comparison between shadcn/ui Default and New York components"
/>

### 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)

<RichImage
  src="/blog/what-is-the-difference-between-default-and-new-york-style-in-shadcnui-6.png"
  alt="Image showing a comparison between shadcn/ui Default and New York components"
/>

**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)

<RichImage
  src="/blog/what-is-the-difference-between-default-and-new-york-style-in-shadcnui-7.png"
  alt="Image showing a comparison between shadcn/ui Default and New York components"
/>

### 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.

<RichImage
  src="/blog/what-is-the-difference-between-default-and-new-york-style-in-shadcnui-8.png"
  alt="Image showing a comparison between shadcn/ui Default and New York components"
/>

**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.

<RichImage
  src="/blog/what-is-the-difference-between-default-and-new-york-style-in-shadcnui-9.png"
  alt="Image showing a comparison between shadcn/ui Default and New York components"
/>

## 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:

```tsx
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:

```tsx
// 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](/blog/how-semantic-colors-work-in-shadcn-ui) covers the token layer, and the <Link href="/theme-generator">Theme Generator</Link> 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](https://ui.shadcn.com/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 <Link href="/blog/how-to-choose-shadcn-ui-style">how to choose the right shadcn/ui style</Link>, and the <Link href="/docs/styles">styles documentation</Link> 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.