Describe the bug

Description

After installing the Card component using npx shadcn@latest add card command, I noticed that the generated className includes a string starting with @container/, like this:

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className
      )}
      {...props}
    />
  )
}

The generated className includes @container/card-header, which prevents card-header from being applied as a valid class.

Problem

• @container/card-header is not a valid CSS class
• It causes layout issues and unexpected behavior in the browser

Suggested fix

Simply remove the @container/ from the className. The rest of the classes work fine without it.

Notes

Not sure if this was added intentionally, but removing it fixed the issue for me. Just wanted to report it in case it’s a leftover or a mistake.

Affected component/components

Card

How to reproduce

1. Create a new Next.js project with Tailwind CSS

2. Run the following command to generate the Card component:

   npx shadcn@latest add card

3. Open the file components/ui/card.tsx (or the path where your components are saved)

4. Look at the CardHeader component

You’ll see that the className includes @container/card-header, which is not a valid class and breaks styling.

Codesandbox/StackBlitz link

I was not able to replicate this on CodeSandbox easily, but the issue is reproducible in any local Next.js + Tailwind project by following the described steps.

Logs

No errors in console. The issue is not related to runtime but to the generated className.

System Info

System:
  OS: Ubuntu 22.04.5
  Node: 20.12.0

Binaries:
  npm: 10.5.0

Browser:
  Chrome latest

Packages:
  Tailwind CSS: latest
  Next.js: latest
  shadcn-ui CLI: latest (via `npx shadcn@latest`)

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues