Alert

Don't overdo it. If you "cry wolf", users will become numb to alerts.
Source code
Your profile has been saved
import { 
  Alert, 
  AlertHeader, 
  AlertBody
} from "rfui";

#Basic

Your profile has been saved
<Alert>Your profile has been saved</Alert>,

#AlertHeader and AlertBody

Success
Your profile has been saved.
<Alert>
  <AlertHeader>Success</AlertHeader>
  <AlertBody>Your profile has been saved.</AlertBody>
</Alert>

#Variant

Set variant to "success", "info", "warning", "danger", or "neutral".
Success
Your profile has been saved.
Note
Your account has been updated.
Warning
Your plan is set to expire.
Danger
Your payment method is inactive.
Note
Your account has been updated.
<Stack class="w-full gap-5">
  <Alert variant="success">
    <AlertHeader>Success</AlertHeader>
    <AlertBody>Your profile has been saved.</AlertBody>
  </Alert>
  <Alert variant="info">
    <AlertHeader>Note</AlertHeader>
    <AlertBody>Your account has been updated.</AlertBody>
  </Alert>
  <Alert variant="warning">
    <AlertHeader>Warning</AlertHeader>
    <AlertBody>Your plan is set to expire.</AlertBody>
  </Alert>
  <Alert variant="danger">
    <AlertHeader>Danger</AlertHeader>
    <AlertBody>Your payment method is inactive.</AlertBody>
  </Alert>
  <Alert variant="neutral">
    <AlertHeader>Note</AlertHeader>
    <AlertBody>Your account has been updated.</AlertBody>
  </Alert>
</Stack>

#Not dismissable

Set isDismissable to false.
Success
Your profile has been saved.
Note
Your account has been updated.
Warning
Your plan is set to expire.
Danger
Your payment method is inactive.
Note
Your account has been updated.
<Stack class="w-full gap-5">
  <Alert isDismissable={false} variant="success">
    <AlertHeader>Success</AlertHeader>
    <AlertBody>Your profile has been saved.</AlertBody>
  </Alert>
  <Alert isDismissable={false} variant="info">
    <AlertHeader>Note</AlertHeader>
    <AlertBody>Your account has been updated.</AlertBody>
  </Alert>
  <Alert isDismissable={false} variant="warning">
    <AlertHeader>Warning</AlertHeader>
    <AlertBody>Your plan is set to expire.</AlertBody>
  </Alert>
  <Alert isDismissable={false} variant="danger">
    <AlertHeader>Danger</AlertHeader>
    <AlertBody>Your payment method is inactive.</AlertBody>
  </Alert>
  <Alert isDismissable={false} variant="neutral">
    <AlertHeader>Note</AlertHeader>
    <AlertBody>Your account has been updated.</AlertBody>
  </Alert>
</Stack>

#Props

PropRequiredDefaultType and notes
variant-"neutral"
'success' | 'info' | 'warning' | 'danger' | 'neutral'
isDismissable-true
boolean
children✔-
ComponentChild
...rest--
Omit<ComponentProps<"div">, "size">
See the docs for rest parameters. For Alert, you could pass anything you normally would pass to <div> because the return value looks something like this:
<div class={containerClass} {...restWithoutClass}>
  {children}
</div>

AlertHeader

PropRequiredDefaultType and notes
children✔-
ComponentChild
...rest--
ComponentProps<"div">

AlertBody

PropRequiredDefaultType and notes
children✔-
ComponentChild
...rest--
ComponentProps<"div">