Todos os componentes

Stat Cards 04

Stat Cards 04 é 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 04 é 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 04

examples/blocks/dashboard-ui/stat-cards/04/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>Sales Overview</CardTitle>
          <CardDescription>
            <span className="text-green-600">+20.1%</span> from last month
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="text-2xl font-bold">$42.5k</div>
          <div className="grid grid-cols-2 gap-4">
            <div className="flex items-center gap-2 text-sm">
              <div className="bg-muted rounded-md px-2 py-1 text-center text-xs">62.2%</div>
              <span className="text-sm">Orders</span>
            </div>
            <div className="flex items-center justify-end gap-2 text-sm">
              <div className="bg-muted rounded-md px-2 py-1 text-center text-xs">25.5%</div>
              <span className="text-sm">Visits</span>
            </div>
          </div>
          <div className="flex overflow-hidden rounded-lg">
            <span className="h-4 bg-lime-400 dark:bg-lime-700" style={{ width: "70%" }}></span>
            <span className="h-4 bg-indigo-400 dark:bg-indigo-700" style={{ width: "30%" }}></span>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

Componentes parecidos