Todos os componentes

Stat Cards 03

Stat Cards 03 é um componente de cartão para React e Tailwind CSS, da biblioteca Bund UI, com licença MIT. Copia e cola no teu projeto.

Bund UI MIT cards

O que é

Stat Cards 03 é um componente de cartão para React e Tailwind CSS, da biblioteca Bund UI, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de Bund UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Stat Cards 03

examples/blocks/dashboard-ui/stat-cards/03/page.tsx
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default function CardStat() {
  return (
    <div className="mx-auto p-4 md:w-[400px] lg:py-10">
      <Card>
        <CardHeader>
          <CardTitle>Website Analytics</CardTitle>
          <CardDescription>
            Total <span className="text-green-600">28.5%</span> conversion rate
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 gap-4">
            <div className="flex items-center gap-2">
              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">432</div>
              <span className="text-sm">Direct</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">216</div>
              <span className="text-sm">Organic</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">29%</div>
              <span className="text-sm">Sessions</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">2.3K</div>
              <span className="text-sm">Page Views</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">1.6K</div>
              <span className="text-sm">Leads</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">8%</div>
              <span className="text-sm">Conversions</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

Componentes parecidos