• Logo

    Elementra UI

    v0.1.7 - Documentation
  1. Docs
  3. Components/Alert/

Alert

An alert component that displays important messages to the user with customizable variants and animations.

1Installation

npm i elementra-ui

2Add Components Using CLI

npx elementra-ui add

Select components using the up/down arrow keys. Press spacebar to select multiple components, then press enter to add them to your src folder.

3Component Preview

Success!
This alert will slide up smoothly with a success variant.

4More Examples

Using the warning variant with bounce animation.

Import and use the Alert component with different variants and animations.

import { Alert, AlertTitle, AlertDescription } from "./components/ui/alert";

export default function AlertExample() {
  return (
    <Alert variant="warning" animation="bounce">
      <AlertTitle>Attention!</AlertTitle>
      <AlertDescription>This alert will bounce.</AlertDescription>
    </Alert>
  );
}

Using the error variant with shake animation.

Import and use the Alert component with different variants and animations.

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

export default function AlertExample() {
  return (
    <Alert variant="error" animation="shake">
      <AlertTitle>Error!</AlertTitle>
      <AlertDescription>This alert will shake to grab attention.</AlertDescription>
    </Alert>
  );
}

Using the info variant with slide down animation.

Import and use the Alert component with different variants and animations.

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

export default function AlertExample() {
  return (
    <Alert variant="info" animation="slideDown">
      <AlertTitle>Info!</AlertTitle>
      <AlertDescription>This alert will slide down from the top.</AlertDescription>
    </Alert>
  );
}

5API Reference

Alert Props

PropTypeDefaultDescription
variantstring"default"Alert variant: default, success, warning, error, info
animationstring"fade"Animation type: fade, bounce, shake, slideDown, slideUp
childrenReactNode-The content of the alert