Modal / Dialog

Sizes

Choose sm, md or lg to match the amount of content.

"use client"
import {
  Button,

"use client"


import {
  Button,
  Input,
  Modal,
  ModalClose,
  ModalContent,
  ModalDescription,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTrigger
} from "@glinui/ui"


export function ModalSizesExample() {
  return (
    <div className="mx-auto flex flex-wrap items-center justify-center gap-3">
      {(["sm", "md", "lg"] as const).map((size) => (
        <Modal key={size}>
          <ModalTrigger asChild><Button variant="outline" size="sm">{`Size ${size}`}</Button></ModalTrigger>
          <ModalContent size={size}>
            <ModalHeader>
              <ModalTitle>Rename workspace</ModalTitle>
              <ModalDescription>Pick a name your team will recognise.</ModalDescription>
            </ModalHeader>
            <Input aria-label="Workspace name" defaultValue="Lumen" />
            <ModalFooter>
              <ModalClose asChild><Button variant="ghost">Cancel</Button></ModalClose>
              <ModalClose asChild><Button>Save name</Button></ModalClose>
            </ModalFooter>
          </ModalContent>
        </Modal>
      ))}
    </div>
  )
}

Variants

Every look of the shared vocabulary: glinr (the default), plain (shadcn), solid, soft, outline, ghost, gradient and glass. Omit `variant` to follow the ambient design style.

import { Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, ModalTrigger } from "@glinui/ui"
const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const
export function Demo() {

import { Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, ModalTrigger } from "@glinui/ui"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      {variants.map((variant) => (
        <Modal key={variant}>
          <ModalTrigger asChild><Button size="sm" variant="outline">{variant}</Button></ModalTrigger>
          <ModalContent variant={variant} size="sm">
            <ModalHeader>
              <ModalTitle>{variant} modal</ModalTitle>
              <ModalDescription>Same content, different surface.</ModalDescription>
            </ModalHeader>
            <ModalFooter>
              <ModalClose asChild><Button variant="ghost">Close</Button></ModalClose>
              <Button>Continue</Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      ))}
    </div>
  )
}

Glass (opt-in)

variant="glass" is opt-in. It blurs and tints whatever sits behind the panel, so it needs a colourful or photographic backdrop: switch the stage backdrop to see it.

import { Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, ModalTrigger } from "@glinui/ui"
export function Demo() {
  return (

import { Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, ModalTrigger } from "@glinui/ui"


export function Demo() {
  return (
    <Modal>
      <ModalTrigger asChild><Button variant="outline">Open glass modal</Button></ModalTrigger>
      <ModalContent variant="glass">
        <ModalHeader>
          <ModalTitle>Share workspace</ModalTitle>
          <ModalDescription>The page behind stays visible through the panel.</ModalDescription>
        </ModalHeader>
        <ModalFooter>
          <ModalClose asChild><Button variant="ghost">Cancel</Button></ModalClose>
          <Button>Share</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

With Form Content

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

import { Button, Modal, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription } from "@glinui/ui"

export function ModalFormDemo() {
  return (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="glass">Edit Details</Button>
      </ModalTrigger>
      <ModalContent variant="matte">
        <ModalHeader>
          <ModalTitle>Account Settings</ModalTitle>
          <ModalDescription>Update your display name and email address.</ModalDescription>
        </ModalHeader>
        <div className="space-y-3 py-1">
          <div className="space-y-1">
            <Label htmlFor="modal-name">Display Name</Label>
            <Input id="modal-name" variant="glass" placeholder="Your name" />
          </div>
          <div className="space-y-1">
            <Label htmlFor="modal-email">Email</Label>
            <Input id="modal-email" type="email" variant="glass" placeholder="you@example.com" />
          </div>
        </div>
        <ModalFooter>
          <ModalClose asChild>
            <Button variant="ghost">Cancel</Button>
          </ModalClose>
          <Button variant="liquid">Save changes</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

Frosted Variant

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

import { Button, Modal, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription } from "@glinui/ui"

export function ModalFrostedDemo() {
  return (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="frosted">Frosted Modal</Button>
      </ModalTrigger>
      <ModalContent variant="frosted">
        <ModalHeader>
          <ModalTitle>Frosted Glass</ModalTitle>
          <ModalDescription>Heavy frost with 40px blur, 200% saturation, and inner glow.</ModalDescription>
        </ModalHeader>
        <ModalFooter>
          <ModalClose asChild>
            <Button variant="ghost">Close</Button>
          </ModalClose>
          <Button variant="liquid">Continue</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

Confirmation Dialog

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

import { Button, Modal, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription } from "@glinui/ui"

export function ModalConfirmDemo() {
  return (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="matte">Delete Project</Button>
      </ModalTrigger>
      <ModalContent variant="glass" size="sm">
        <ModalHeader>
          <ModalTitle>Are you sure?</ModalTitle>
          <ModalDescription>
            This action cannot be undone. The project and all its data will be permanently deleted.
          </ModalDescription>
        </ModalHeader>
        <ModalFooter>
          <ModalClose asChild>
            <Button variant="ghost">Cancel</Button>
          </ModalClose>
          <Button variant="liquid">Delete</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

Keyboard Interactions

ARIA Attributes

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

Affected properties

Modal

ModalTrigger

ModalContent

ModalHeader

ModalTitle

ModalDescription

ModalFooter

ModalClose