Default vs New York?

[nick-kang]

Is there guidance on the difference between Default vs New York?

Tried searching the docs and old commits, but not finding much.

From toggling between the two themes, it just looks like New York is a little more compact?

[pablotanner]

Yeah the difference is basically that New York uses less padding and sometimes uses less rounding/border-radius on the components.

[zzz6519003]

Good Call!

[nguyenhieptech]

You can go to Themes tab, click Customize / the info icon on the right of "Style" to see it.

"What is the difference between the New York and Default style?
A style comes with its own set of components, animations, icons and more.

• The Default style has larger inputs, uses lucide-react for icons and tailwindcss-animate for animations.
• The New York style ships with smaller buttons and cards with shadows. It uses icons from Radix Icons."

[mearleycf]

Not anymore you can't. As of Nov 19, 2024.

[scottrepreneur]

This is not documented afaict, but is asked on install.

[dagilleland]

And for those new to shadcn-ui, it can stop them in their tracks. If it can be changed easily later on, then it would be nice to know and people won't feel like they are stumbling out of the gate just because they don't know what they are getting/giving up in choosing between those two styles.

[dagilleland]

Ah, just found some documentation on it here. Looks like it is a "once you choose, you cannot undo" kind of choice. 😢

[mearleycf]

That is barely documentation. On top of that, because they're not compared side by side, I can't tell the difference anyway. If you're going to have an option in your frigging project init CLI, you'd better explain it REALLY well in the documentation.

[Viibrant]

And for those new to shadcn-ui, it can stop them in their tracks. If it can be changed easily later on, then it would be nice to know and people won't feel like they are stumbling out of the gate just because they don't know what they are getting/giving up in choosing between those two styles.

Precisely what is happening to me now!

[benjang032]

And for those new to shadcn-ui, it can stop them in their tracks. If it can be changed easily later on, then it would be nice to know and people won't feel like they are stumbling out of the gate just because they don't know what they are getting/giving up in choosing between those two styles.

Precisely what is happening to me now!

seconding that right now haha

[mintthemoon]

Yep add my name to the list of people who ended up here from a very confused search after trying to init my first project. I even thought to check the Themes tab there but never saw it still as I didn't hit customize. Should absolutely be in the docs imo, and ideally described better by the CLI in the prompt.

[pepijnolivier]

+1

I guess buildings in new york are cramped for space, so that's why they named it as such. But yes, this CLI choice could definitely benefit from a link to a page where it is explained.

To add on what @nguyenhieptech mentioned:

• you can test the difference by navigating to https://ui.shadcn.com/themes and clicking on "customize"
• you can also test by navigating to a component and changing the style in the preview, eg: https://ui.shadcn.com/docs/components/table

[mearleycf]

I don't actually think your first bullet point works anymore--at least, when I went there today, Nov 19 2024, it did not show an option to toggle between new york and default in the customize modal.

[codemile]

Default = "you're building a landing page, website or blog"

New York = "you're building a SaaS, dashboard or have a lot of forms"

[biapar]

How to change after from Default to NY?

[wengkitt]

How to change after from Default to NY?

re-run npx shadcn@latest init

[biapar]

Thanks. And without cli?

[biapar]

How to change after from Default to NY?

re-run npx shadcn@latest init

Is't dangerous?

[joshtenorio]

How to change after from Default to NY?

re-run npx shadcn@latest init

Is't dangerous?

Maybe (I don't actually know), but assuming you're working inside of a git repository you can always just commit your work, re-run npx shadcn@latest init, if it works out fine you're good, and otherwise you can git restore . to reset your repository to before re-running the init command

[sebastiancarlos]

There is more documentation about styles on the changelog page, under the "June 2023" update. Unfortunately the documentation search is not too good, so this is hard to find.

[bryanprimus]

nice

[mearleycf]

Oh, good. I mean, I always read 2 years worth of changelog updates to figure out how to use the installation CLI.

[musjj]

Not an official resource, but there's this nice article discussing the differences: https://www.shadcndesign.com/blog/difference-between-default-and-new-york-style-in-shadcn-ui

[mearleycf]

Again--not to keep saying the same thing, but this is not the first, or even 5th place I would look to figure out what the difference is between these two options that are presented in the FIRST STEP OF THE CLI.

[deep100x]

Default is like Minimalist, neutral design. Great for projects needing a simple, adaptable style without heavy customization. Easier to style from scratch.

On the other hand New York Offers a more refined, modern look with enhanced typography and styling. Ideal for applications that want a polished, high-end aesthetic out-of-the-box.

Both are customizable, but Default is simpler, while New York has more visual flair by default.

[LikeDreamwalker]

Don't know why but at 2024/11/11, there is no selection for Default or New York

[zzz6519003]

Ghost trick

[bryanprimus]

looks like they removed it

[telio-s]

I just read this post today and want to try by myself, turn out it gone

[Zanga1]

Don't know why but at 2024/11/11, there is no selection for Default or New York

Svelte-shadcn still has it. svelte-shadcn/themes. As far as I can tell they're identical.

[aqiongbei]

So, how do I choose?

[funwarioisii]

I followed this opinion.
#2930 (comment)

[LikeDreamwalker]

By my understanding, if you like the style that OpenAI, Next.js and Vercel are using, which looks like mainly dark or light colors with simple outlined style, you should use New York to make your app have more designed details in it.

Otherwise if you just want to use shadcn/ui to help you build your app, or you have already got the design of your app, you should use Default.

And there are almost no difficulties in overwriting New York style, so I say using New York won't be a bad choice.

[biapar]

I suggest to write a document about how to pass from the default style to New York style after the installation.

[mehrdadrafiee]

change style in components.json to New York. Like so:

{
  ...
  "style": "new-york",
  ...
}

[daveycodez]

The biggest difference is the focus outline. I wish we could get the New York style focus outline on the larger Default Inputs. :(

[jarodtaylor]

I'm just bummed that they're getting rid of Default and only doing New York with the next version (shadcn@canary). I like the bigger elements with more padding/space. 😔

[daveycodez]

I agree, but that's the direction it seems. There's always HeroUI

[jarodtaylor]

I prefer ShadCN to HeroUI or some of the other alternatives. I'm just hoping I can easily configure my shadcn components to provide more spacing, etc. Otherwise, I'll just have to modify all of the components manually.