Dialog

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/dialog.json

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

Remove from cart

import { createSignal } from 'solid-js';
export default function DialogExample() {
  const [open, setOpen] = createSignal(false);
  return (
    <Dialog
      title="Remove Kuih Lapis?"
      description="It will be taken out of your cart. You can add it again later."
      trigger={{ children: 'Remove from cart', variant: 'destructive' }}
      open={open()}
      onOpenChange={setOpen}
      size="sm"
      footer={
        <>
          <Button variant="ghost" onClick={() => setOpen(false)}>
            Keep it
          </Button>
          <Button onClick={() => setOpen(false)}>Remove</Button>
        </>
      }
    />
  );
}

Built on Kobalte’s Dialog. When it opens, focus moves inside and stays inside (Tab cycles through its controls). Escape, the × button or clicking outside closes it, and focus goes back to whatever opened it. The page behind doesn’t scroll. The title names the dialog for screen readers, and description is read with it.

Give it a trigger (props for the Button that opens it), or leave the trigger out and control it with open / onOpenChange from your own button.

Prop	Type
title	string	Required. Heading and accessible name
description	JSX
children	JSX	The body
footer	JSX	Actions, right-aligned
trigger	Button props	A button that opens it
open / defaultOpen / onOpenChange		Control it yourself
size	'sm' | 'default' | 'lg'	Width; default default (32rem)
closeLabel	string	Default “Close”