Skip to content
themes.dev
    Style: Wireframe

    Components

    56 free

    Style

    Components · Feedback

    Alert

    A message on the page, neutral or destructive.

    3.9% of the 2,073 sites in The UI Index have a alert (81 sites).

    Your changes are saved
    The preview updates within a minute.

    Both previews render the same markup; the HTML tab below is that markup without a framework.

    Install

    React
    npx shadcn@latest add https://www.themes.dev/ui/r/alert.json
    Astro
    npx shadcn@latest add https://www.themes.dev/ui/r/astro/alert.json

    Or copy the files below into your project. They need clsx, tailwind-merge, and the themes.dev UI theme. The HTML needs only the compiled CSS.

    alert.tsx
    import type { HTMLAttributes, ReactNode } from 'react';
import { cn } from '@/lib/utils';
import { alertBody, alertTitle, alertVariants, type AlertVariants } from './alert.variants';

export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
  AlertVariants & { title?: ReactNode; icon?: ReactNode };

/** A message on the page. role="alert" only for the destructive variant, so screen readers announce errors. */
export function Alert({ variant, title, icon, className, children, ...props }: AlertProps) {
  return (
    <div role={variant === 'destructive' ? 'alert' : 'status'} className={cn(alertVariants({ variant }), className)} {...props}>
      {icon}
      {title && <div className={alertTitle}>{title}</div>}
      {children && <div data-alert-body="" className={alertBody}>{children}</div>}
    </div>
  );
}
    alert.variants.ts
    import { cva, type VariantProps } from 'class-variance-authority';

export const alertVariants = cva(
  'relative grid w-full grid-cols-[0_1fr] items-start gap-y-1 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[1rem_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5',
  {
    variants: {
      variant: {
        default: 'bg-card text-card-foreground',
        destructive: 'border-destructive/50 bg-card text-destructive [&_[data-alert-body]]:text-destructive/90',
      },
    },
    defaultVariants: { variant: 'default' },
  },
);
export const alertTitle = 'col-start-2 font-medium tracking-[-0.005em]';
export const alertBody = 'col-start-2 text-muted-foreground';
export type AlertVariants = VariantProps<typeof alertVariants>;