Feedback

Alert

Apto para servidor

A prominent, inline message.

Vista previa en vivo

Renderizado desde el código fuente instalado de VEXA — los mismos archivos que recibes.

Heads up

Obsidian and Graphite themes are available — try the switch in the header.

Payment failed

Update your card details and retry the charge.

Playground

Ajusta las props y copia el JSX equivalente.

Heads up

Try the theme switch in the header.

Playground

variant

title

description

alert.tsx

<Alert>
  <InfoIcon />
  <div>
    <AlertTitle>Heads up</AlertTitle>
    <AlertDescription>Try the theme switch in the header.</AlertDescription>
  </div>
</Alert>

Instalación

Añade el código del componente a tu proyecto. Las dependencias del registry se resuelven automáticamente.

npx shadcn@latest add https://vexa.valfiguer.com/r/alert.json

Se instala en components/vexa/alert.tsx

Dependencias npm

class-variance-authority

Dependencias del registry

@vexa/utils

Otros items de VEXA que necesita este componente. Instálalos primero — la CLI los resuelve automáticamente.

Código

Cópialo a su ruta destino, o instálalo con el comando de arriba.

components/vexa/alert.tsx

import type * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

export const alertVariants = cva(
  [
    "relative flex w-full gap-3 rounded-vexa-md border px-4 py-3 text-sm",
    "[&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:translate-y-0.5",
  ],
  {
    variants: {
      variant: {
        info: "border-vexa-border bg-vexa-surface text-vexa-foreground [&>svg]:text-vexa-focus",
        success:
          "border-vexa-success/30 bg-vexa-success/10 text-vexa-foreground [&>svg]:text-vexa-success",
        warning:
          "border-vexa-warning/30 bg-vexa-warning/10 text-vexa-foreground [&>svg]:text-vexa-warning",
        danger:
          "border-vexa-danger/30 bg-vexa-danger/10 text-vexa-foreground [&>svg]:text-vexa-danger",
      },
    },
    defaultVariants: {
      variant: "info",
    },
  },
);

export interface AlertProps
  extends React.ComponentProps<"div">, VariantProps<typeof alertVariants> {}

/**
 * Alert — a prominent, inline message.
 *
 * RSC-safe. Defaults to `role="alert"` (assertive) for the common case of a
 * message shown in response to an action; override `role` (e.g. `"status"`) for
 * passive, always-present notices. Include an icon AND text so the intent is
 * not carried by color alone.
 */
export function Alert({ className, variant, role, ...props }: AlertProps) {
  return (
    <div
      data-slot="alert"
      role={role ?? "alert"}
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  );
}

export function AlertTitle({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="alert-title"
      className={cn("mb-1 font-medium tracking-tight", className)}
      {...props}
    />
  );
}

export function AlertDescription({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        "text-sm text-vexa-muted-foreground [&_p]:leading-relaxed",
        className,
      )}
      {...props}
    />
  );
}

JSON del registryr/alert.json

r/alert.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "title": "Alert",
  "description": "A prominent, inline message.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@vexa/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/alert.tsx",
      "type": "registry:ui",
      "target": "components/vexa/alert.tsx",
      "content": "import type * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport const alertVariants = cva(\n  [\n    \"relative flex w-full gap-3 rounded-vexa-md border px-4 py-3 text-sm\",\n    \"[&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:translate-y-0.5\",\n  ],\n  {\n    variants: {\n      variant: {\n        info: \"border-vexa-border bg-vexa-surface text-vexa-foreground [&>svg]:text-vexa-focus\",\n        success:\n          \"border-vexa-success/30 bg-vexa-success/10 text-vexa-foreground [&>svg]:text-vexa-success\",\n        warning:\n          \"border-vexa-warning/30 bg-vexa-warning/10 text-vexa-foreground [&>svg]:text-vexa-warning\",\n        danger:\n          \"border-vexa-danger/30 bg-vexa-danger/10 text-vexa-foreground [&>svg]:text-vexa-danger\",\n      },\n    },\n    defaultVariants: {\n      variant: \"info\",\n    },\n  },\n);\n\nexport interface AlertProps\n  extends React.ComponentProps<\"div\">, VariantProps<typeof alertVariants> {}\n\n/**\n * Alert — a prominent, inline message.\n *\n * RSC-safe. Defaults to `role=\"alert\"` (assertive) for the common case of a\n * message shown in response to an action; override `role` (e.g. `\"status\"`) for\n * passive, always-present notices. Include an icon AND text so the intent is\n * not carried by color alone.\n */\nexport function Alert({ className, variant, role, ...props }: AlertProps) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role={role ?? \"alert\"}\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertTitle({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"alert-title\"\n      className={cn(\"mb-1 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-vexa-muted-foreground [&_p]:leading-relaxed\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "meta": {
    "frameworks": [
      "react",
      "next"
    ],
    "rsc": "server-safe",
    "exports": [
      "Alert",
      "AlertTitle",
      "AlertDescription"
    ],
    "variants": {
      "variant": [
        "info",
        "success",
        "warning",
        "danger"
      ]
    },
    "cssVars": [
      "--vexa-surface",
      "--vexa-border",
      "--vexa-foreground",
      "--vexa-muted-foreground",
      "--vexa-focus",
      "--vexa-success",
      "--vexa-warning",
      "--vexa-danger"
    ],
    "a11y": "Defaults to role=alert; override to role=status for passive notices. Include an icon + text so intent is not color-only.",
    "example": "<Alert variant=\"danger\"><AlertTitle>Payment failed</AlertTitle><AlertDescription>Update your card and retry.</AlertDescription></Alert>",
    "tests": "planned — see docs/README.md#roadmap"
  }
}

Detalles

Variantes

variant: infosuccesswarningdanger

Accesibilidad

Defaults to role=alert; override to role=status for passive notices. Include an icon + text so intent is not color-only.