Tailwind v4 and React 19

[shadcn]

It’s here! Tailwind v4 and React 19. Ready for you to try out.

TLDR

If you're starting a new project with Tailwind v4 and React 19, use the canary version of the command-line:

npx shadcn@canary init

What's New

• The CLI (canary) can now initialize projects with Tailwind v4.
• Full support for the new @theme directive and @theme inline option.
• All components are updated for Tailwind v4 and React 19.
• We’ve removed the forwardRefs and adjusted the types.
• Every primitive now has a data-slot attribute for styling.
• We've fixed and cleaned up the style of the components.
• We're deprecating the toast component in favor of sonner.
• Buttons now use the default cursor
• We're deprecating the default style. New projects will use new-york.

Note: this is non-breaking. Your existing apps with Tailwind v3 and React 18 will still work. When you add new components, they'll still be in v3 and React 18. Only new projects start with v4 and React 19.

What's Coming Next

The following is still being worked on. I'll post updates here.

• Migrating colors to OKLCH.
• Fix and improve animations.

See it Live

I put together a demo with all the updated components here: https://v4.shadcn.com

Take a look and test the components. If you find any bugs, leave a comment below.

• The code for the app is here: https://github.com/shadcn-ui/ui/tree/main/apps/v4
• The v4 components can be found here: https://github.com/shadcn-ui/ui/tree/main/apps/v4/registry/new-york-v4/ui

Try It Out

You can test Tailwind v4 + React 19 today using the canary release of the CLI.

pnpm dlx shadcn@canary init

I'm still working on the docs, but here's a quick guide to testing new projects:

Next.js

1. Start a new project with Tailwind v4 and React 19:

pnpm create next-app@canary --tailwind --eslint --typescript --app --no-src-dir

2. Init shadcn/ui. This will create your components.json and set up your CSS variables:

pnpm dlx shadcn@canary init

3. You should now be able to add components:

pnpm dlx shadcn@canary add button

Vite

1. Create a new project with React 19:

pnpm create vite --template=react-ts

2. Follow the official guide to add Tailwind CSS: https://tailwindcss.com/docs/installation/using-vite

3. Add path aliases to tsconfig.json:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

4. Add path aliases to tsconfig.app.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

5. Install @types/node:

pnpm add -D @types/node

6. Add resolve alias config to vite.config.ts:

import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

7. Init shadcn/ui. This will create your components.json and set up your CSS variables:

pnpm dlx shadcn@canary init

8. You should now be able to add components:

pnpm dlx shadcn@canary add button

(Note: If you need help with other frameworks, drop a comment below. I'll update the guide)

Upgrade Your Project

One of the major advantages of using shadcn/ui is that the code you end up with is exactly what you'd write yourself. There are no hidden abstractions.

This means when a dependency has a new release, you can just follow the official upgrade paths.

Here's how to upgrade your existing projects (full docs are on the way):

1. Follow the Tailwind v4 Upgrade Guide

• Upgrade to Tailwind v4 by following the official upgrade guide: https://tailwindcss.com/docs/upgrade-guide
• Use the @tailwindcss/upgrade@next codemod to remove deprecated utility classes and update tailwind config.

2. Update your CSS variables

The codemod will migrate your CSS variables as references under the @theme directive.

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
  }
}

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
}

This works. But to make it easier to work with colors and other variables, we'll need to move the hsl wrappers and use @theme inline.

Here's how you do it:

1. Move :root and .dark out of the @layer base.
2. Wrap the color values in hsl()
3. Add the inline option to @theme i.e @theme inline {
4. Remove the hsl() wrappers from @theme

:root { // <-- Moved outside of @layer
  --background: hsl(0 0% 100%); // <-- Wrap in hsl
  --foreground: hsl(0 0% 3.9%);
}

dark { // <-- Moved outside of @layer
  --background: hsl(0 0% 3.9%);
  --foreground: hsl(0 0% 98%);
}

@theme inline { // <-- Add inline option
  --color-background: var(--background); // <-- Remove hsl
  --color-foreground: var(--foreground);
}

This change makes it much simpler to access your theme variables in both utility classes and outside of CSS for eg. using color values in JavaScript.

3. Update colors for charts

Now that the theme colors come with hsl(), you can remove the wrapper in your chartConfig:

const chartConfig = {
  desktop: {
    label: "Desktop",
-    color: "hsl(var(--chart-1))",
+    color: "var(--chart-1)",
  },
  mobile: {
    label: "Mobile",
-   color: "hsl(var(--chart-2))",
+   color: "var(--chart-2)",
  },
} satisfies ChartConfig

Use new size-* utility

The new size-* utility (added in Tailwind v3.4), is now fully supported by tailwind-merge. You can replace w-* h-* with the new size-* utility:

- w-4 h-4
+ size-4

Update your dependencies

pnpm up "@radix-ui/*" cmdk lucide-react recharts tailwind-merge clsx --latest

Remove forwardRef

You can use the preset-19 codemod to migrate your forwardRef to props or manually update the primitives.

For the codemod, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#typescript-changes.

If you want to do it manually, here's how to do it step by step:

1. Replace React.forwardRef<...> with React.ComponentProps<...>
2. Remove ref={ref} from the component.
3. Add a data-slot attribute. This will come in handy for styling with Tailwind.
4. You can optionally convert to a named function and remove the displayName.

Before

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b last:border-b-0", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

After

function AccordionItem({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn("border-b last:border-b-0", className)}
      {...props}
    />
  )
}

Share Your Feedback

We’d love for you to test these updates and share your feedback! If you run into anything weird or have suggestions, add a comment below.

[dericdinudaniel]

Goat 🐐

[kurumeii]

I actually don't like the sonner toast but okay 👍

[yasseralsaidi]

Great, thanks!

[robert-sarosi]

thanks a lot @shadcn ! tested with a fresh nextjs and vite setup and it worked correctly.

[AltairInglorious]

Thanks

[uditalias]

Tested with react router v7 and it works perfectly!

Thank you @shadcn 🙏

[sachasayan]

Woohoo! Thanks @shadcn!

[marenostrum1981]

Needed to import "path" in step 5: pnpm install --save-dev @types/node

[goradels]

Any advice for remix+vite?

✔ Preflight checks.
✔ Verifying framework. Found Remix.
✖ Validating Tailwind CSS.
✔ Validating import alias.

No Tailwind CSS configuration found at /Users/johndoe/Projects/shopify-demo/test-storefront.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/remix to get started.```

[bonabird]

I am having the same issue using Vaadin hilla + vite.

Any help would be greatly appreciated!

[YasinKuralay]

Thanks for the update! It works with a clean Vite + React Router V7 setup, however I don't get asked whether to use new-york or default styles in the CLI, and just get new-york @shadcn

Also, changing the "style": "new-york" in components.json to "style": "default" and then adding a new component like npx shadcn@canary add button seems to still load new-york styles. I might be doing sth wrong though, it's my first time using shadcn. Maybe @uditalias can confirm as using same setup?

[tyler-dot-earth]

I can confirm that commands like shadcn@canary add badge and are still not using the v4 registry/components. I noticed because Badge is rounded-full in v3 and rounded-md in v4.

[shadcn]

• v4 is new-york only.
• @tyler-dot-earth do you have a repository somewhere I can check ?

[tyler-dot-earth]

@shadcn sorry - I was mistaken; explanation below ⤵️

• the shadcn@canary add badge does add the rounded-md version of badge from the v4 registry in my Tailwind v4 codebase
• i got twisted around because the docs showcase "v4" in the sidebar but the component pages (like for Badge) are all still the v3 versions - which led to me expecting the one i see in the docs, not the v4 version that only appears in the v4 playground.

[ryandotelliott]

Exciting stuff! Just want to note that setting up a fresh project with bunx create-next-app@canary --tailwind --eslint --typescript --app --no-src-dir and then initializing with bunx --bun shadcn@canary init does give warnings for peer dependency with React 19.

Thanks a ton for the update 🙏

[daFoggo]

Am I able to upgrade to stable release if i start with these canary version?

[subproject22]

Remove forwardRef

Does this means shadcn will not work with React 18 and older versions?

[superjump22]

Thanks! Great job!
I found The styles for the Input component are duplicated.

[Muhammad-Owais-Warsi]

Hey, first of all, thanks @shadcn for the updates! My question is, can we still apply different themes? For me, applying any theme other than the default one doesn’t seem to work.

1. Default theme

@import "tailwindcss";

@plugin "tailwindcss-animate";

@custom-variant dark (&:is(.dark *));

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(0 0% 3.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(0 0% 3.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(0 0% 3.9%);
  --primary: hsl(0 0% 9%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(0 0% 96.1%);
  --secondary-foreground: hsl(0 0% 9%);
  --muted: hsl(0 0% 96.1%);
  --muted-foreground: hsl(0 0% 45.1%);
  --accent: hsl(0 0% 96.1%);
  --accent-foreground: hsl(0 0% 9%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(0 0% 89.8%);
  --input: hsl(0 0% 89.8%);
  --ring: hsl(0 0% 3.9%);
  --chart-1: hsl(12 76% 61%);
  --chart-2: hsl(173 58% 39%);
  --chart-3: hsl(197 37% 24%);
  --chart-4: hsl(43 74% 66%);
  --chart-5: hsl(27 87% 67%);
  --radius: 0.6rem;
}

.dark {
  --background: hsl(0 0% 3.9%);
  --foreground: hsl(0 0% 98%);
  --card: hsl(0 0% 3.9%);
  --card-foreground: hsl(0 0% 98%);
  --popover: hsl(0 0% 3.9%);
  --popover-foreground: hsl(0 0% 98%);
  --primary: hsl(0 0% 98%);
  --primary-foreground: hsl(0 0% 9%);
  --secondary: hsl(0 0% 14.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(0 0% 14.9%);
  --muted-foreground: hsl(0 0% 63.9%);
  --accent: hsl(0 0% 14.9%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(0 0% 14.9%);
  --input: hsl(0 0% 14.9%);
  --ring: hsl(0 0% 83.1%);
  --chart-1: hsl(220 70% 50%);
  --chart-2: hsl(160 60% 45%);
  --chart-3: hsl(30 80% 55%);
  --chart-4: hsl(280 65% 60%);
  --chart-5: hsl(340 75% 55%);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

2. New theme

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

[techotaku1]

gracias por estar actualizados el soporte de tailwind 4 falta actualizar el codigo de los componentes v4 new york en la pagina de la documentacon oficial

[Kamahl19]

I understand that tw4 removed default cursor on buttons (no idea why though) but isn't that something shadcnui should explicitly add wherever it fits? Right now I am adding it manually to all the components (i dont like the global css fix) such as button, checkbox, all kinds of triggers like dialog, popover, select etc. I mean shadcnui is an opinionated design, it does not have to follow whatever tailwind decides to do, right?

[Jacksonmills]

Good discussion here about why default cursor is preferred #6800

[CHC383]

You can do this in the CSS file instead of updating the individual components, maybe worth to mention this in the shadcn/ui doc.

[Denoder]

Good discussion here about why default cursor is preferred #6800

they're gonna have to force everyone to follow that rule if thats what they want cause people are already accustomed to the hand being an indicator that the button is clickable.

[taylor6iu]

hello everyone. i am working with the Sidebar component and I found this:

after I set size to 'lg' in a Sidebar collapsible to icon, this happened.

so i looked into the source code and if i simply remove the 'group-data-[collapsible=icon]:p-0!' className(this className is added in sidebarMenuButtonVariants of size='lg'), this happened:

[smoothdvd]

Upgrade tailwind-merge to latest version to resolve this issue

[androidStern]

Title:
Tailwind v4 + Radix UI (shadcn) Dropdown/Select Transparent After Upgrade

Body:

I recently upgraded a Next.js 14.2 project from Tailwind v3 to Tailwind v4. After the upgrade, several Radix UI components (from [shadcn/ui](https://github.com/shadcn/ui)), including the Select dropdown, started rendering fully transparent. The dropdown menu is visible as text floating on the page, with no background panel at all.

Here’s a minimal snippet of one of the affected components (InviteUserForm), showing how I’m using Radix Select with shadcn’s utility components:

import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
} from "@/components/ui/select";

...

<Select onValueChange={field.onChange} value={field.value}>
  <FormControl>
    <SelectTrigger className="border-gray-300">
      <SelectValue placeholder="Select role" />
    </SelectTrigger>
  </FormControl>
  <SelectContent>
    <SelectItem value="INTERNAL">Internal</SelectItem>
    <SelectItem value="EXTERNAL_ADMIN">External Admin</SelectItem>
    ...
  </SelectContent>
</Select>

What I’ve observed:

• The content is definitely rendered (I can see the text), but the dropdown background is missing/transparent.
• Checking dev tools shows bg-popover or similar classes are present, but no actual background color is applied.
• I have a globals.css with custom @layer base { :root { ... } } for shadcn’s theme variables, and I do see --popover: 0 0% 100%; for white, but it’s not showing up.
• I tried forcing a color in dev tools and with !important rules like:

element {
background-color: #fff !important;
}

but it still appears transparent.  

**My setup**:
- **Next.js 14** with the App Router
- **Tailwind v4** (confirmed in `package.json`: `"tailwindcss": "^4.0.0"`)
- **Radix UI** (2.1.1), using `@radix-ui/react-select`  
- **shadcn/ui** components, added via `shadcn add select`

**What I’ve tried**:

1. **Checked Tailwind content paths**: My `tailwind.config.ts` includes `"./src/**/*.{ts,tsx}"`, so it should see these classes.
2. **Ensured CSS variables**: `globals.css` defines `--popover`, `--foreground`, etc. 
3. **Updated shadcn**: Ran `shadcn add select` again to overwrite with the newest Tailwind v4-compatible code.
4. **Attempted a top-level !important override** in a `@layer utilities` block:
 ```css
 @layer utilities {
   body [data-radix-select-content] {
     background-color: #fff !important;
   }
 }

Still shows transparent.

Has anyone encountered Tailwind v4 + Radix UI dropdowns rendering invisible backgrounds? Am I missing some new v4 config or a known fix for these theme variables? Any guidance or best practices for making the SelectContent background appear properly would be greatly appreciated!

Thanks in advance!

[mahdi-al-mutaallim]

@androidStern I tried doing the same, but I encountered the same issue. It seems there’s still a problem with the migration process. However, in a brand-new project, everything works fine. I suggest creating a separate branch specifically for testing and trying out each patch they release until you find a workaround. By the way, did you use the shadcn@canary CLI for this?

[sp88011]

has anyone figured out the root cause for several components having transparent background?

It seems that bg-popover is not recognized for some reason...

[sp88011]

Okay turns out Tailwind v4's automatic detection doesn't really work that well out of the box in Monorepos. In v3, you used to be able to specify (via content) what paths Tailwind should look at to generate classes. In v4 you gotta help Tailwind cover everything using the @source syntax.

This here solved my issue: tailwindlabs/tailwindcss#13136 (comment)

@import '@lydar/ui/tailwind.css';
@source "../app//.{ts,tsx}"; / Current app */
@source "../../../packages/ui//.{ts,tsx}"; / Any components in ui package*/

[jonkwheeler]

Just to share my experience. I attempted this today and encountered a few gotchas. A bit too many though.

All the animations for the open and closing states of popovers broke. Installing tw-animate-css and doing @import 'tw-animate-css'; didn't seem to work.

Definitely needed to add this...

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Then this step is misleading.

"If you want to do it manually" reads like you just need to run the codemod. But in reality you have to steps 3 and 4 if you want to be more of a 1:1 with the latest of shadcn.

Then anything like this has changed... and more so than the upgrade guide says.

const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
const TooltipTrigger = TooltipPrimitive.Trigger

For example:

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

I fear I might have to go component by component and do a diff.

Still confused why none of the closing state work anymore and the animations are broke.

[jonkwheeler]

I gave this another shot...

TL:DR; I think shadcn still being in canary means we should hold off. I migrated to Tailwind v4 though.

• Start in clean branch.
• pnpm dlx @tailwindcss/upgrade
• pnpm add clsx@latest
• pnpm add tailwind-merge@latest
• pnpm remove tailwind-animate
• pnpm add tw-animate-css -D
• Add @import 'tw-animate-css'; to globals.css after @import 'tailwindcss';

@import 'tailwindcss';
@import 'tw-animate-css';

• Move fonts to @theme inline.

/* https://tailwindcss.com/docs/theme#referencing-other-variables */
@theme inline {
  --font-sans: var(--font-inter), Arial, Helvetica, sans-serif;
}

• Add button css

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

• Port my "components" from my v3 config to v4 utility classes

@utility my-display-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}

• Follow shadcn's recommendation on css variables. I moved all my css vars to :root and .dark respectfully.

:root {
  --background: 0 0% 100%;
}

.dark {
  --background: 240 10% 3.9%;
}

@theme {
  --color-background: hsl(var(--background));
}

• Then wrapped them in hsl() and removed hsl() from it's usage.

:root {
  --background: hsl(0 0% 100%);
}

.dark {
  --background: hsl(240 10% 3.9%);
}

@theme {
  --color-background: var(--background);
}

• I then moved the entire theme to inline because tailwind says you have to do this to reference other variables.

@theme inline {
  --color-background: var(--background);
}

• Lastly, I replaced all h-* w-* with size-*. This is easy to do if you have prettier and prettier-plugin-tailwindcss installed. Since the tailwind migration ran in the first step, your class names might not be in order anymore. Run prettier --write ./src (obviously change the folder name to your components folder or whatever) and let prettier and prettier-plugin-tailwindcss sort everything. It will put height first, width second. Then you can run a regex find and replace.
  Search: h-(\d+)\s+w-\1. Replace: size-$1.

At this point you should be completely migrated to tailwind v4 and prepped for shadcn updates. I'd commit this into main/master and call it a day.

---

Upgrading shadcn components... To Be Continued

[jkinley]

Why are we not using light-dark CSS yet? It seems like this would make theming a lot cleaner.

https://caniuse.com/?search=light-dark

Also, can someone explain the reason for pointing @theme vars to the :root vars for theming in shadcn? I mean why not just put the values directly in @themeand not use @theme inline? I am not suggesting its wrong, just trying to understand the decision. I mean, couldn't we simplify things by doing something like this?

https://simonswiss.com/articles/tailwind-v4-multi-theme/

[jkinley]

Hi gang. I have done some further testing on this and I think this is a much cleaner way to handle light/dark mode. Check this out:

:root {
    color-scheme: light dark;
    --brand: light-dark(var(--color-red-500), var(--color-blue-500));
}


[data-theme="light"] {
    color-scheme: light;
}
[data-theme="dark"] {
    color-scheme: dark;
}

@theme {
    --color-brand:var(--brand);
}

[jkinley]

which also means we could prolly create themes like this. I tested this and it seems to be working fine. I just made a button for theme switching and another for mode switching. So clean and yummy!

:root {
color-scheme: light dark;
--brand: light-dark(var(--color-gray-300), var(--color-gray-500)); /* Default brand color */
}

[data-mode="light"] {
color-scheme: light;
}

[data-mode="dark"] {
color-scheme: dark;
}

[data-theme="blue"] {
--brand: light-dark(var(--color-blue-500), var(--color-blue-700)); /* Blue Theme */
}

[data-theme="red"] {
--brand: light-dark(var(--color-red-500), var(--color-red-700)); /* Red Theme */
}

@theme inline {
--color-brand: var(--brand);
}

[ev3nst]

Thanks for the hard work folks ! I am frequently checking the progress to see if upgrade has been finalized. Can i ask that when its done would you consider adding an upgrade guide in shadcn/ui website ?

Also i wish React 19 and Tailwind v4 was a separate upgrade, React 19 having the priority as i see tw4 causing a lot of issues i think.

[jkinley]

I don't know if this has been addressed yet to not. It's getting pretty tough to track all of this, but here goes. It seems the destructive example for Alert component is missing this border-destructive/50 so the border is gray.

I don't think the answer is to change this:

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

as this is now setup to handle the new TW 4 border inheritance.

Not sure, exactly what the fix is, that is why I am posting. Hope this helps.

[jkinley]

Update: I looked in the new @canary playground and it looks like the destructive example has clearly changed:

I guess there is nothing wrong with this, but it's confusing that we are changing the design AND updating to TW 4. Also, confusing bc the docs are referencing the old components. This kinda makes it hard to figure out what the intention is and so we are like to report things that are not actual bugs. Anyway, I guess I figured it out.

[jkinley]

Nope. It seems like there are lots of inconsistencies, so not sure what is the source of truth now.

[CHC383]

The canary branch hasn't been updated for a while since the changes have been merged to main, all the fixes and improvements are happening on main now, I would use apps/v4/registry/new-york-v4/ui as the source of truth. https://v4.shadcn.com/ should be in sync with the code in apps/v4

[jkinley]

Thanks @CHC383! Awesome. good to know.

[rohitagarwal88]

Hello Everyone,

I’m excited to share that we’ve successfully released Ontosight.ai after migrating from Ant Design v5 to Next.js 15, Tailwind CSS V4, and Shadcn@canary. The new setup has been running smoothly in production, and we’ve observed a significant boost in performance.

A big thank you to @shadcn for the fantastic work on the library. I’ll be sharing my key learnings from the process soon.

[martinmorenoc]

I noticed that the inputs and some components use bg-transparent, which works well in light mode. However, in dark mode, they don’t appear to be transparent. Does anyone know where the code that controls this behavior is?

From v4 shadcn demo:

[Jacksonmills]

its the dark:bg-input/30 bg-transparent, if you wanted to change it on your end just remove the dark:bg-input/30.

[martinmorenoc]

curious, because I don't see it in the codebase

[Jacksonmills]

https://github.com/shadcn-ui/ui/blob/main/apps%2Fv4%2Fregistry%2Fnew-york-v4%2Fui%2Finput.tsx#L11

[varna]

Why was toast deprecated in favor of Sonner?

[jkinley]

Hi. I was wondering what happened to the old mode-toggle that included "system". Not sure why that was removed bc it was pretty great.

[mindhaq]

After applying the remove-forward-ref codemod, a mandatory ref attribute is applied to all shadcn components.

For example, as in the upgade docs, for AccordionItem, this is what happens to my codebase:

Before:

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b", className)}
    {...props}
  />
));
AccordionItem.displayName = "AccordionItem";

After:

const AccordionItem = ({
  ref,
  className,
  ...props
}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & {
  ref: React.RefObject<React.ElementRef<typeof AccordionPrimitive.Item>>;
}) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b", className)}
    {...props}
  />
);
AccordionItem.displayName = "AccordionItem";

What am I missing here?

[jiyeon-dev]

The prefix option in Tailwind 4 should always come first.

• tailwind 4 using prefix option : https://tailwindcss.com/docs/upgrade-guide#using-a-prefix
• for example, using prefix 'tw:' : tw:data-[active=true]:text-sidebar-accent-foreground

However, the Canary version still uses the Tailwind 3 prefix approach, where it's placed at the front of the key-value class.
This should be changed to the following:

// transform-tw-prefix.ts
`${prefix}${variant}:${value}/${modifier}`

[ev3nst]

just wanted to say that i really don't like the bg/color/tone/radius changes. i wish this was strictly tailwind & react update as the title suggests.. what you see on the shadcn website versus what you actually get is different visually.

and also realized you removed some blocks again as well. i keep 3 or 4 if i remember correctly versions of shadcn in case i need to use some. they save quite some time when you actually need it i just don't understand why you keep removing them.