Alert

npm package: import it from 'flootlets'

bun add flootlets

Or copy it in with the shadcn CLI: import it from '@/components/ui/…'

npx shadcn@latest add https://dyeoh.github.io/flootlets/r/alert.json

Both need Tailwind CSS v4; see Installation for the setup.

Kuih Lapis just sold out

Only 1 was left when you checked out. We've updated your cart.

Orders placed after 3pm ship the next working day.

Your details were saved.

Free delivery over RM 100

Applies to West Malaysia.

import { createSignal, Show } from 'solid-js';
export default function AlertExamples() {
  const [shown, setShown] = createSignal(true);
  return (
    <Stack gap={3} class="w-full">
      <Alert variant="destructive" title="Kuih Lapis just sold out">
        Only 1 was left when you checked out. We've updated your cart.
      </Alert>
      <Alert variant="warning">Orders placed after 3pm ship the next working day.</Alert>
      <Alert variant="success">Your details were saved.</Alert>
      <Show when={shown()}>
        <Alert title="Free delivery over RM 100" onDismiss={() => setShown(false)}>
          Applies to West Malaysia.
        </Alert>
      </Show>
    </Stack>
  );
}

Use an Alert for messages tied to the page or a form that the shopper may need to act on. A destructive alert is a role="alert", announced straight away; the other variants are role="status", announced when the screen reader is free. With onDismiss it gets a labelled close button.

The gnerkulfloot API’s checkout errors carry a code (out_of_stock, shipping_unavailable…). Map those to friendly text in an Alert near the place it applies.

Prop	Type	Default
variant	'default' | 'destructive' | 'success' | 'warning'	'default'
title	JSX
onDismiss	() => void	Shows the dismiss button
dismissLabel	string	'Dismiss'

Classes: alertVariants({ variant }). Parts: data-slot="alert", alert-title, alert-description.