Alert

An alert dialog that grows out of a droplet in its own middle, for choices that need an answer.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/alert

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

Usage#

import { Alert } from "@/components/liquikit/alert"

<Alert.Root>
  <Alert.Trigger>Delete photo…</Alert.Trigger>
  <Alert.Popup>
    <Alert.Title>Delete this photo?</Alert.Title>
    <Alert.Description>It will be removed from all your devices.</Alert.Description>
    <Alert.Actions>
      <Alert.Close>Cancel</Alert.Close>
      <Alert.Close variant="prominent">Delete</Alert.Close>
    </Alert.Actions>
  </Alert.Popup>
</Alert.Root>

Alert.Trigger and Alert.Close are glass buttons and take the same props. Clicking outside does not close an alert; the user has to choose.

API Reference#

Alert.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 alert 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"
`children`	`ReactNode` The content.	—

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

Accordion Autocomplete