Banner

Full-width banner notification component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring controlled visibility, dismissible actions, and customizable themes.

Lucide

Loading component...

'use client';import { useControllableState } from '@radix-ui/react-use-controllable-state';import { type LucideIcon, XIcon } from 'lucide-react';import {  type ComponentProps,  createContext,  type HTMLAttributes,  type MouseEventHandler,  useContext,} from 'react';import { Button } from '@/components/ui/button';import { cn } from '@/lib/utils';type BannerContextProps = {  show: boolean;  setShow: (show: boolean) => void;};export const BannerContext = createContext<BannerContextProps>({  show: true,  setShow: () => {},});export type BannerProps = HTMLAttributes<HTMLDivElement> & {  visible?: boolean;  defaultVisible?: boolean;  onClose?: () => void;  inset?: boolean;};export const Banner = ({  children,  visible,  defaultVisible = true,  onClose,  className,  inset = false,  ...props}: BannerProps) => {  const [show, setShow] = useControllableState({    defaultProp: defaultVisible,    prop: visible,    onChange: onClose,  });  if (!show) {    return null;  }  return (    <BannerContext.Provider value={{ show, setShow }}>      <div        className={cn(          'flex w-full items-center justify-between gap-2 bg-primary px-4 py-2 text-primary-foreground',          inset && 'rounded-lg',          className        )}        {...props}      >        {children}      </div>    </BannerContext.Provider>  );};export type BannerIconProps = HTMLAttributes<HTMLDivElement> & {  icon: LucideIcon;};export const BannerIcon = ({  icon: Icon,  className,  ...props}: BannerIconProps) => (  <div    className={cn(      'rounded-full border border-background/20 bg-background/10 p-1 shadow-sm',      className    )}    {...props}  >    <Icon size={16} />  </div>);export type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;export const BannerTitle = ({ className, ...props }: BannerTitleProps) => (  <p className={cn('flex-1 text-sm', className)} {...props} />);export type BannerActionProps = ComponentProps<typeof Button>;export const BannerAction = ({  variant = 'outline',  size = 'sm',  className,  ...props}: BannerActionProps) => (  <Button    className={cn(      'shrink-0 bg-transparent hover:bg-background/10 hover:text-background',      className    )}    size={size}    variant={variant}    {...props}  />);export type BannerCloseProps = ComponentProps<typeof Button>;export const BannerClose = ({  variant = 'ghost',  size = 'icon',  onClick,  className,  ...props}: BannerCloseProps) => {  const { setShow } = useContext(BannerContext);  const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {    setShow(false);    onClick?.(e);  };  return (    <Button      className={cn(        'shrink-0 bg-transparent hover:bg-background/10 hover:text-background',        className      )}      onClick={handleClick}      size={size}      variant={variant}      {...props}    >      <XIcon size={18} />    </Button>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/banner.json

npx shadcn@latest add https://www.shadcn.io/registry/banner.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/banner.json

bunx shadcn@latest add https://www.shadcn.io/registry/banner.json

Features

Controlled visibility - Show/hide state management with close handlers using React state patterns
Composable API - Icon, Title, Action, and Close components using TypeScript composition
Inset variant - Rounded corner styling option with container spacing using Tailwind CSS
Primary color themes - Adapts to color token system with customizable appearance for Next.js projects
Dismissible actions - Built-in close functionality with optional callbacks using JavaScript event handling
Icon integration - Lucide icons support with flexible positioning using shadcn/ui theming
Open source - Free banner component with full-width layout support

Examples

Inset

Loading component...

'use client';import { useControllableState } from '@radix-ui/react-use-controllable-state';import { type LucideIcon, XIcon } from 'lucide-react';import {  type ComponentProps,  createContext,  type HTMLAttributes,  type MouseEventHandler,  useContext,} from 'react';import { Button } from '@/components/ui/button';import { cn } from '@/lib/utils';type BannerContextProps = {  show: boolean;  setShow: (show: boolean) => void;};export const BannerContext = createContext<BannerContextProps>({  show: true,  setShow: () => {},});export type BannerProps = HTMLAttributes<HTMLDivElement> & {  visible?: boolean;  defaultVisible?: boolean;  onClose?: () => void;  inset?: boolean;};export const Banner = ({  children,  visible,  defaultVisible = true,  onClose,  className,  inset = false,  ...props}: BannerProps) => {  const [show, setShow] = useControllableState({    defaultProp: defaultVisible,    prop: visible,    onChange: onClose,  });  if (!show) {    return null;  }  return (    <BannerContext.Provider value={{ show, setShow }}>      <div        className={cn(          'flex w-full items-center justify-between gap-2 bg-primary px-4 py-2 text-primary-foreground',          inset && 'rounded-lg',          className        )}        {...props}      >        {children}      </div>    </BannerContext.Provider>  );};export type BannerIconProps = HTMLAttributes<HTMLDivElement> & {  icon: LucideIcon;};export const BannerIcon = ({  icon: Icon,  className,  ...props}: BannerIconProps) => (  <div    className={cn(      'rounded-full border border-background/20 bg-background/10 p-1 shadow-sm',      className    )}    {...props}  >    <Icon size={16} />  </div>);export type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;export const BannerTitle = ({ className, ...props }: BannerTitleProps) => (  <p className={cn('flex-1 text-sm', className)} {...props} />);export type BannerActionProps = ComponentProps<typeof Button>;export const BannerAction = ({  variant = 'outline',  size = 'sm',  className,  ...props}: BannerActionProps) => (  <Button    className={cn(      'shrink-0 bg-transparent hover:bg-background/10 hover:text-background',      className    )}    size={size}    variant={variant}    {...props}  />);export type BannerCloseProps = ComponentProps<typeof Button>;export const BannerClose = ({  variant = 'ghost',  size = 'icon',  onClick,  className,  ...props}: BannerCloseProps) => {  const { setShow } = useContext(BannerContext);  const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {    setShow(false);    onClick?.(e);  };  return (    <Button      className={cn(        'shrink-0 bg-transparent hover:bg-background/10 hover:text-background',        className      )}      onClick={handleClick}      size={size}      variant={variant}      {...props}    >      <XIcon size={18} />    </Button>  );};

Different primary colors

Loading component...

'use client';import { useControllableState } from '@radix-ui/react-use-controllable-state';import { type LucideIcon, XIcon } from 'lucide-react';import {  type ComponentProps,  createContext,  type HTMLAttributes,  type MouseEventHandler,  useContext,} from 'react';import { Button } from '@/components/ui/button';import { cn } from '@/lib/utils';type BannerContextProps = {  show: boolean;  setShow: (show: boolean) => void;};export const BannerContext = createContext<BannerContextProps>({  show: true,  setShow: () => {},});export type BannerProps = HTMLAttributes<HTMLDivElement> & {  visible?: boolean;  defaultVisible?: boolean;  onClose?: () => void;  inset?: boolean;};export const Banner = ({  children,  visible,  defaultVisible = true,  onClose,  className,  inset = false,  ...props}: BannerProps) => {  const [show, setShow] = useControllableState({    defaultProp: defaultVisible,    prop: visible,    onChange: onClose,  });  if (!show) {    return null;  }  return (    <BannerContext.Provider value={{ show, setShow }}>      <div        className={cn(          'flex w-full items-center justify-between gap-2 bg-primary px-4 py-2 text-primary-foreground',          inset && 'rounded-lg',          className        )}        {...props}      >        {children}      </div>    </BannerContext.Provider>  );};export type BannerIconProps = HTMLAttributes<HTMLDivElement> & {  icon: LucideIcon;};export const BannerIcon = ({  icon: Icon,  className,  ...props}: BannerIconProps) => (  <div    className={cn(      'rounded-full border border-background/20 bg-background/10 p-1 shadow-sm',      className    )}    {...props}  >    <Icon size={16} />  </div>);export type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;export const BannerTitle = ({ className, ...props }: BannerTitleProps) => (  <p className={cn('flex-1 text-sm', className)} {...props} />);export type BannerActionProps = ComponentProps<typeof Button>;export const BannerAction = ({  variant = 'outline',  size = 'sm',  className,  ...props}: BannerActionProps) => (  <Button    className={cn(      'shrink-0 bg-transparent hover:bg-background/10 hover:text-background',      className    )}    size={size}    variant={variant}    {...props}  />);export type BannerCloseProps = ComponentProps<typeof Button>;export const BannerClose = ({  variant = 'ghost',  size = 'icon',  onClick,  className,  ...props}: BannerCloseProps) => {  const { setShow } = useContext(BannerContext);  const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {    setShow(false);    onClick?.(e);  };  return (    <Button      className={cn(        'shrink-0 bg-transparent hover:bg-background/10 hover:text-background',        className      )}      onClick={handleClick}      size={size}      variant={variant}      {...props}    >      <XIcon size={18} />    </Button>  );};

Use Cases

System notifications - Maintenance alerts and service status announcements
Promotional messages - Marketing campaigns and special offer displays
Warning alerts - Important user actions and security notifications
Feature announcements - New functionality and product update communications

Implementation

Built with composable components and controlled state. Supports both controlled and uncontrolled modes. Close handler with optional callbacks. Color themes adapt to CSS custom properties.

Reactbanner

Installation

Features

Examples

Inset

Reactbanner

Different primary colors

Reactbanner

Use Cases

Implementation

On this page