# Card 18 - Update Banner

> Notify users about new features or any updates in a clear card block along with a CTA button. Helps improve product communication without interrupting the UX.

A shadcn/ui block from the [@shadcn-dashboard](https://shadcndashboard.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-dashboard/update-banner).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-dashboard/update-banner
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-dashboard/update-banner-light-5d6f419f73d4e9bb.png
- Registry item: https://shadcndashboard.dev/r/update-banner.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/update-banner.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: `card`, `button`

## Files

### `src/components/shadcn-dashboard/blocks/cards/update-banner.tsx`

```tsx

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";

const UpdateBannerCode = () => {
  return (
    <div className="w-full max-w-4xl">
      <Card className="">
       <CardContent className="flex items-center flex-wrap justify-between gap-4">
        <div className="flex flex-col gap-1">
          <div className="flex items-center gap-2">
            <span className="h-2 w-2 rounded-full bg-chart-1 animate-ping absolute inline-flex" />
            <span className="h-2 w-2 rounded-full bg-chart-1 absolute inline-flex" />
            <p className="text-sm font-medium  ps-4">Update</p>
            <span className="w-1 h-1 rounded-full bg-border" />
            <p className="text-sm font-normal text-muted-foreground">Nov 25th, 2024</p>
          </div>
          <p className="text-sm font-normal">
            Sales revenue increased <span className="text-emerald-600">40%</span> in 1 week
          </p>
        </div>
        <a href={'#'}>
          <Button variant={'outline'} className="flex gap-1.5 cursor-pointer">
            See Statistics
            <span>
              <ArrowRight width={18} height={18} />
            </span>
          </Button>
        </a>
      </CardContent>
    </Card>
    </div>
  );
};

export default UpdateBannerCode;
```