# Announcement bar

> Full-width gradient promo with a New tag and arrow.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/banner-06).

- Page, with a live preview: https://shadcn.exchange/r/flx/banner-06
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/banner-06-light-b3cf49c507e98d5b.png
- Registry item: https://ui.flexnative.com/r/banner-06.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/banner-06.json
```

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

## Files

### `registry/patterns/banner/banner-06.tsx`

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

export function Banner06() {
  return (
    <div className="group flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-violet-600 via-fuchsia-600 to-orange-500 px-4 py-2.5 text-center text-sm font-medium text-white shadow-sm">
      <span className="rounded-full bg-white/20 px-2 py-0.5 text-xs font-semibold tracking-wide uppercase">
        New
      </span>
      <span>Introducing AI-assisted workflows — try it free for 14 days</span>
      <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
    </div>
  )
}
```