Ship interfaces that feel alive.

A mock landing page so you can see the banner in context. Dismiss it, then bring it back.

Controls

variant

badge

dismissible

tone

accent

position

durations

Banner

Announcement banner: a dismissible top bar that slides in, a hero pill chip, a scrolling ticker or a bar with a light sweep. Remembers dismissal.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/banner

import { Banner } from "@/components/banner"

export function Demo() {
  return (
    <Banner
      badge="New"
      dismissible
      message="tweenly 0.4 is here: AI components and smooth scroll sections."
      cta={{ label: "Read more", href: "/changelog" }}
      storageKey="banner-v1"
    />
  )
}

Updates live as you change the controls. Only non-default props are included.