Alert

An alert component that displays important messages to the user.

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.

3:Using the default variant with fade animation.

Import and use the Alert component in your project.

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

export default function AlertExample() {
  return (
    <Alert variant="default" animation="fade">
      <AlertTitle>Welcome!</AlertTitle>
      <AlertDescription>This will fade in smoothly.</AlertDescription>
    </Alert>
  );
}

4:Using the warning variant with bounce animation.

Import and use the Alert component in your project.

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>
  );
}

5:Using the error variant with shake animation.

Import and use the Alert component in your project.

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>
  );
}

6:Using the info variant with slide down animation.

Import and use the Alert component in your project.

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>
  );
}