Dynamic Card component using container queries

[AyushKoul00]

I am trying to create a dynamic card component using container queries in tailwind that changes it's view based on the container size.

I am facing a lot of issues doing this. Is this even possible or supported in shadcn ui?

[shadcn]

@AyushKoul00 Can you share some code so we can take a look?

[AyushKoul00]

Sure: I am trying to create a card component with an image, title, description, and two links/buttons:

(sorry about the bad drawing - I made it quickly in paint). I want this card to change its view based on its own size, not the size of the viewport. This is why I am trying to use container queries. Here is the base code I have:

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import Image from "next/image";

type CardProps = React.ComponentProps<typeof Card>;

export function CardDemo({ className, ...props }: CardProps) {
  return (
    <Card className={cn("", className)} {...props}>
      <div className="relative">
        <Image src="next.svg" alt="Card Image" fill />
      </div>
      <CardHeader>
        <CardTitle>Title</CardTitle>
        <CardDescription>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere at
          veritatis nemo iusto sunt, architecto inventore atque.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className=" flex items-center space-x-4 rounded-md p-4">
          <Button className="w-full">Button 1</Button>
          <Button className="w-full" variant="secondary">
            Button 2
          </Button>
        </div>
      </CardContent>
      <CardFooter></CardFooter>
    </Card>
  );
}

There is already an issue with this - I am not able to see the image. This is the output I get (the colors may look different because I am experimenting with the CSS variable colors also):

Now, when I make this change: <Card className={cn("@container", className)} {...props}>, I get this output:

Is there something I am missing or doing wrong?

[servesh-chaturvedi]

Hi @AyushKoul00, could you share your setup?

[Josevictor2]

up

[AyushKoul00]

Hi @AyushKoul00, could you share your setup?

OS: Windows 11 Home (64-bit) package.json:

{
  "name": "shadcn_test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@tailwindcss/container-queries": "^0.1.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "lucide-react": "^0.288.0",
    "next": "13.5.6",
    "next-themes": "^0.2.1",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.6",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

Please let me know if there is anything else you want me to specify.

Also, it may be easier to just see a working sample of container queries on shadcn UI instead of debugging mine. Is there any sample (preferably with shad cn Card component) that uses tailwind container queries?

[servesh-chaturvedi]

@AyushKoul00 I've setup a sandbox here for your reference. You can fork it and run npm run dev in the terminal below to see it in action.

[AyushKoul00]

I forked it and ran npm run dev as you said and I get this:

[servesh-chaturvedi]

@AyushKoul00 try to click on the localhost as per this jam

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.