# Widget 2

> A market-trends widget with a channel list and a per-item actions menu

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

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

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/widget-2.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: `button`, `card`, `dropdown-menu`

## Files

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

```tsx
import { Widget2 } from "@/components/blocks/application/widgets/widget-2/components/widget-2"

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

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

```tsx
import { MoreVertical } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

import { trendsData } from "@/components/data/widget-2-data"

export function Widget2() {
  return (
    <div className="px-4 sm:px-6 lg:px-8">
      <Card className="w-full max-w-md mx-auto my-6 py-6">
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6">
          <div>
            <CardTitle className="text-lg font-semibold">Market Trends</CardTitle>
            <p className="text-sm text-muted-foreground mt-1">Growth opportunities</p>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger render={<Button variant="ghost" className="size-8 p-0 cursor-pointer" />}>
              <MoreVertical />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuGroup>
                <DropdownMenuItem className="cursor-pointer">View details</DropdownMenuItem>
                <DropdownMenuItem className="cursor-pointer">Export data</DropdownMenuItem>
                <DropdownMenuItem className="cursor-pointer">Settings</DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        </CardHeader>

        <CardContent className="flex flex-col gap-7 px-6">
          {trendsData.map(trend => (
            <div key={trend.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/10">
                  <trend.icon className="size-5 text-primary" />
                </div>
                <div>
                  <p className="text-sm font-medium text-foreground">{trend.title}</p>
                  <p className="text-sm text-muted-foreground">{trend.description}</p>
                </div>
              </div>
              <div className="text-right">
                <p className="text-sm font-semibold text-foreground">{trend.value}</p>
              </div>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  )
}

export default Widget2
```

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

```ts
import type { LucideIcon } from 'lucide-react'
import { Activity, BookOpen, TrendingUp, UserPlus, Users } from 'lucide-react'

export interface TrendItem {
  id: number
  title: string
  description: string
  value: string
  icon: LucideIcon
}

export const trendsData: TrendItem[] = [
  {
    id: 1,
    title: 'Content Creation',
    description: 'Video, Blog, Podcast',
    value: '+1.2k',
    icon: BookOpen,
  },
  {
    id: 2,
    title: 'Digital Marketing',
    description: 'SEO, SEM, Social Ads',
    value: '+890',
    icon: TrendingUp,
  },
  {
    id: 3,
    title: 'Growth Analytics',
    description: 'Metrics, KPIs, Reports',
    value: '+650',
    icon: Activity,
  },
  {
    id: 4,
    title: 'Community Building',
    description: 'Forums, Groups, Events',
    value: '+420',
    icon: Users,
  },
  {
    id: 5,
    title: 'User Acquisition',
    description: 'Onboarding, Referrals',
    value: '+380',
    icon: UserPlus,
  },
]
```