Modal

Dialog overlay with header, body, footer, and close sub-components. Wraps bits-ui Dialog.

Example

Props

Modal.Root

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls modal visibility (bindable)
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes
`onclose`	`() => void`	—	Callback when modal closes
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Modal content

Modal.Header / Modal.Body / Modal.Footer

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Section content

Modal.Close

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	`"x"`	Close button content

Usage

<script>
  import { Modal, Button } from '@chrissnell/chonky-ui';

  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Open Modal</Button>
<Modal.Root bind:open>
  <Modal.Header>
    <h3>Title</h3>
    <Modal.Close />
  </Modal.Header>
  <Modal.Body>
    <p>Body content here.</p>
  </Modal.Body>
  <Modal.Footer>
    <Button onclick={() => (open = false)}>Close</Button>
    <Button variant="primary">Save</Button>
  </Modal.Footer>
</Modal.Root>