Todos os componentes

Stat Cards 06

Stat Cards 06 é 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 06 é 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.

Precisa de

npm i lucide-react recharts

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 06

examples/blocks/dashboard-ui/stat-cards/06/page.tsx
"use client";

import { Card, CardContent } from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import { ExternalLink } from "lucide-react";
import Link from "next/link";
import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts";

const data = [
  {
    name: "Workspaces",
    capacity: 20,
    current: 1,
    allowed: 5,
    fill: "var(--chart-1)"
  },
  {
    name: "Dashboards",
    capacity: 10,
    current: 2,
    allowed: 20,
    fill: "var(--chart-2)"
  }
];

const chartConfig = {
  capacity: {
    label: "Capacity",
    color: "hsl(var(--primary))"
  }
} satisfies ChartConfig;

export default function Stats07() {
  return (
    <div className="flex items-center justify-center px-4 py-10 lg:py-20">
      <dl className="grid w-full max-w-lg grid-cols-1 gap-4 lg:grid-cols-2">
        {data.map((item) => (
          <Card key={item.name} className="p-4 shadow-none">
            <CardContent className="flex items-center space-x-4 p-0">
              <div className="relative flex items-center justify-center">
                <ChartContainer config={chartConfig} className="h-[80px] w-[80px]">
                  <RadialBarChart
                    data={[item]}
                    innerRadius={30}
                    outerRadius={60}
                    barSize={6}
                    startAngle={90}
                    endAngle={-270}>
                    <PolarAngleAxis
                      type="number"
                      domain={[0, 100]}
                      angleAxisId={0}
                      tick={false}
                      axisLine={false}
                    />
                    <RadialBar
                      dataKey="capacity"
                      background
                      cornerRadius={10}
                      fill="var(--primary)"
                      angleAxisId={0}
                    />
                  </RadialBarChart>
                </ChartContainer>
                <div className="absolute inset-0 flex items-center justify-center">
                  <span className="text-foreground text-base font-medium">{item.capacity}%</span>
                </div>
              </div>
              <div>
                <dt className="text-foreground text-sm font-medium">{item.name}</dt>
                <dd className="text-muted-foreground text-sm">
                  {item.current} of {item.allowed} used
                </dd>
              </div>
            </CardContent>
          </Card>
        ))}
      </dl>
    </div>
  );
}

Componentes parecidos