Popover

Use popover for non-modal floating content. Compose Popover.Root with Trigger and Content.

1<script lang="ts">
2	import * as Popover from '~/components/popover';
3	import { buttonVariants } from '~/components/button';
4</script>
5
6<Popover.Root>
7	<Popover.Trigger class={buttonVariants({ variant: 'outline' })}>Open popover</Popover.Trigger>
8	<Popover.Content class="w-80">
9		<div class="grid gap-4">
10			<div class="space-y-2">
11				<h4 class="leading-none font-medium">Dimensions</h4>
12				<p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
13			</div>
14		</div>
15	</Popover.Content>
16</Popover.Root>