> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Alert

> Prominent messages for important information, warnings, and errors.

export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
  const hostRef = React.useRef(null);
  const handleRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [previewWidth, setPreviewWidth] = React.useState(null);
  const [isDragging, setIsDragging] = React.useState(false);
  const [playgroundHref, setPlaygroundHref] = React.useState(null);
  React.useEffect(function () {
    if (!playground) return;
    var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
    var path = isLocal ? "/playground" : "/docs/playground";
    var url = new URL(path, window.location.href);
    url.hash = "code=" + playground;
    setPlaygroundHref(url.href);
  }, [playground]);
  var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
  React.useEffect(function () {
    if (cardRef.current) {
      var card = cardRef.current.closest(".group");
      if (card) card.classList.remove("group");
    }
    var host = hostRef.current;
    if (!host || !json) return;
    function mount() {
      if (!window.__prefab || !host) return;
      var dark = document.documentElement.classList.contains("dark");
      handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
        dark: dark
      });
      if (bare && host.shadowRoot) {
        var m = host.shadowRoot.querySelector("[data-prefab-mount]");
        if (m) m.style.background = "transparent";
      }
    }
    if (window.__prefab) {
      mount();
    } else {
      if (!window.__prefabLoading) {
        if (!window.__prefabReady) {
          var s = document.createElement("script");
          s.src = "/renderer.js";
          document.head.appendChild(s);
        }
        window.__prefabLoading = new Promise(function (resolve) {
          function check() {
            if (window.__prefabReady) {
              window.__prefabReady.then(resolve);
            } else {
              setTimeout(check, 10);
            }
          }
          check();
        });
      }
      window.__prefabLoading.then(mount);
    }
    var observer = new MutationObserver(function () {
      var dark = document.documentElement.classList.contains("dark");
      if (handleRef.current) handleRef.current.setDark(dark);
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return function () {
      observer.disconnect();
      if (handleRef.current) {
        handleRef.current.unmount();
        handleRef.current = null;
      }
    };
  }, [json]);
  function startResize(e) {
    e.preventDefault();
    var startX = e.clientX;
    var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
    var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
    setIsDragging(true);
    function onMove(ev) {
      var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
      setPreviewWidth(w);
    }
    function onUp() {
      document.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseup", onUp);
      setIsDragging(false);
    }
    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseup", onUp);
  }
  if (bare) {
    return <div ref={hostRef} />;
  }
  if (resizable) {
    return <Card>
        <div ref={cardRef} />
        <div ref={containerRef} style={{
      display: "flex",
      position: "relative",
      overflow: "hidden"
    }}>
          <div ref={hostRef} style={{
      flex: previewWidth ? "none" : 1,
      width: previewWidth ? previewWidth + "px" : undefined,
      minWidth: 0
    }} />
          <div onMouseDown={startResize} style={{
      width: "14px",
      flexShrink: 0,
      cursor: "col-resize",
      background: isDragging ? "var(--border, #e5e7eb)" : "color-mix(in srgb, var(--border, #e5e7eb) 40%, transparent)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "background 0.15s",
      userSelect: "none"
    }}>
            <svg width="6" height="24" style={{
      opacity: 0.5
    }}>
              <circle cx="2" cy="4" r="1.2" fill="currentColor" />
              <circle cx="2" cy="9" r="1.2" fill="currentColor" />
              <circle cx="2" cy="14" r="1.2" fill="currentColor" />
              <circle cx="2" cy="19" r="1.2" fill="currentColor" />
              <circle cx="5" cy="4" r="1.2" fill="currentColor" />
              <circle cx="5" cy="9" r="1.2" fill="currentColor" />
              <circle cx="5" cy="14" r="1.2" fill="currentColor" />
              <circle cx="5" cy="19" r="1.2" fill="currentColor" />
            </svg>
          </div>
          <div style={{
      flex: previewWidth ? 1 : "0 0 24px",
      minWidth: "24px",
      background: "repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--border, #e5e7eb) 3px, var(--border, #e5e7eb) 4px)",
      opacity: 0.4
    }} />
          {previewWidth && <div style={{
      position: "absolute",
      bottom: "8px",
      right: "8px",
      background: "var(--background, white)",
      border: "1px solid var(--border, #e5e7eb)",
      borderRadius: "4px",
      padding: "1px 6px",
      fontSize: "11px",
      fontFamily: "monospace",
      color: "var(--muted-foreground, #6b7280)",
      pointerEvents: "none"
    }}>
              {previewWidth}px
            </div>}
        </div>
        {playgroundHref && <div style={{
      display: "flex",
      justifyContent: "flex-end",
      padding: "4px 0 8px"
    }}>
            <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
      fontSize: "11px",
      opacity: 0.4,
      textDecoration: "none",
      textDecorationLine: "none",
      borderBottom: "none",
      boxShadow: "none",
      display: "inline-flex",
      alignItems: "center",
      gap: "3px",
      transition: "opacity 0.15s",
      fontWeight: 400
    }} onMouseOver={function (e) {
      e.currentTarget.style.opacity = "0.6";
    }} onMouseOut={function (e) {
      e.currentTarget.style.opacity = "0.4";
    }}>
              Edit in Playground
              <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
            </a>
          </div>}
        <div style={{
      marginBottom: "-2rem"
    }}>{children}</div>
      </Card>;
  }
  return <Card>
      <div ref={cardRef} />
      <div ref={hostRef} />
      {playgroundHref && <div style={{
    display: "flex",
    justifyContent: "flex-end",
    padding: "4px 0 8px"
  }}>
          <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
    fontSize: "11px",
    opacity: 0.4,
    textDecoration: "none",
    textDecorationLine: "none",
    borderBottom: "none",
    boxShadow: "none",
    display: "inline-flex",
    alignItems: "center",
    gap: "3px",
    transition: "opacity 0.15s",
    fontWeight: 400
  }} onMouseOver={function (e) {
    e.currentTarget.style.opacity = "0.6";
  }} onMouseOut={function (e) {
    e.currentTarget.style.opacity = "0.4";
  }}>
            Edit in Playground
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
          </a>
        </div>}
      <div style={{
    marginBottom: "-2rem"
  }}>{children}</div>
    </Card>;
};

Alerts draw attention to important information. They pair a title with a description and use color variants to signal intent.

## Basic Usage

<ComponentPreview json={{"view":{"type":"Alert","variant":"default","children":[{"type":"AlertTitle","content":"Heads up!"},{"type":"AlertDescription","content":"You can add components to your app using the CLI."}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQWxlcnQsCiAgICBBbGVydFRpdGxlLAogICAgQWxlcnREZXNjcmlwdGlvbiwKKQoKd2l0aCBBbGVydCgpOgogICAgQWxlcnRUaXRsZSgiSGVhZHMgdXAhIikKICAgIEFsZXJ0RGVzY3JpcHRpb24oIllvdSBjYW4gYWRkIGNvbXBvbmVudHMgdG8geW91ciBhcHAgdXNpbmcgdGhlIENMSS4iKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import (
        Alert,
        AlertTitle,
        AlertDescription,
    )

    with Alert():
        AlertTitle("Heads up!")
        AlertDescription("You can add components to your app using the CLI.")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "type": "Alert",
        "variant": "default",
        "children": [
          {"type": "AlertTitle", "content": "Heads up!"},
          {
            "type": "AlertDescription",
            "content": "You can add components to your app using the CLI."
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## With Icons

Pass an `icon` prop to render a lucide icon alongside the alert content. The icon automatically aligns with the title and description.

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"type":"Alert","variant":"default","icon":"circle-alert","children":[{"type":"AlertTitle","content":"Heads up!"},{"type":"AlertDescription","content":"You can add components to your app using the CLI."}]},{"type":"Alert","variant":"destructive","icon":"circle-x","children":[{"type":"AlertTitle","content":"Error"},{"type":"AlertDescription","content":"Your session has expired. Please log in again."}]},{"type":"Alert","variant":"success","icon":"circle-check","children":[{"type":"AlertTitle","content":"Success"},{"type":"AlertDescription","content":"Your changes have been saved successfully."}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQWxlcnQsCiAgICBBbGVydERlc2NyaXB0aW9uLAogICAgQWxlcnRUaXRsZSwKICAgIENvbHVtbiwKKQoKd2l0aCBDb2x1bW4oZ2FwPTQpOgogICAgd2l0aCBBbGVydChpY29uPSJjaXJjbGUtYWxlcnQiKToKICAgICAgICBBbGVydFRpdGxlKCJIZWFkcyB1cCEiKQogICAgICAgIEFsZXJ0RGVzY3JpcHRpb24oCiAgICAgICAgICAgICJZb3UgY2FuIGFkZCBjb21wb25lbnRzIHRvIHlvdXIgYXBwICIKICAgICAgICAgICAgInVzaW5nIHRoZSBDTEkuIgogICAgICAgICkKCiAgICB3aXRoIEFsZXJ0KHZhcmlhbnQ9ImRlc3RydWN0aXZlIiwgaWNvbj0iY2lyY2xlLXgiKToKICAgICAgICBBbGVydFRpdGxlKCJFcnJvciIpCiAgICAgICAgQWxlcnREZXNjcmlwdGlvbigKICAgICAgICAgICAgIllvdXIgc2Vzc2lvbiBoYXMgZXhwaXJlZC4gUGxlYXNlIGxvZyAiCiAgICAgICAgICAgICJpbiBhZ2Fpbi4iCiAgICAgICAgKQoKICAgIHdpdGggQWxlcnQodmFyaWFudD0ic3VjY2VzcyIsIGljb249ImNpcmNsZS1jaGVjayIpOgogICAgICAgIEFsZXJ0VGl0bGUoIlN1Y2Nlc3MiKQogICAgICAgIEFsZXJ0RGVzY3JpcHRpb24oCiAgICAgICAgICAgICJZb3VyIGNoYW5nZXMgaGF2ZSBiZWVuIHNhdmVkICIKICAgICAgICAgICAgInN1Y2Nlc3NmdWxseS4iCiAgICAgICAgKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import (
        Alert,
        AlertDescription,
        AlertTitle,
        Column,
    )

    with Column(gap=4):
        with Alert(icon="circle-alert"):
            AlertTitle("Heads up!")
            AlertDescription(
                "You can add components to your app "
                "using the CLI."
            )

        with Alert(variant="destructive", icon="circle-x"):
            AlertTitle("Error")
            AlertDescription(
                "Your session has expired. Please log "
                "in again."
            )

        with Alert(variant="success", icon="circle-check"):
            AlertTitle("Success")
            AlertDescription(
                "Your changes have been saved "
                "successfully."
            )
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-4",
        "type": "Column",
        "children": [
          {
            "type": "Alert",
            "variant": "default",
            "icon": "circle-alert",
            "children": [
              {"type": "AlertTitle", "content": "Heads up!"},
              {
                "type": "AlertDescription",
                "content": "You can add components to your app using the CLI."
              }
            ]
          },
          {
            "type": "Alert",
            "variant": "destructive",
            "icon": "circle-x",
            "children": [
              {"type": "AlertTitle", "content": "Error"},
              {
                "type": "AlertDescription",
                "content": "Your session has expired. Please log in again."
              }
            ]
          },
          {
            "type": "Alert",
            "variant": "success",
            "icon": "circle-check",
            "children": [
              {"type": "AlertTitle", "content": "Success"},
              {
                "type": "AlertDescription",
                "content": "Your changes have been saved successfully."
              }
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Variants

Five variants cover different semantic intents — from neutral information to success confirmations and error states.

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"type":"Alert","variant":"default","children":[{"type":"AlertTitle","content":"Default"},{"type":"AlertDescription","content":"A neutral informational message."}]},{"type":"Alert","variant":"destructive","children":[{"type":"AlertTitle","content":"Error"},{"type":"AlertDescription","content":"Your session has expired. Please log in again."}]},{"type":"Alert","variant":"success","children":[{"type":"AlertTitle","content":"Success"},{"type":"AlertDescription","content":"Your changes have been saved successfully."}]},{"type":"Alert","variant":"warning","children":[{"type":"AlertTitle","content":"Warning"},{"type":"AlertDescription","content":"Your trial expires in 3 days."}]},{"type":"Alert","variant":"info","children":[{"type":"AlertTitle","content":"Info"},{"type":"AlertDescription","content":"A new version is available for download."}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQWxlcnQsCiAgICBBbGVydERlc2NyaXB0aW9uLAogICAgQWxlcnRUaXRsZSwKICAgIENvbHVtbiwKKQoKd2l0aCBDb2x1bW4oZ2FwPTQpOgogICAgd2l0aCBBbGVydCgpOgogICAgICAgIEFsZXJ0VGl0bGUoIkRlZmF1bHQiKQogICAgICAgIEFsZXJ0RGVzY3JpcHRpb24oIkEgbmV1dHJhbCBpbmZvcm1hdGlvbmFsIG1lc3NhZ2UuIikKCiAgICB3aXRoIEFsZXJ0KHZhcmlhbnQ9ImRlc3RydWN0aXZlIik6CiAgICAgICAgQWxlcnRUaXRsZSgiRXJyb3IiKQogICAgICAgIEFsZXJ0RGVzY3JpcHRpb24oIllvdXIgc2Vzc2lvbiBoYXMgZXhwaXJlZC4gUGxlYXNlIGxvZyBpbiBhZ2Fpbi4iKQoKICAgIHdpdGggQWxlcnQodmFyaWFudD0ic3VjY2VzcyIpOgogICAgICAgIEFsZXJ0VGl0bGUoIlN1Y2Nlc3MiKQogICAgICAgIEFsZXJ0RGVzY3JpcHRpb24oIllvdXIgY2hhbmdlcyBoYXZlIGJlZW4gc2F2ZWQgc3VjY2Vzc2Z1bGx5LiIpCgogICAgd2l0aCBBbGVydCh2YXJpYW50PSJ3YXJuaW5nIik6CiAgICAgICAgQWxlcnRUaXRsZSgiV2FybmluZyIpCiAgICAgICAgQWxlcnREZXNjcmlwdGlvbigiWW91ciB0cmlhbCBleHBpcmVzIGluIDMgZGF5cy4iKQoKICAgIHdpdGggQWxlcnQodmFyaWFudD0iaW5mbyIpOgogICAgICAgIEFsZXJ0VGl0bGUoIkluZm8iKQogICAgICAgIEFsZXJ0RGVzY3JpcHRpb24oIkEgbmV3IHZlcnNpb24gaXMgYXZhaWxhYmxlIGZvciBkb3dubG9hZC4iKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import (
        Alert,
        AlertDescription,
        AlertTitle,
        Column,
    )

    with Column(gap=4):
        with Alert():
            AlertTitle("Default")
            AlertDescription("A neutral informational message.")

        with Alert(variant="destructive"):
            AlertTitle("Error")
            AlertDescription("Your session has expired. Please log in again.")

        with Alert(variant="success"):
            AlertTitle("Success")
            AlertDescription("Your changes have been saved successfully.")

        with Alert(variant="warning"):
            AlertTitle("Warning")
            AlertDescription("Your trial expires in 3 days.")

        with Alert(variant="info"):
            AlertTitle("Info")
            AlertDescription("A new version is available for download.")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-4",
        "type": "Column",
        "children": [
          {
            "type": "Alert",
            "variant": "default",
            "children": [
              {"type": "AlertTitle", "content": "Default"},
              {"type": "AlertDescription", "content": "A neutral informational message."}
            ]
          },
          {
            "type": "Alert",
            "variant": "destructive",
            "children": [
              {"type": "AlertTitle", "content": "Error"},
              {
                "type": "AlertDescription",
                "content": "Your session has expired. Please log in again."
              }
            ]
          },
          {
            "type": "Alert",
            "variant": "success",
            "children": [
              {"type": "AlertTitle", "content": "Success"},
              {
                "type": "AlertDescription",
                "content": "Your changes have been saved successfully."
              }
            ]
          },
          {
            "type": "Alert",
            "variant": "warning",
            "children": [
              {"type": "AlertTitle", "content": "Warning"},
              {"type": "AlertDescription", "content": "Your trial expires in 3 days."}
            ]
          },
          {
            "type": "Alert",
            "variant": "info",
            "children": [
              {"type": "AlertTitle", "content": "Info"},
              {
                "type": "AlertDescription",
                "content": "A new version is available for download."
              }
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Without Title

For simple messages, you can use just a description:

<ComponentPreview json={{"view":{"type":"Alert","variant":"default","children":[{"type":"AlertDescription","content":"Your changes have been saved."}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQWxlcnQsCiAgICBBbGVydERlc2NyaXB0aW9uLAopCgp3aXRoIEFsZXJ0KCk6CiAgICBBbGVydERlc2NyaXB0aW9uKCJZb3VyIGNoYW5nZXMgaGF2ZSBiZWVuIHNhdmVkLiIpCg">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import (
        Alert,
        AlertDescription,
    )

    with Alert():
        AlertDescription("Your changes have been saved.")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "type": "Alert",
        "variant": "default",
        "children": [{"type": "AlertDescription", "content": "Your changes have been saved."}]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## In Context

Alerts work well inside cards or at the top of a page to communicate status:

<ComponentPreview json={{"view":{"type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Deployment"}]},{"type":"CardContent","children":[{"cssClass":"gap-4","type":"Column","children":[{"type":"Alert","variant":"default","children":[{"type":"AlertTitle","content":"Maintenance Window"},{"type":"AlertDescription","content":"Deployments are paused from 2:00\u20134:00 AM UTC."}]},{"type":"Alert","variant":"default","children":[{"type":"AlertTitle","content":"Latest Deploy"},{"type":"AlertDescription","content":"v2.1.0 deployed successfully 3 hours ago."}]}]}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQ2FyZCwKICAgIENhcmRIZWFkZXIsCiAgICBDYXJkVGl0bGUsCiAgICBDYXJkQ29udGVudCwKICAgIEFsZXJ0LAogICAgQWxlcnRUaXRsZSwKICAgIEFsZXJ0RGVzY3JpcHRpb24sCiAgICBDb2x1bW4sCikKCndpdGggQ2FyZCgpOgogICAgd2l0aCBDYXJkSGVhZGVyKCk6CiAgICAgICAgQ2FyZFRpdGxlKCJEZXBsb3ltZW50IikKICAgIHdpdGggQ2FyZENvbnRlbnQoKToKICAgICAgICB3aXRoIENvbHVtbihnYXA9NCk6CiAgICAgICAgICAgIHdpdGggQWxlcnQoKToKICAgICAgICAgICAgICAgIEFsZXJ0VGl0bGUoIk1haW50ZW5hbmNlIFdpbmRvdyIpCiAgICAgICAgICAgICAgICBBbGVydERlc2NyaXB0aW9uKCJEZXBsb3ltZW50cyBhcmUgcGF1c2VkIGZyb20gMjowMOKAkzQ6MDAgQU0gVVRDLiIpCiAgICAgICAgICAgIHdpdGggQWxlcnQoKToKICAgICAgICAgICAgICAgIEFsZXJ0VGl0bGUoIkxhdGVzdCBEZXBsb3kiKQogICAgICAgICAgICAgICAgQWxlcnREZXNjcmlwdGlvbigidjIuMS4wIGRlcGxveWVkIHN1Y2Nlc3NmdWxseSAzIGhvdXJzIGFnby4iKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import (
        Card,
        CardHeader,
        CardTitle,
        CardContent,
        Alert,
        AlertTitle,
        AlertDescription,
        Column,
    )

    with Card():
        with CardHeader():
            CardTitle("Deployment")
        with CardContent():
            with Column(gap=4):
                with Alert():
                    AlertTitle("Maintenance Window")
                    AlertDescription("Deployments are paused from 2:00–4:00 AM UTC.")
                with Alert():
                    AlertTitle("Latest Deploy")
                    AlertDescription("v2.1.0 deployed successfully 3 hours ago.")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "type": "Card",
        "children": [
          {
            "type": "CardHeader",
            "children": [{"type": "CardTitle", "content": "Deployment"}]
          },
          {
            "type": "CardContent",
            "children": [
              {
                "cssClass": "gap-4",
                "type": "Column",
                "children": [
                  {
                    "type": "Alert",
                    "variant": "default",
                    "children": [
                      {"type": "AlertTitle", "content": "Maintenance Window"},
                      {
                        "type": "AlertDescription",
                        "content": "Deployments are paused from 2:00\u20134:00 AM UTC."
                      }
                    ]
                  },
                  {
                    "type": "Alert",
                    "variant": "default",
                    "children": [
                      {"type": "AlertTitle", "content": "Latest Deploy"},
                      {
                        "type": "AlertDescription",
                        "content": "v2.1.0 deployed successfully 3 hours ago."
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Alert Parameters">
  <ParamField body="variant" type="str" default="default">
    Visual style: `"default"`, `"destructive"`, `"success"`, `"warning"`, `"info"`.
  </ParamField>

  <ParamField body="icon" type="str | None" default="None">
    Lucide icon name in kebab-case (e.g., `"circle-alert"`, `"circle-check"`). Browse icons at [lucide.dev/icons](https://lucide.dev/icons).
  </ParamField>

  <ParamField body="css_class" type="str | None" default="None">
    Additional Tailwind CSS classes.
  </ParamField>
</Card>

<Card icon="code" title="AlertTitle Parameters">
  <ParamField body="content" type="str" required>
    Title text. Can be passed as a positional argument.
  </ParamField>

  <ParamField body="css_class" type="str | None" default="None">
    Additional Tailwind CSS classes.
  </ParamField>
</Card>

<Card icon="code" title="AlertDescription Parameters">
  <ParamField body="content" type="str" required>
    Description text. Can be passed as a positional argument.
  </ParamField>

  <ParamField body="css_class" type="str | None" default="None">
    Additional Tailwind CSS classes.
  </ParamField>
</Card>

## Protocol Reference

```json Alert theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "type": "Alert",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "variant?": "default | destructive | success | warning | info | string",
  "icon?": "string",
  "cssClass?": "string"
}
```

```json AlertTitle theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "type": "AlertTitle",
  "id?": "string",
  "onMount?": "any",
  "content": "string (required)",
  "cssClass?": "string"
}
```

```json AlertDescription theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "type": "AlertDescription",
  "id?": "string",
  "onMount?": "any",
  "content": "string (required)",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Alert](/protocol/alert), [AlertTitle](/protocol/alert-title), [AlertDescription](/protocol/alert-description).