4d:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4e:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 4f:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 50:T296b,import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardFooter } from '@/components/ui/card'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; import { cn } from '@/lib/utils'; import { ArrowDownRight, ArrowUpRight, HelpCircle, InfoIcon, } from 'lucide-react'; type Metric = { id: string; name: string; value: string; rawValue: number; change: number; trend: 'up' | 'down' | 'neutral'; status: 'good' | 'warning' | 'critical'; period: string; description: string; }; export default function MetricCards() { // Sample data for metrics const metrics: Metric[] = [ { id: 'revenue', name: 'Monthly Revenue', value: '$48,283', rawValue: 48283, change: 12.6, trend: 'up', status: 'good', period: 'vs. last month', description: 'Total revenue generated during the current month from all products and services.', }, { id: 'new-users', name: 'New Users', value: '2,741', rawValue: 2741, change: 8.3, trend: 'up', status: 'good', period: 'vs. last month', description: 'Number of new user registrations within the past 30 days.', }, { id: 'conversion', name: 'Conversion Rate', value: '3.6%', rawValue: 3.6, change: -0.8, trend: 'down', status: 'warning', period: 'vs. last month', description: 'Percentage of visitors who completed a desired action (signup, purchase, etc).', }, { id: 'churn', name: 'Monthly Churn', value: '1.2%', rawValue: 1.2, change: -0.3, trend: 'down', status: 'good', period: 'vs. last month', description: 'Percentage of subscribers who canceled their subscription this month.', }, { id: 'cac', name: 'Customer Acq. Cost', value: '$48.32', rawValue: 48.32, change: 5.7, trend: 'up', status: 'warning', period: 'vs. last month', description: 'Average cost to acquire a new customer, including marketing and sales expenses.', }, { id: 'ltv', name: 'Customer LTV', value: '$452', rawValue: 452, change: 3.2, trend: 'up', status: 'good', period: 'vs. last month', description: 'Predicted lifetime value of an average customer.', }, { id: 'active-users', name: 'Weekly Active Users', value: '14,583', rawValue: 14583, change: -2.1, trend: 'down', status: 'warning', period: 'vs. last week', description: 'Number of unique users who performed an action in the past 7 days.', }, { id: 'engagement', name: 'Avg. Engagement', value: '4.2 min', rawValue: 4.2, change: 11.7, trend: 'up', status: 'good', period: 'vs. last month', description: 'Average time users spend actively engaging with the product per session.', }, { id: 'support', name: 'Support Response', value: '42 min', rawValue: 42, change: 14.3, trend: 'up', status: 'critical', period: 'vs. last month', description: 'Average time to first response for customer support tickets.', }, ]; // Helper function to get appropriate styles based on status const getStatusStyles = (status: Metric['status']) => { switch (status) { case 'good': return 'border-emerald-200 dark:border-emerald-950 bg-emerald-50 dark:bg-emerald-950/30'; case 'warning': return 'border-amber-200 dark:border-amber-950 bg-amber-50 dark:bg-amber-950/30'; case 'critical': return 'border-rose-200 dark:border-rose-950 bg-rose-50 dark:bg-rose-950/30'; default: return ''; } }; // Helper function to get trend styles const getTrendStyles = (trend: Metric['trend']) => { switch (trend) { case 'up': return 'text-emerald-600 dark:text-emerald-400'; case 'down': return 'text-rose-600 dark:text-rose-400'; default: return 'text-muted-foreground'; } }; // Helper function to get trend icons const getTrendIcon = (trend: Metric['trend'], status: Metric['status']) => { // For metrics like "churn" where down is good const isInverseMetric = status === 'good' && trend === 'down'; const isPositive = (trend === 'up' && status !== 'critical') || isInverseMetric; if (trend === 'up') { return ( ); } else if (trend === 'down') { return ( ); } return null; }; // Calculate total percentages for the summary const getStatusSummary = () => { const total = metrics.length; const goodCount = metrics.filter((m) => m.status === 'good').length; const warningCount = metrics.filter((m) => m.status === 'warning').length; const criticalCount = metrics.filter((m) => m.status === 'critical').length; return { good: Math.round((goodCount / total) * 100), warning: Math.round((warningCount / total) * 100), critical: Math.round((criticalCount / total) * 100), }; }; const statusSummary = getStatusSummary(); return (

Dashboard

Business Metrics

Real-time overview of our key performance indicators

{/* Status Summary */}

{statusSummary.good}%

On Target

{statusSummary.warning}%

Needs Attention

{statusSummary.critical}%

Critical

{/* Metric Cards */}

{metrics.map((metric) => (

{metric.name}

{metric.description}

{metric.value}

{metric.change > 0 ? '+' : ''} {metric.change}% {getTrendIcon(metric.trend, metric.status)}

{metric.period}

{metric.status === 'good' && 'On target'} {metric.status === 'warning' && 'Needs attention'} {metric.status === 'critical' && 'Critical - action required'}

))}

); } 51:T749,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const badgeVariants = cva( "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "span" return ( ) } export { Badge, badgeVariants } 52:Ta35,import * as React from "react" import { cn } from "@/lib/utils" function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { return (

img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className )} {...props} /> ) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } 53:T83f,"use client" import * as React from "react" import { Tooltip as TooltipPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps) { return ( ) } function Tooltip({ ...props }: React.ComponentProps) { return } function TooltipTrigger({ ...props }: React.ComponentProps) { return } function TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps) { return ( {children} ) } export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } 49:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4d",null,{"registryDependencies":[]}]]}],["$","$L4e",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/marketing-stats-metric-cards.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-stats-metric-cards","itemId":"@shadcn-ui-blocks/marketing-stats-metric-cards"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L4f",null,{"files":[{"path":"components/blocks/marketing/stats/metric-cards.tsx","content":"$50","type":"registry:component","target":"components/blocks/marketing/stats/metric-cards.tsx"},{"path":"components/ui/badge.tsx","content":"$51","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/card.tsx","content":"$52","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/tooltip.tsx","content":"$53","type":"registry:ui","target":"components/ui/tooltip.tsx"}]}]]}],"$L54"]}]