The Item one

Cards 5

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,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemTitle,
} from '@/components/ui/item'
import { TrendingDownIcon, TrendingUpIcon } from 'lucide-react'

const stats = [
  {
    label: 'Revenue',
    value: '$48,210',
    delta: '+12.4% vs last month',
    trending: 'up' as const,
  },
  {
    label: 'New customers',
    value: '1,284',
    delta: '+4.1% vs last month',
    trending: 'up' as const,
  },
  {
    label: 'Churn',
    value: '2.1%',
    delta: '-0.3% vs last month',
    trending: 'down' as const,
  },
]

export default function Item17() {
  return (
    <ItemGroup className="w-full max-w-md">
      {stats.map((s) => {
        const Trend = s.trending === 'up' ? TrendingUpIcon : TrendingDownIcon
        return (
          <Item key={s.label} variant="outline">
            <ItemContent>
              <ItemDescription>{s.label}</ItemDescription>
              <ItemTitle className="text-lg">{s.value}</ItemTitle>
            </ItemContent>
            <ItemActions>
              <span className="text-muted-foreground inline-flex items-center gap-1 text-xs">
                <Trend className="size-3.5" />
                {s.delta}
              </span>
            </ItemActions>
          </Item>
        )
      })}
    </ItemGroup>
  )
}