Primitive / Moleculestable

Modal / Dialog

Layered dialog for focused tasks or confirmations.

@glinui/uiComponent: modal

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add modal

Usage

TSX

1import { Modal, ModalTrigger, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalFooter, ModalClose, Button } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Modal>
6      <ModalTrigger asChild><Button>Open Modal</Button></ModalTrigger>
7      <ModalContent>
8        <ModalHeader>
9          <ModalTitle>Edit Profile</ModalTitle>
10          <ModalDescription>Make changes to your profile.</ModalDescription>
11        </ModalHeader>
12        <ModalFooter>
13          <ModalClose asChild><Button variant="ghost">Cancel</Button></ModalClose>
14          <Button>Save</Button>
15        </ModalFooter>
16      </ModalContent>
17    </Modal>
18  )
19}

Accessibility

Built on Radix Dialog with focus trapping.
ModalTitle is required for screen readers.
Background interaction blocked when modal.

Keyboard Interactions

Key	Action
`Escape`	Close the modal.
`Tab`	Cycle focus within the modal.

ARIA Attributes

`role="dialog"`
`aria-modal="true"`
`aria-labelledby`
`aria-describedby`

Reduced Motion

Open/close transitions respect `prefers-reduced-motion`.

Affected properties

opacitytransform

API Reference

`Modal`

Prop	Type	Required	Default	Description
`open`	`boolean`	-	`-`	Controlled open state.
`defaultOpen`	`boolean`	-	`-`	Initial open state.
`onOpenChange`	`(open: boolean) => void`	-	`-`	Open state change handler.
`modal`	`boolean`	-	`true`	Trap focus and block background interaction.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from modalContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "matte"`	No	`"glass"`	Variant option from modalContentVariants.

`ModalTrigger`

Prop	Type	Required	Default	Description
`asChild`	`boolean`	-	`false`	Render as child element.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from modalContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "matte"`	No	`"glass"`	Variant option from modalContentVariants.

`ModalContent`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	`-`	Called when Escape is pressed.
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	-	`-`	Called when clicking outside.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from modalContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "matte"`	No	`"glass"`	Variant option from modalContentVariants.

`ModalHeader`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from modalContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "matte"`	No	`"glass"`	Variant option from modalContentVariants.

`ModalTitle`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from modalContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "matte"`	No	`"glass"`	Variant option from modalContentVariants.

`ModalDescription`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from modalContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "matte"`	No	`"glass"`	Variant option from modalContentVariants.

`ModalFooter`

Prop	Type	Required	Default	Description
`className`	`string`	-	`-`	Additional class names.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from modalContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "matte"`	No	`"glass"`	Variant option from modalContentVariants.

`ModalClose`

Prop	Type	Required	Default	Description
`asChild`	`boolean`	-	`false`	Render as child element.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from modalContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "matte"`	No	`"glass"`	Variant option from modalContentVariants.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Modal,Dialog } from "@glinui/ui"

Source Files

modal.tsx

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/modal.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

ModalProps