Components
Loading preview...
Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages.
npx shadcn@latest add https://21st.dev/r/sean0205/statistics-card-13import { Button } from '@/components/ui/button-1';
import { Card, CardContent, CardHeader, CardTitle, CardToolbar } from '@/components/ui/card';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { MoreVertical, Pin, Settings, Share2, ShieldCheck, Trash, TriangleAlert } from 'lucide-react';
import { cn } from '@/lib/utils';
export default function StatisticCard13() {
const total = 30;
const passing = 20;
return (
<div className="min-h-screen flex items-center justify-center p-6 lg:p-8">
<Card className="w-full max-w-sm">
<CardHeader className="border-0 min-h-auto py-5">
<CardTitle className="flex items-center gap-2.5">
<ShieldCheck className="w-5 h-5 text-primary" />
<span className="text-sm font-semibold text-foreground">Compliance Checks</span>
</CardTitle>
<CardToolbar>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="dim" size="sm" mode="icon" className="-me-1.5">
<MoreVertical />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" side="bottom">
<DropdownMenuItem>
<Settings />
View Details
</DropdownMenuItem>
<DropdownMenuItem>
<TriangleAlert /> Export Report
</DropdownMenuItem>
<DropdownMenuItem>
<Pin /> Configure Alerts
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Share2 /> Run Manual Check
</DropdownMenuItem>
<DropdownMenuItem>
<ShieldCheck /> View History
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</CardToolbar>
</CardHeader>
<CardContent className="space-y-2.5">
{/* Progress Bar */}
<div className="flex grow gap-1">
{[...Array(total)].map((_, i) => (
<span
key={i}
className={cn(
`inline-block w-3 h-4 rounded-sm border transition-colors`,
i < passing ? 'bg-primary border-primary' : 'bg-muted border-muted',
)}
/>
))}
</div>
{/* Passing Checks */}
<div className="flex items-center justify-between text-xs text-muted-foreground mt-1">
<span>{passing}/16 checks passing</span>
<span className="font-semibold text-foreground">{Math.round((passing / total) * 100)}% assigned</span>
</div>
</CardContent>
</Card>
</div>
);
}