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?

[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);
}

[Kaikaikaifang]

In order to use tailwindcss v4 in monorepo, we can refer to this issue.

In globals.css:

@import "tailwindcss";
@source "../app/**/*.{ts,tsx}";
@source "../components/**/*.{ts,tsx}";
@source "../../../packages/ui/components/**/*.{ts,tsx}";

Note the relative path.

link pr #6724: use tailwindcss v4 in monorepo example.

[brettinternet]

You can also do something like this with the postcss plugin in postcss.config.mjs.

import { dirname, join } from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {
      base: join(__dirname, '../'),
    },
  },
}

export default config

[craftzcode]

You can also do something like this with the postcss plugin in postcss.config.mjs.

import { dirname, join } from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {
      base: join(__dirname, '../'),
    },
  },
}

export default config

I have a separate config in my turborepo for my tailwind-config, is that method is a applicable? also can you give an example how to use that?

[janzheng]

y'all just saved me countless more hours. what a mess

[babycommando]

hey @shadcn , thanks for the updates!
Should we wait for the canary to merge into main before integrating into production, or will the release take longer?

[bernaferrari]

I tested and it is definitely far from stable, so you should wait a few weeks

[Jacksonmills]

what all did you have issues with @bernaferrari?

[shadcn]

@bernaferrari we pushed a bunch of fixes recently. Can you let us know if you're still seeing any issues?

[bernaferrari]

I think the biggest issue was dialog having the wrong animation and sidebar also got kind of broken (it got in front of content, but before it was on the side).

I saw in the thread several bugs which might have been fixed already as Shadcn said, but I would probably wait for stable anyway, since then you would see every sample in the docs website and be 100% sure it is exactly the same as before.

[jpainam]

pnpm dlx shadcn@canary init and choosing MonoRepo still creates project with "tailwindcss": "^3.4.14"

[shadcn]

Yes. Still working on monorepo for v4. Not ready yet.

[craftzcode]

I attempted to set up shadcn-ui in my turborepo manually by copying all the configuration from shadcn@canary in my Next.js project and pasting it into the turborepo. However, when I try to add a component using pnpm dlx shadcn@canary add button, it appears that the older version of the button is being added—instead of the version 4 button. I know it's the old version because I noticed the presence of forwardRef in the code.

[TouhidZaman]

@shadcn Hey, take a look I found two issues here.

1. First after initializing shadcn@canary it adds it adds two semicolon after --radius: 0.625rem;;
2. https://ui.shadcn.com/docs/tailwind-v4 No comments section available below

[shadcn]

We fixed this recently. can you try again please?

[itsprs]

Hey @shadcn , appreciate the updates! Do you recommend waiting for the canary branch to merge into main before integrating it into production.. or is the release still a while away.. ?

[shadcn]

I'm doing some real-world testing of the components and fixing the small details. Almost there. A few more days and we'll be prod-ready.

[MurphyCoder]

Hi @shadcnI have the following problem when using the component breadcrumb in NextJS. I will be reviewing it :D

[Jacksonmills]

can you share the component where you use it?

[MurphyCoder]

can you share the component where you use it?

yes @Jacksonmills my code:

`

import { ReactNode } from "react";
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";

interface BreadcrumbItem {
  label: string;
  href?: string;
  isCurrent?: boolean;
}

interface ConfigSectionProps {
  title: string;
  description?: string;
  breadcrumbs?: BreadcrumbItem[];
  actions?: ReactNode;
}

const ConfigSection: React.FC<ConfigSectionProps> = ({
  title,
  description,
  breadcrumbs,
  actions,
}) => {
  return (
    <div className="flex justify-between mb-4 w-full pb-2.5">
      <div className="space-y-1.5">
        <h1 className="text-2xl font-semibold text-gray-700">{title}</h1>
        {description && <p className="text-sm text-gray-500">{description}</p>}

        {breadcrumbs && breadcrumbs.length > 0 && (
          <Breadcrumb>
            <BreadcrumbList>
              {breadcrumbs.map((item, index) => (
                <BreadcrumbItem key={index}>
                  {item.href ? (
                    <BreadcrumbLink href={item.href}>
                      {item.label}
                    </BreadcrumbLink>
                  ) : (
                    <BreadcrumbPage>{item.label}</BreadcrumbPage>
                  )}
                  {index < breadcrumbs.length - 1 && <BreadcrumbSeparator />}
                </BreadcrumbItem>
              ))}
            </BreadcrumbList>
          </Breadcrumb>
        )}
      </div>
      {actions && <div className="flex space-x-4">{actions}</div>}
    </div>
  );
};

export default ConfigSection;

// ======Example 2: use componente======

/* <ConfigSection
  title="Configuración general"
  description="Configura los datos generales de la empresa."
  breadcrumbs={[
    { label: "Dashboard", href: "/dashboard" },
    { label: "Configuración" },
  ]}
  actions={
    <>
      <Button variant="ghostLink">Crear configuración</Button>
      <Button variant="secondary">Crear Modales</Button>
    </>
  }
/>; */

`

[Jacksonmills]

I see the issue! The BreadcrumbSeparator must be outside the BreadcrumbItem

[MurphyCoder]

Thank you very much for the support @Jacksonmills

[jkinley]

Has anyone figured out how to fix the mode-toggle dropdown? The old version had a Button in the DropdownMenuTrigger, but that is broken now.

 <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
    </Button>
</DropdownMenuTrigger>

[Jacksonmills]

This discussion is based on tailwind v4 and react 19 specifically

[Jacksonmills]

Definitely recommend upgrading and trying it out!

[jkinley]

Yes. But I thought in the threads I was reading that 19 was supported, but not required. Anyway, updating to React 19 worked. So hopefully, that gets rid of a lot of my issues. Thanks!

[Jacksonmills]

You're right I do see this note on the main post:

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

@shadcn maybe something amiss with the detection of react 18 vs 19 here? Or the mix of tailwind v4 and react 18?

[jkinley]

Thanks for the follow-through @Jacksonmills! I really appreciate the assistance. Be well. : )

[KaueFelipeThums]

In Tailwind CSS v4, popover components (such as Select, Dropdown, and Context Menu) do not automatically adjust to the screen size, leading to overflow issues. In previous versions, these components handled overflow better, as they allowed line breaks.

[KaueFelipeThums]

When adding text to a select item, the popover size increases and does not properly respect the screen width.

Expected behavior:

This happens with the dropdown menu too

[Jacksonmills]

not seeing this bug in the v4 example app, can you share your component code?

[KaueFelipeThums]

I just set up shadcn with React 19 and Tailwind CSS 4, installed the component, and copied the usage example.

I'm using Chrome on Ubuntu.

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

function App() {
  return (
    <div>
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Select a option" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Options</SelectLabel>
            <SelectItem value="option-1">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </SelectItem>
            <SelectItem value="option-2">
              It is a long established fact that a reader will be distracted by the readable content of a page when
              looking at its layout.
            </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}

export default App;

[Jacksonmills]

<SelectContent className="w-(--radix-select-trigger-width)">

try this out! @shadcn does w-(--radix-select-trigger-width) make sense as the default for SelectContent?

[KaueFelipeThums]

The Shadcn component uses the class min-w-[var(--radix-select-trigger-width)]. I changed it to w-[var(--radix-select-trigger-width)], and it works perfectly.

[jpaveg]

Not sure if this has been reported yet, but the numerical badges on the v4 preview page have scrollbars on them:

After resizing the page, the vertical scrollbars still remain:

[Jacksonmills]

also only seeing this bug in chrome, firefox is fine for some reason

[shadcn]

is this chrome on mac? windows?

[Jacksonmills]

I reproduced on chrome windows

[itsprs]

Is happening on windows (chrome)..

[shadcn]

Fixed.

[askareija]

So i'm using iphone 7 ios 15.8.3, using both chrome and safari, some borders are missing, sidebar is transparent, badge doesn't have colors

[Jacksonmills]

Thanks for sharing!

I tested this on BrowserStack and found that these issues occur on older devices and browsers. Since Tailwind v4 is designed for modern browsers and specifically depends on Safari 16.4+ (released in March 2023), your iPhone 7 running iOS 15.8.3 likely doesn’t fully support it.

You can check Tailwind’s browser compatibility details here: Tailwind CSS Browser Support.

[babycommando]

so my app can't run on an iToaster anymore? Tailwind was so lame on that! Can we do something about it on shad components?

[alexanderbuhler]

Just going to leave that here in case you dare to tinker: https://gist.github.com/alexanderbuhler/2386befd7b6b3be3695667cb5cb5e709

[sdavids]

The new browser requirements should be prominently mentioned in the shadcn/ui upgrade docs.

Otherwise people will get a rude awakening after wasting time on upgrading—Tailwind v4 Core is effectively Baseline 2024 with baseline widely available in mid 2026 which might be OK for personal and in-house projects but not public-facing ones.

[shadcn]

@sdavids Agreed. 💯

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

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

[thecodermehedi]

@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?