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$

Wrap ModalTrigger around a trigger element and place your dialog structure inside ModalContent. The content panel is fixed, centered, and constrained to min(92vw, 34rem) by default. Use variant (default | glass | matte) and size (sm | md | lg) on ModalContent for visual tuning.

TSX

1import { Button, Modal, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription } from "@glinui/ui"
2
3export function ModalBasicDemo() {
4return (
5  <Modal>
6    <ModalTrigger asChild>
7      <Button variant="glass">Open Modal</Button>
8    </ModalTrigger>
9    <ModalContent variant="glass">
10      <ModalHeader>
11        <ModalTitle>Edit Profile</ModalTitle>
12        <ModalDescription>Make changes to your profile here.</ModalDescription>
13      </ModalHeader>
14      <div className="rounded-xl border border-black/10 bg-black/[0.02] p-3 text-sm text-neutral-700 dark:border-white/[0.14] dark:bg-white/[0.04] dark:text-neutral-200">
15        {"You can pass variant and size to ModalContent to tune the visual weight for each workflow."}
16      </div>
17      <ModalFooter>
18        <ModalClose asChild>
19          <Button variant="ghost">Cancel</Button>
20        </ModalClose>
21        <Button variant="liquid">Save changes</Button>
22      </ModalFooter>
23    </ModalContent>
24  </Modal>
25)
26}

Examples$

With Form Content$

Place form fields inside the body area between ModalHeader and ModalFooter.

TSX

1import { Button, Modal, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription } from "@glinui/ui"
2
3export function ModalFormDemo() {
4return (
5  <Modal>
6    <ModalTrigger asChild>
7      <Button variant="glass">Edit Details</Button>
8    </ModalTrigger>
9    <ModalContent variant="matte">
10      <ModalHeader>
11        <ModalTitle>Account Settings</ModalTitle>
12        <ModalDescription>Update your display name and email address.</ModalDescription>
13      </ModalHeader>
14      <div className="space-y-3 py-1">
15        <div className="space-y-1">
16          <Label htmlFor="modal-name">Display Name</Label>
17          <Input id="modal-name" variant="glass" placeholder="Your name" />
18        </div>
19        <div className="space-y-1">
20          <Label htmlFor="modal-email">Email</Label>
21          <Input id="modal-email" type="email" variant="glass" placeholder="you@example.com" />
22        </div>
23      </div>
24      <ModalFooter>
25        <ModalClose asChild>
26          <Button variant="ghost">Cancel</Button>
27        </ModalClose>
28        <Button variant="liquid">Save changes</Button>
29      </ModalFooter>
30    </ModalContent>
31  </Modal>
32)
33}

Frosted Variant$

Use variant="frosted" for a heavier frost with stronger blur and inner glow. Great for prominent dialogs.

TSX

1import { Button, Modal, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription } from "@glinui/ui"
2
3export function ModalFrostedDemo() {
4return (
5  <Modal>
6    <ModalTrigger asChild>
7      <Button variant="frosted">Frosted Modal</Button>
8    </ModalTrigger>
9    <ModalContent variant="frosted">
10      <ModalHeader>
11        <ModalTitle>Frosted Glass</ModalTitle>
12        <ModalDescription>Heavy frost with 40px blur, 200% saturation, and inner glow.</ModalDescription>
13      </ModalHeader>
14      <ModalFooter>
15        <ModalClose asChild>
16          <Button variant="ghost">Close</Button>
17        </ModalClose>
18        <Button variant="liquid">Continue</Button>
19      </ModalFooter>
20    </ModalContent>
21  </Modal>
22)
23}

Confirmation Dialog$

Use a short ModalDescription and a destructive action button for irreversible operations.

TSX

1import { Button, Modal, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription } from "@glinui/ui"
2
3export function ModalConfirmDemo() {
4return (
5  <Modal>
6    <ModalTrigger asChild>
7      <Button variant="matte">Delete Project</Button>
8    </ModalTrigger>
9    <ModalContent variant="glass" size="sm">
10      <ModalHeader>
11        <ModalTitle>Are you sure?</ModalTitle>
12        <ModalDescription>
13          This action cannot be undone. The project and all its data will be permanently deleted.
14        </ModalDescription>
15      </ModalHeader>
16      <ModalFooter>
17        <ModalClose asChild>
18          <Button variant="ghost">Cancel</Button>
19        </ModalClose>
20        <Button variant="liquid">Delete</Button>
21      </ModalFooter>
22    </ModalContent>
23  </Modal>
24)
25}

Accessibility$

Focus is trapped inside the dialog while open.
Escape closes the dialog and returns focus to the trigger.
ModalTitle and ModalDescription provide aria-labelledby and aria-describedby on the dialog element.
The backdrop overlay blocks interaction with background content.

Reduced Motion$

The overlay fade and content scale animations respect prefers-reduced-motion and collapse to instant transitions.

API Reference$

Modal root follows Radix Dialog.Root control props (open, defaultOpen, onOpenChange, modal).

ModalContent$

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

Source$

TSX

1import {
2  Modal,
3  ModalTrigger,
4  ModalClose,
5  ModalPortal,
6  ModalOverlay,
7  ModalContent,
8  ModalHeader,
9  ModalFooter,
10  ModalTitle,
11  ModalDescription,
12} from "@glinui/ui"

packages/ui/src/components/modal.tsx

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