The Item one

Cards 1

About

Here is The Item components

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

Code

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

Usage.tsx


  import {
    Item,
    ItemContent,
    ItemDescription,
    ItemTitle,
  } from '@/components/ui/item'

  export default function Item04() {
    return (
      <div className="flex w-full max-w-md flex-col gap-3">
        <Item variant="outline" size="default">
          <ItemContent>
            <ItemTitle>Default size</ItemTitle>
            <ItemDescription>Comfortable padding and gap.</ItemDescription>
          </ItemContent>
        </Item>

        <Item variant="outline" size="sm">
          <ItemContent>
            <ItemTitle>Small size</ItemTitle>
            <ItemDescription>Denser rows for lists.</ItemDescription>
          </ItemContent>
        </Item>
      </div>
    )
  }