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

[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. 😢

[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

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

[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

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