# Widget 1

> Comprehensive analytics dashboard with product sales and volume metrics, featuring trend indicators and recent activity tracking

A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/widget-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnstore/widget-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnstore/widget-1-light-b2acc47d1c49ae3c.png
- Registry item: https://shadcnstore.com/r/widget-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/widget-1.json
```

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

## Dependencies

- npm packages: `lucide-react`
- Registry items: `avatar`, `card`

## Files

### `storage/app/registry-sources/application/widgets/widget-1/page.tsx`

```tsx
import { Widget1 } from "@/components/blocks/application/widgets/widget-1/components/widget-1"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <div className="w-full">
        <Widget1 />
      </div>
    </div>
  )
}
```

### `storage/app/registry-sources/application/widgets/widget-1/widget-1.tsx`

```tsx
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

import { recentSalesActivity, salesData } from "@/components/data/widget-1-data"

export function Widget1() {
  return (
    <div className="mx-auto py-12 max-w-7xl px-4 sm:px-6 lg:px-8">
      <div className="grid gap-6 lg:grid-cols-2">
        <Card className="shadow-sm py-6">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 px-6">
            <CardTitle className="text-lg font-semibold">
              Top Products by <span className="text-primary">Sales</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-4 px-6">
            {salesData.map(item => (
              <div key={item.id} className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="flex size-10 items-center justify-center rounded-lg bg-primary/7 text-primary">
                    <item.icon className="size-5" />
                  </div>
                  <div>
                    <div className="font-medium">{item.name}</div>
                    <div className="text-sm text-muted-foreground">{item.brand}</div>
                  </div>
                </div>
                <div className="text-right">
                  <div className="font-semibold">{item.value}</div>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>

        <Card className="shadow-sm py-6">
          {/* Stacked on a phone: side by side, the title and the description each get a
              column narrow enough to wrap mid-phrase. */}
          <CardHeader className="flex flex-col gap-1 space-y-0 px-6 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
            <CardTitle className="text-lg font-semibold">
              Recent Sales <span className="text-primary">Activity</span>
            </CardTitle>
            <CardDescription>Latest transactions and customer activity</CardDescription>
          </CardHeader>
          <CardContent className="px-6">
            <div className="flex flex-col gap-4">
              {recentSalesActivity.map(activity => (
                <div key={activity.customer} className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <Avatar className="size-9">
                      <AvatarFallback className="text-sm">{activity.avatar}</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="text-sm font-medium">{activity.customer}</p>
                      <p className="text-sm text-muted-foreground">purchased {activity.product}</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-sm font-medium">{activity.amount}</p>
                    <p className="text-xs text-muted-foreground">{activity.time}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export default Widget1
```

### `storage/app/registry-sources/application/widgets/widget-1/widget-1-data.ts`

```ts
import type { LucideIcon } from 'lucide-react'
import { Headphones, Laptop, Monitor, Smartphone, Watch } from 'lucide-react'

export interface SalesItem {
  id: number
  name: string
  brand: string
  value: string
  icon: LucideIcon
}

export interface SalesActivity {
  customer: string
  product: string
  amount: string
  time: string
  avatar: string
}

export const salesData: SalesItem[] = [
  {
    id: 1,
    name: 'iMac Pro',
    brand: 'Apple',
    value: '74.9k',
    icon: Monitor,
  },
  {
    id: 2,
    name: 'Smart Band 4',
    brand: 'Xiaomi',
    value: '$15,459',
    icon: Watch,
  },
  {
    id: 3,
    name: 'Surface Pro X',
    brand: 'Microsoft',
    value: '$4,589',
    icon: Laptop,
  },
  {
    id: 4,
    name: 'iPhone 17',
    brand: 'Apple',
    value: '$84,345',
    icon: Smartphone,
  },
  {
    id: 5,
    name: 'Bluetooth Earphone',
    brand: 'Beats',
    value: '$10,374',
    icon: Headphones,
  },
]

export const recentSalesActivity: SalesActivity[] = [
  {
    customer: 'Sarah Johnson',
    product: 'iPhone 13 Pro',
    amount: '$1,199',
    time: '2 minutes ago',
    avatar: 'SJ',
  },
  {
    customer: 'Michael Chen',

    product: 'MacBook Pro M2',
    amount: '$2,499',
    time: '15 minutes ago',
    avatar: 'MC',
  },
  {
    customer: 'Emily Davis',
    product: 'AirPods Pro',
    amount: '$249',
    time: '1 hour ago',
    avatar: 'ED',
  },
  {
    customer: 'David Wilson',
    product: 'iPad Air',
    amount: '$599',
    time: '2 hours ago',
    avatar: 'DW',
  },
  {
    customer: 'Sophia Lee',
    product: 'Apple Watch Series 7',
    amount: '$399',
    time: '3 hours ago',
    avatar: 'SL',
  },
]
```