[Toolkit] Style/Theme to use

[seb-jean]

Hi,
I'm wondering which "theme" UX Toolkit uses.

Let's take the Button component as an example of destructive behavior:

The Button component used on the Shadcn website page https://ui.shadcn.com/docs/components/radix/button is https://github.com/shadcn-ui/ui/blob/main/apps/v4/examples/base/ui/button.tsx. You can even see "examples" in the URL.

The default Button component when initializing a Shadcn project with Next.js is this one: https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/button.tsx.

These are two different styles.

I'm asking this for the sake of consistency, and I'd like to know what "theme" we should be following in the future.

Thanks :).

[Kocal]

The ones when navigating on https://ui.shadcn.com/docs/components/radix/button (or https://ui.shadcn.com/docs/components/base/button), so:

:)

[seb-jean]

There's an issue on the Shadcn project that discusses the difference between using the CLI and the documentation: shadcn-ui/ui#8359

[seb-jean]

Hi @Amoifr,

Thank you for all the pull requests you're working on to enhance the Shadcn components.

I wanted to make sure you're using the correct default Shadcn style (also used for the Shadcn's documentation) in your various pull requests.

I've noticed in some previously created components that the style used isn't consistent, and neither is the assets/styles/app.css file.

To test the correct default style used by Shadcn, you can go to https://ui.shadcn.com/create, which is the default theme for the page (Nova / Neutral / Neutral with Radix UI). Then, you can download it if you wish by clicking the white "Create Project" button and running the command npx shadcn@latest init --preset b0 --template next.

The CSS file is located in /app/global.css (assets/styles/app.css for own Toolkit Shadcn). The components are in /components/ui/. Initially, there is just button.tsx, but you can then download the other components by doing, for example, npx shadcn@latest add card.

[Amoifr]

Hey @seb-jean 👋, thanks a lot for the careful review — you're right, and honestly I hadn't fully picked this up until your note, which explains some of the inconsistencies you spotted.

Looking back at @Kocal's recent [Toolkit][Shadcn] Rework templates of … sweep, I can clearly see the pattern I should have been applying from the start (strict tailwind_merge form, data-slot, html_cva for variants, normalized @prop docs). Lesson learned.

Since I have quite a few PRs in flight (recipes + docs on both repos), I'll audit them in batches rather than one big fix: first a CSS-vars diff against a fresh b0 preset, then a template sweep to align each recipe with Nova/Neutral and the rework patterns. Already-merged PRs will get the same follow-up treatment.

Would you (or @Kocal) mind pointing at one or two specific drifts you've seen? That'll help me calibrate the audit before I push anything.

Really appreciate keeping the kit consistent — I'll ping here once I have a concrete diff to review. 🙏

[seb-jean]

These aren't necessarily components you created yourself. For example, there's the Card component:

• https://ui.shadcn.com/docs/components/radix/card
• https://ux.symfony.com/toolkit/kits/shadcn/components/card

On Shadcn, the "Login" and "Login with Google" buttons and their content have a different structure than on https://ux.symfony.com/.

In dark mode, the button https://ui.shadcn.com/docs/components/radix/button#destructive also works, unlike the one at https://ux.symfony.com/toolkit/kits/shadcn/components/button#content-destructive.

The component https://ux.symfony.com/toolkit/kits/shadcn/components/switch does not work in dark mode.

The components need realigning, but I think we should start by creating a proper CSS file.