Overlays

Popover

Floating content anchored to a trigger.

Import

tsx

import { Popover } from "@cronus-ui/ui";

bash

npx cronus-ui add popover

Examples

With content

A floating surface anchored to a trigger — ideal for inline editors and pickers.

tsx

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Dimensions</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80" align="start">
    <div className="flex flex-col gap-4">
      <div className="flex flex-col gap-1">
        <h4 className="text-sm font-medium text-fg">Dimensions</h4>
        <p className="text-sm text-fg-secondary">Set the dimensions for the layer.</p>
      </div>
      <div className="grid gap-3">
        <div className="grid grid-cols-3 items-center gap-3">
          <Label htmlFor="width">Width</Label>
          <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
        </div>
        <div className="grid grid-cols-3 items-center gap-3">
          <Label htmlFor="height">Height</Label>
          <Input id="height" defaultValue="auto" className="col-span-2 h-8" />
        </div>
      </div>
    </div>
  </PopoverContent>
</Popover>