Item

Cards 10

About

Here is Item component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Item to your project and fits it to your theme.

Code

How Item is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Image from "next/image"

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemHeader,
  ItemTitle,
} from "@/components/ui/item"

const models = [
  {
    name: "v0-1.5-sm",
    description: "Everyday tasks and UI generation.",
    image:
      "https://cdn.21st.dev/assets/mirror/12/1278fc6d5d2f051b0b897b9ceeeb7458699830783d9ddee51849e1c0ed41708e.jpg",
    credit: "Valeria Reverdo on Unsplash",
  },
  {
    name: "v0-1.5-lg",
    description: "Advanced thinking or reasoning.",
    image:
      "https://cdn.21st.dev/assets/mirror/de/de135f92e1bb92d5ddae3adfbfbe40fbae8650a79daf7a80e640a568602cd270.jpg",
    credit: "Michael Oeser on Unsplash",
  },
  {
    name: "v0-2.0-mini",
    description: "Open Source model for everyone.",
    image:
      "https://cdn.21st.dev/assets/mirror/c1/c1bee59a416f28b9038f529954bec08c646f38937b64dc32d72042ea7a3cfc87.jpg",
    credit: "Cherry Laithang on Unsplash",
  },
]

export default function ItemHeaderDemo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-6">
      <ItemGroup className="grid grid-cols-3 gap-4">
        {models.map((model) => (
          <Item key={model.name} variant="outline">
            <ItemHeader>
              <Image
                src={model.image}
                alt={model.name}
                width={128}
                height={128}
                className="aspect-square w-full rounded-sm object-cover"
              />
            </ItemHeader>
            <ItemContent>
              <ItemTitle>{model.name}</ItemTitle>
              <ItemDescription>{model.description}</ItemDescription>
            </ItemContent>
          </Item>
        ))}
      </ItemGroup>
    </div>
  )
}