Playground

Popover

control

Floating content panel anchored to a trigger element

Contextual overlays for filters, pickers, or additional options

Rounded-xl shape with generous padding for premium feel

import { Popover } from "@everydayos/ui";

Usage

Popover with trigger button and content panel

Examples

Popover Form

Popover containing a small form

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Edit Profile</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <Stack spacing="md">
      <Heading as="h4" size="s">Edit name</Heading>
      <div className="grid gap-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" placeholder="Your name" />
      </div>
      <Button size="sm">Save</Button>
    </Stack>
  </PopoverContent>
</Popover>

Composition

Pairs well with

Button

Stack

Input

Label

When to avoid

Need a confirmation — use Dialog instead
Need a simple list of actions — use DropdownMenu instead
Content is always visible — render inline