Components
Modal
A bordered overlay container with title and Escape key handling
A bordered container that overlays content, optionally displays a title, and listens for the Escape key to trigger a close callback.
Modal
Run demo
bunx @gridland/demo modalcurl -fsSL https://raw.githubusercontent.com/thoughtfulllc/gridland/main/scripts/run-demo.sh | bash -s modalInstallation
bunx shadcn@latest add @gridland/modalUsage
import { Modal } from "@/components/ui/modal"<Modal title="Settings" onClose={() => setOpen(false)}>
<text>Modal content here</text>
</Modal>Examples
With Title
Display a bold title at the top of the bordered container.
<Modal title="Preferences" onClose={() => setOpen(false)}>
<text>Your settings</text>
</Modal>Border Styles
Use the borderStyle prop to change the border character set.
<Modal title="Single" borderStyle="single">
<text>Content</text>
</Modal>
<Modal title="Double" borderStyle="double">
<text>Content</text>
</Modal>
<Modal title="Heavy" borderStyle="heavy">
<text>Content</text>
</Modal>Custom Border Color
Override the default border color.
<Modal title="Alert" borderColor="#FF6B6B" onClose={() => setOpen(false)}>
<text>Something went wrong</text>
</Modal>Without Title
Omit the title prop for a plain bordered container.
<Modal onClose={() => setOpen(false)}>
<text>Plain modal content</text>
</Modal>Controls
- Escape: Calls
onClosewhen provided
API Reference
Modal
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Content rendered inside the modal |
title | string | - | Title displayed at the top inside the border |
borderColor | string | theme.muted | Color of the border |
borderStyle | "single" | "double" | "rounded" | "heavy" | "rounded" | Border character set |
onClose | () => void | - | Called when Escape is pressed |
useKeyboard | (handler: (event: any) => void) => void | - | Keyboard hook from @opentui/react |