# Widgets 17

> Widgets 17 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-widgets-17).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-widgets-17
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-widgets-17-light-6faddaf4c86b693f.png
- Registry item: https://uiable.com/r/block-widgets-17.json
- Categories: widgets
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-widgets-17.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: `@uiable/button`, `@uiable/card`, `@uiable/progress`

## Files

### `src/components/uiable/blocks/widgets/widgets-17/widgets-17.tsx`

```tsx
// shadcn
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"

// assets
import { FolderKanban, Paperclip, Plus } from "lucide-react"

//  ------------------------------ | WIDGETS 17 | ------------------------------  //

const tasks = [
  { label: "Horizontal Layout", dot: "bg-teal-600", attachments: 2 },
  { label: "Invoice Generator", dot: "bg-blue-500", attachments: 0 },
  { label: "Package Upgrades", dot: "bg-amber-500", attachments: 0 },
  { label: "Figma Auto Layout", dot: "bg-rose-500", attachments: 0 },
]

export default function Widgets17() {
  return (
    <section className="w-full">
      <Card className="relative mb-0 flex w-full flex-col overflow-hidden rounded-2xl border-border/60 bg-card shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg">
        {/* accent glow */}
        <span
          aria-hidden
          className="pointer-events-none absolute -top-12 -right-10 size-32 rounded-full bg-teal-500 opacity-20 blur-3xl"
        />
        <CardHeader className="relative pb-2">
          <div className="flex items-center gap-3">
            <span className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-teal-500/10 text-teal-600 ring-1 ring-teal-500/15 ring-inset dark:text-teal-400">
              <FolderKanban className="size-5" />
            </span>
            <h3 className="text-lg font-semibold tracking-tight text-foreground">
              Project - OrbitCN
            </h3>
          </div>
        </CardHeader>

        <CardContent className="relative flex flex-col gap-5">
          {/* progress block */}
          <div className="flex flex-col gap-2">
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">Release v1.2.0</span>
              <span className="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-xs font-semibold text-emerald-600 tabular-nums ring-1 ring-emerald-500/15 ring-inset dark:text-emerald-400">
                70%
              </span>
            </div>
            <Progress
              value={70}
              className="h-2 rounded-full [&_[data-slot=progress-indicator]]:bg-teal-600"
            />
          </div>

          {/* task list */}
          <ul className="flex flex-col divide-y divide-border">
            {tasks.map((task) => (
              <li
                key={task.label}
                className="flex items-center justify-between py-3"
              >
                <div className="flex items-center gap-3">
                  <span
                    className={`size-2.5 shrink-0 rounded-full ${task.dot}`}
                  />
                  <span className="text-sm text-foreground">{task.label}</span>
                </div>
                {task.attachments > 0 && (
                  <span className="flex items-center gap-1 rounded-full bg-muted/60 px-2 py-0.5 text-xs text-muted-foreground ring-1 ring-border/50 ring-inset">
                    <Paperclip className="size-3" />
                    {task.attachments}
                  </span>
                )}
              </li>
            ))}
          </ul>

          {/* add task button */}
          <Button className="w-full gap-2 rounded-lg bg-teal-600 text-white hover:bg-teal-700">
            <Plus className="size-4" />
            Add task
          </Button>
        </CardContent>
      </Card>
    </section>
  )
}
```