Dialog

A panel that grows out of its button and flies home into it when it closes.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/dialog

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Dialog } from "@/components/liquikit/dialog"

<Dialog.Root>
  <Dialog.Trigger>Edit profile…</Dialog.Trigger>
  <Dialog.Popup>
    <Dialog.Title>Edit profile</Dialog.Title>
    <Dialog.Description>Changes are saved to your account.</Dialog.Description>
    <Dialog.Close variant="prominent">Save</Dialog.Close>
  </Dialog.Popup>
</Dialog.Root>

Dialog.Trigger and Dialog.Close are glass buttons.

API Reference#

Dialog.Root

Prop	Type	Default
`open`	`boolean` Whether the popup is open. Pair it with `onOpenChange` to control it.	—

Also takes every prop of Base UI's dialog, plus className and style.

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"
`closeButton`	`boolean` Shows a close button in the corner.	true
`children`	`ReactNode` The content.	—

Also takes every prop of Base UI's dialog, plus className and style.

Context Menu Field