Alert

'use client';import { InfoIcon } from 'lucide-react';import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';export default function Demo() {  return (    <Alert animated className="w-80">      <InfoIcon />      <AlertTitle>Heads up</AlertTitle>      <AlertDescription>The `animated` prop makes it rise in on mount.</AlertDescription>    </Alert>  );}

Animation

Avec animated, l'alerte monte de 6 px en fondu à son apparition (CSS @starting-style, sans JavaScript). Désactivé par défaut : une alerte rendue avec la page ne bouge pas.

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add alert

Ou depuis le paquet npm :

import { Alert } from '@whoa-studio/ui/alert';

Exports : Alert, AlertTitle, AlertDescription, AlertAction.