# Analytics 4

> A campaign goals progress tracking widget displaying marketing completion percentages with inline metrics.

A shadcn/ui block from the [@pacekit](https://ui.pacekit.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/pacekit/app-analytics-4).

- Page, with a live preview: https://shadcn.exchange/r/pacekit/app-analytics-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/pacekit/app-analytics-4-light-6bae890523b949e7.png
- Registry item: https://ui.pacekit.dev/r/app-analytics-4.json
- Listed: 2026-10-21, source last changed 2026-10-21

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/pacekit/app-analytics-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `card`, `button`, `dropdown-menu`, `progress`

## Files

### `components/blocks/app/analytics/analytics-4.tsx`

```tsx
import { Gift, Globe, Mail, Megaphone, MoreVertical, Search, Share2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Progress } from "@/components/ui/progress";

export const Analytics4 = () => {
    const ranges = ["This Month", "Last Month", "This Quarter"];

    const campaigns = [
        {
            id: "1",
            name: "Search Ads",
            category: "Paid Acquisition",
            progress: 85,
            icon: Search,
        },
        {
            id: "2",
            name: "Social Media",
            category: "Brand Growth",
            progress: 74,
            icon: Share2,
        },
        {
            id: "3",
            name: "Email Campaigns",
            category: "User Retention",
            progress: 92,
            icon: Mail,
        },
        {
            id: "4",
            name: "Referral Program",
            category: "Viral Loops",
            progress: 41,
            icon: Gift,
        },
        {
            id: "5",
            name: "SEO Optimization",
            category: "Organic Traffic",
            progress: 58,
            icon: Globe,
        },
        {
            id: "6",
            name: "Influencer Outreach",
            category: "Partner Marketing",
            progress: 63,
            icon: Megaphone,
        },
    ];

    return (
        <Card>
            <CardHeader>
                <CardTitle>Campaign Goals</CardTitle>
                <CardDescription>Average 70% completed</CardDescription>
                <CardAction>
                    <DropdownMenu>
                        <DropdownMenuTrigger
                            render={
                                <Button variant="ghost" size="icon-xs" className="cursor-pointer">
                                    <MoreVertical className="size-4" />
                                </Button>
                            }></DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-40">
                            {ranges.map((item) => (
                                <DropdownMenuItem key={item} className="cursor-pointer text-sm">
                                    {item}
                                </DropdownMenuItem>
                            ))}
                        </DropdownMenuContent>
                    </DropdownMenu>
                </CardAction>
            </CardHeader>
            <CardContent className="grid gap-2.5">
                {campaigns.map((item) => {
                    const IconComponent = item.icon;
                    return (
                        <div key={item.id} className="flex items-center gap-3">
                            <div className="bg-muted flex size-9 shrink-0 items-center justify-center rounded-md">
                                <IconComponent className="size-4.5" />
                            </div>
                            <div>
                                <p className="font-medium">{item.name}</p>
                                <p className="text-muted-foreground -mt-px truncate text-sm">{item.category}</p>
                            </div>
                            <div className="flex flex-1 items-center justify-end gap-3">
                                <Progress value={item.progress} className="h-1.5 w-full max-w-28" />
                                <span className="w-10 shrink-0 text-end text-sm font-medium">{item.progress}%</span>
                            </div>
                        </div>
                    );
                })}
            </CardContent>
        </Card>
    );
};
```