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:T27d3,import { Badge } from '@/components/ui/badge'; import { Card, CardContent } from '@/components/ui/card'; import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { cn } from '@/lib/utils'; import { useState } from 'react'; type ProgressCategory = 'performance' | 'satisfaction' | 'engagement'; type ProgressData = { id: string; name: string; value: number; target: number; change: number; info: string; }; type ProgressDataRecord = { [key in ProgressCategory]: ProgressData[]; }; export default function ProgressBars() { const [category, setCategory] = useState('performance'); // Sample data for progress bars const progressData: ProgressDataRecord = { performance: [ { id: 'page-speed', name: 'Page Speed Score', value: 87, target: 95, change: 12, info: 'Avg. page load time: 1.7s', }, { id: 'api-response', name: 'API Response Time', value: 92, target: 99, change: 8, info: 'Avg. response: 120ms', }, { id: 'error-rate', name: 'Error Rate', value: 96, target: 99, change: 4, info: 'Down from 8% last month', }, { id: 'uptime', name: 'Service Uptime', value: 99.94, target: 99.99, change: 0.04, info: 'Monthly availability', }, { id: 'ci-cd', name: 'CI/CD Success Rate', value: 91, target: 100, change: 7, info: 'Build/deploy success rate', }, ], satisfaction: [ { id: 'nps', name: 'Net Promoter Score', value: 72, target: 80, change: 14, info: 'Industry avg: 65', }, { id: 'csat', name: 'Customer Satisfaction', value: 88, target: 95, change: 6, info: 'Based on post-purchase surveys', }, { id: 'frt', name: 'First Response Time', value: 79, target: 90, change: 11, info: 'Avg. response: 2.4 hours', }, { id: 'resolution', name: 'Resolution Rate', value: 93, target: 98, change: 5, info: 'Issues resolved first contact', }, { id: 'reviews', name: 'Positive Reviews', value: 81, target: 90, change: 3, info: 'Across major platforms', }, ], engagement: [ { id: 'active-users', name: 'Daily Active Users', value: 84, target: 90, change: 17, info: '% of monthly users active daily', }, { id: 'session-duration', name: 'Avg. Session Duration', value: 76, target: 85, change: 9, info: 'Current: 4.2 minutes', }, { id: 'retention', name: '30-Day Retention', value: 68, target: 80, change: 12, info: 'Users returning after 30 days', }, { id: 'feature-adoption', name: 'Feature Adoption', value: 65, target: 85, change: 15, info: 'Premium features usage', }, { id: 'conversion', name: 'Trial Conversion', value: 58, target: 70, change: 18, info: 'Free to paid conversion', }, ], }; const categories = [ { id: 'performance' as ProgressCategory, name: 'Performance' }, { id: 'satisfaction' as ProgressCategory, name: 'Satisfaction' }, { id: 'engagement' as ProgressCategory, name: 'Engagement' }, ]; // Helper to get color based on performance relative to target const getProgressColor = (current: number, target: number): string => { const ratio = current / target; if (ratio >= 0.9) return 'bg-emerald-500 dark:bg-emerald-500'; if (ratio >= 0.7) return 'bg-amber-500 dark:bg-amber-500'; return 'bg-rose-500 dark:bg-rose-500'; }; // Calculate average for current category const categoryAverage = Math.round( progressData[category].reduce((sum, item) => sum + item.value, 0) / progressData[category].length ); return (

Metrics

Performance Dashboard

Track our progress toward key business objectives

setCategory(value as ProgressCategory)} className="w-full max-w-md" > {categories.map((cat) => ( {cat.name} ))}

{/* Summary Card */}

{categories.find((c) => c.id === category)?.name} Metrics

Current progress toward targets

{categoryAverage}%

Category Average

{/* Progress Bars */}

{progressData[category].map((item) => (

{item.name}

{item.info}

{item.value}% / {item.target}% 0 ? 'text-emerald-500' : 'text-rose-500' )} > {item.change > 0 ? '+' : ''} {item.change}%

))}

{/* Additional summary info */}

Overall Progress

78% ↑ 9%

Across all categories

Highest Growth

Active Users

Improved by 17% this quarter

Needs Attention

Trial Conversion

Currently at 58% of target

); } 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:Tdf4,"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Tabs as TabsPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps) { return ( ) } const tabsListVariants = cva( "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", { variants: { variant: { default: "bg-muted", line: "gap-1 bg-transparent", }, }, defaultVariants: { variant: "default", }, } ) function TabsList({ className, variant = "default", ...props }: React.ComponentProps & VariantProps) { return ( ) } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ) } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ) } export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } 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","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-progress-bars.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-stats-progress-bars","itemId":"@shadcn-ui-blocks/marketing-stats-progress-bars"}],["$","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/progress-bars.tsx","content":"$50","type":"registry:component","target":"components/blocks/marketing/stats/progress-bars.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/tabs.tsx","content":"$53","type":"registry:ui","target":"components/ui/tabs.tsx"}]}]]}],"$L54"]}]

Progress Bars

Installation

Files

components

Styles