Docs

Alert

Alert

Displays a callout for user attention.

Enable Premium Features

Upgrade to a premium plan to unlock features like unlimited projects and custom domains.

import * as React from "react";
import { InfoIcon } from "lucide-react";
 
import {
  Alert,
  AlertContent,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@/components/ui/alert";
 
export function AlertExample(): React.JSX.Element {
  return (
    <Alert>
      <AlertIcon>
        <InfoIcon />
      </AlertIcon>
      <AlertContent>
        <AlertTitle>Enable Premium Features</AlertTitle>
        <AlertDescription>
          Upgrade to a premium plan to unlock features like unlimited projects and custom domains.
        </AlertDescription>
      </AlertContent>
    </Alert>
  );
}

Installation

npx lotru@latest add ui/alert

Usage

import { Alert } from "@/components/ui/alert";
<Alert>You are viewing Lotru docs.</Alert>

Examples

Default

Enable Premium Features

Upgrade to a premium plan to unlock features like unlimited projects and custom domains.

import * as React from "react";
import { InfoIcon } from "lucide-react";
 
import {
  Alert,
  AlertContent,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@/components/ui/alert";
 
export function AlertExample(): React.JSX.Element {
  return (
    <Alert>
      <AlertIcon>
        <InfoIcon />
      </AlertIcon>
      <AlertContent>
        <AlertTitle>Enable Premium Features</AlertTitle>
        <AlertDescription>
          Upgrade to a premium plan to unlock features like unlimited projects and custom domains.
        </AlertDescription>
      </AlertContent>
    </Alert>
  );
}

Dismissible

Organization created successfully.

import * as React from "react";
import { InfoIcon } from "lucide-react";
 
import { Alert, AlertContent, AlertIcon, AlertTitle } from "@/components/ui/alert";
 
export function AlertExample(): React.JSX.Element {
  return (
    <Alert dismissible>
      <AlertIcon>
        <InfoIcon />
      </AlertIcon>
      <AlertContent>
        <AlertTitle>Organization created successfully.</AlertTitle>
      </AlertContent>
    </Alert>
  );
}