# Dismissible

> A close button hides the banner with a restore link.

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

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

## Install

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

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

## Dependencies

- Registry items: `button`

## Files

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

```tsx
'use client'

import { useState } from 'react'
import { Sparkles, X } from 'lucide-react'

import { Button } from '@/components/ui/button'

export function Banner03() {
  const [open, setOpen] = useState(true)

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="text-muted-foreground hover:text-foreground text-sm underline-offset-4 hover:underline"
      >
        Show banner again
      </button>
    )
  }

  return (
    <div className="relative flex w-full items-center gap-3 rounded-lg border bg-card px-4 py-3 pr-12 text-sm shadow-sm">
      <span className="bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-full">
        <Sparkles className="size-4" />
      </span>
      <p className="text-muted-foreground">
        <span className="text-foreground font-medium">What&apos;s new.</span>{' '}
        We&apos;ve refreshed the editor with faster autosave.
      </p>
      <Button
        variant="ghost"
        size="icon-sm"
        onClick={() => setOpen(false)}
        aria-label="Dismiss banner"
        className="text-muted-foreground absolute top-1/2 right-2 -translate-y-1/2"
      >
        <X />
      </Button>
    </div>
  )
}
```