Vibes logo

Banner

The Banner component is used to display important messages or announcements to users in the form of a bar across the top of the screen.

  • Full keyboard navigation
  • Dismissible with state tracked in local storage
  • Animated transition

Installation

Run the following command

npx vibes@latest add banner

Usage

import { Banner } from '@/vibes/soul/primitives/banner';function Usage() {  return (      <Banner id="example-banner">          Get <strong>15% off</strong> and free shipping with discount code{' '}          <strong>&quot;welcome&quot;</strong>      </Banner>  );}

Note: This component uses localStorage to store dismissed state. This means that if a user dismisses the banner, it will not be shown again on subsequent visits unless the state is cleared localStorage.

The key associated with this state uses the id prop with the following format: ${id}-hidden-banner.

API Reference

BannerProps

PropTypeDefault
children*
ReactNode
className
string
id*
string
hideDismiss
boolean
false
onDismiss
() => void
ref
ForwardedRef<HTMLDivElement>

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --banner-focus: var(--foreground);  --banner-background: var(--primary);  --banner-text: var(--foreground);  --banner-close-icon: color-mix(in oklab, var(--foreground) 50%, transparent);  --banner-close-icon-hover: var(--foreground);  --banner-close-background: transparent;  --banner-close-background-hover: color-mix(in oklab, var(--background) 40%, transparent);  --banner-font-family: var(--font-family-body);}