Alert

Installation

Examples

Props

Files installed (3)

• components/ui/alert/alert.tsx 2.6 kB

  import * as React from 'react'
  import { AlertCircle, CheckCircle, Info, TriangleAlert } from 'lucide-react'
  import { cn } from '@/lib/utils'
  import { alertVariants, type AlertVariants } from './alert.variants'
  
  export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, AlertVariants {
    icon?: 'info' | 'warning' | 'error' | 'success'
    title?: string
    text?: string
  }
  
  const builtInIcons = {
    error: AlertCircle,
    success: CheckCircle,
    warning: TriangleAlert,
    info: Info,
  } as const
  
  const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
    ({ className, variant, icon, title, text, children, ...props }, ref) => {
      const IconComp = icon ? builtInIcons[icon] : null
  
      return (
        <div
          ref={ref}
          role="alert"
          data-uipkge=""
          data-slot="alert"
          className={cn(alertVariants({ variant }), className)}
          {...props}
        >
          {/*
            Icons and composition children must be direct root descendants so the
            `[&>svg]` absolute layout in alertVariants can position and pad correctly.
          */}
          {IconComp ? <IconComp className="size-4" aria-hidden="true" /> : null}
          {title ? (
            <p data-uipkge="" data-slot="alert-title" className="mb-1 text-sm leading-none font-medium tracking-tight">
              {title}
            </p>
          ) : null}
          {text ? (
            <div
              data-uipkge=""
              data-slot="alert-description"
              className="text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed"
            >
              {text}
            </div>
          ) : null}
          {children}
        </div>
      )
    },
  )
  Alert.displayName = 'Alert'
  
  export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
  }
  
  const AlertTitle = React.forwardRef<HTMLHeadingElement, AlertTitleProps>(
    ({ className, as: Comp = 'h5', ...props }, ref) => (
      <Comp
        ref={ref}
        data-uipkge=""
        data-slot="alert-title"
        className={cn('mb-1 text-sm leading-none font-medium tracking-tight', className)}
        {...props}
      />
    ),
  )
  AlertTitle.displayName = 'AlertTitle'
  
  const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
    ({ className, ...props }, ref) => (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="alert-description"
        className={cn('text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed', className)}
        {...props}
      />
    ),
  )
  AlertDescription.displayName = 'AlertDescription'
  
  export { Alert, AlertTitle, AlertDescription }

• components/ui/alert/alert.variants.ts 1.1 kB

  import type { VariantProps } from 'class-variance-authority'
  import { cva } from 'class-variance-authority'
  
  /**
   * Variant definitions live in their own file (rather than the package
   * `index.ts`) so `Alert.vue` can `import { alertVariants } from
   * './alert.variants'` without creating a circular dependency through the
   * index. See card.variants.ts for the same pattern + the SSR symptom that
   * motivated the split.
   *
   * Layout: composition children (svg + AlertTitle + AlertDescription) are
   * direct descendants of the root so `[&>svg]` absolute positioning works.
   */
  export const alertVariants = cva(
    'relative w-full rounded-lg border p-4 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg]:text-foreground [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]',
    {
      variants: {
        variant: {
          default: 'bg-background text-foreground border-border',
          destructive: 'border-destructive/20 text-destructive bg-destructive/5 [&>svg]:text-destructive',
        },
      },
      defaultVariants: {
        variant: 'default',
      },
    },
  )
  
  export type AlertVariants = VariantProps<typeof alertVariants>

• components/ui/alert/index.ts 0.3 kB

  export { Alert, AlertTitle, AlertDescription, type AlertProps, type AlertTitleProps } from './alert'
  
  // Re-export variant API from the sibling file (kept separate to avoid the
  // alert.tsx <-> index.ts circular import — mirrors the Vue registry).
  export { alertVariants, type AlertVariants } from './alert.variants'

Raw manifest: https://uipkge.dev/r/react/alert.json