Can't download the correct version of a component

[gespinha]

Hey,

When I run npx shadcn-vue@latest add sonner on my project, I get this component:

<script setup>
import { Toaster as Sonner } from "vue-sonner";

const props = defineProps({
  id: { type: String, required: false },
  invert: { type: Boolean, required: false },
  theme: { type: String, required: false },
  position: { type: String, required: false },
  closeButtonPosition: { type: String, required: false },
  hotkey: { type: Array, required: false },
  richColors: { type: Boolean, required: false },
  expand: { type: Boolean, required: false },
  duration: { type: Number, required: false },
  gap: { type: Number, required: false },
  visibleToasts: { type: Number, required: false },
  closeButton: { type: Boolean, required: false },
  toastOptions: { type: Object, required: false },
  class: { type: String, required: false },
  style: { type: Object, required: false },
  offset: { type: [Object, String, Number], required: false },
  mobileOffset: { type: [Object, String, Number], required: false },
  dir: { type: String, required: false },
  swipeDirections: { type: Array, required: false },
  icons: { type: Object, required: false },
  containerAriaLabel: { type: String, required: false },
});
</script>

<template>
  <Sonner
    class="toaster group"
    v-bind="props"
    :toast-options="{
      classes: {
        toast:
          'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
        description: 'group-[.toast]:text-muted-foreground',
        actionButton:
          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
        cancelButton:
          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
      },
    }"
  />
</template>

But when I run it on a StackBlitz project with the same exact configuration, I get this component:

<script lang="ts" setup>
import type { ToasterProps } from "vue-sonner"
import { Toaster as Sonner } from "vue-sonner"

const props = defineProps<ToasterProps>()
</script>

<template>
  <Sonner
    class="toaster group"
    v-bind="props"
    :style="{
      '--normal-bg': 'var(--popover)',
      '--normal-text': 'var(--popover-foreground)',
      '--normal-border': 'var(--border)',

    }"
  />
</template>

I've tried configuring my project to get typescript components instead, but I get the same result. Can you please help me understand why am I seeing this discrepancy?

Thanks!

[sadeghbarati]

The current website is for v3 registry files for v4 you should check v4-docs which still not have StackBlitz button

v3 registry sonner

<script lang="ts" setup>
import type { ToasterProps } from "vue-sonner"
import { Toaster as Sonner } from "vue-sonner"

const props = defineProps<ToasterProps>()
</script>

<template>
  <Sonner
    class="toaster group"
    v-bind="props"
    :toast-options="{
      classes: {
        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
        description: 'group-[.toast]:text-muted-foreground',
        actionButton:
          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
        cancelButton:
          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
      },
    }"
  />
</template>

v4 registry sonner

<script lang="ts" setup>
import type { ToasterProps } from "vue-sonner"
import { Toaster as Sonner } from "vue-sonner"

const props = defineProps<ToasterProps>()
</script>

<template>
  <Sonner
    class="toaster group"
    v-bind="props"
    :style="{
      '--normal-bg': 'var(--popover)',
      '--normal-text': 'var(--popover-foreground)',
      '--normal-border': 'var(--border)',

    }"
  />
</template>

[gespinha]

Are v4 components much different from v3 components?

I've noticed not all components in v3 are available in v4 and some components in v3 have bugs that are not present in v4. Given my app is powered by v3, how would you propose me fixing this?

[sadeghbarati]

Are v4 components much different from v3 components?

Yes in v3 registry buttons has cursor-pointer and offset-ring but in v4 registry cursor is cursor-default and rings are without offset and it's a bit fancier than v3

Some of v4 registry classes depends on new TailwindCSS 4 features https://tailwindcss.com/blog/tailwindcss-v4

---

The (dev branch) apps/v4 is updated but not deployed the new changes, deployment of dev branch apps/v4 is manual, and I don't access to Zernonia Couldflare page dashboard to deploy it myself.

For now check it manually on your local until we merge the v4-docs branch into dev

dev branch --- apps/v4

v4-docs branch --- apps/v4

[gespinha]

So, just to be clear, you're saying that if I want to fetch v3 components I should have "style": "new-york" or "style": "default" in my components.json file, but if I want v4 I'd have this: "style": "new-york-v4"

I would call npx shadcn-vue@latest add sonner to install the Sonner component and depending on the style property, so will be the version I'll get? Is this correct?

[sadeghbarati]

but if I want v4 I'd have this: "style": "new-york-v4"

No keep it as-is --> new-york

shadcn-vue CLI FALLBACK_STYLE is new-york-v4

function resolveStyleFromConfig(config: Partial<Config> | Config) {
  if (!config.style) {
    return FALLBACK_STYLE
  }

  // Check if we should use new-york-v4 for Tailwind v4.
  // We assume that if tailwind.config is empty, we're using Tailwind v4.
  if (config.style === "new-york" && config.tailwind?.config === "") {
    return FALLBACK_STYLE
  }

  return config.style
}

based on the code

• if there is no style in components.json file, fallback to new-york-v4

• if the style value is new-york and tailwind['config'] is empty, also fallback to new-york-v4

• if style value is new-york but tailwind['config'] is NOT empty pick new-york v3 registry

• if style value is default, pick the default v3 registry

---

Keep that in mind, the toast is deprecated in the v4 registry. vue-sonner (sonner) is the default for toasts in v4

[gespinha]

That's awesome! Thanks for clarifying! I get it now!