Alert

Installation

$ pnpm dlx shadcn@latest add https://react.uipkge.dev/r/react/alert.json

$ npx shadcn@latest add https://react.uipkge.dev/r/react/alert.json

$ yarn dlx shadcn@latest add https://react.uipkge.dev/r/react/alert.json

$ bunx shadcn@latest add https://react.uipkge.dev/r/react/alert.json

Examples

Props

Dependencies

Files (3)

• components/ui/alert/alert.tsx 2.5 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 Alert = React.forwardRef<HTMLDivElement, AlertProps>(
    ({ className, variant, icon, title, text, children, ...props }, ref) => (
      <div
        ref={ref}
        role="alert"
        data-uipkge=""
        data-slot="alert"
        className={cn(alertVariants({ variant }), className)}
        {...props}
      >
        {icon ? (
          <div data-uipkge="" data-slot="alert-icon" className="absolute top-4 left-4">
            {icon === 'error' ? (
              <AlertCircle className="size-4" aria-hidden="true" />
            ) : icon === 'success' ? (
              <CheckCircle className="size-4" aria-hidden="true" />
            ) : icon === 'warning' ? (
              <TriangleAlert className="size-4" aria-hidden="true" />
            ) : (
              <Info className="size-4" aria-hidden="true" />
            )}
          </div>
        ) : null}
        <div data-uipkge="" data-slot="alert-content" className="[&_p]:text-sm [&_p]:leading-relaxed">
          {title ? <p className="text-sm font-medium">{title}</p> : null}
          {text ? <p className="text-muted-foreground text-sm">{text}</p> : null}
          {children}
        </div>
      </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 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.
   */
  export const alertVariants = cva(
    'relative w-full rounded-lg border p-4 [&>svg]:text-foreground [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has([data-slot=alert-icon])]:pl-12 [&:has([data-slot=alert-description])]:pt-7',
    {
      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://react.uipkge.dev/r/react/alert.json