- Home
- Components
- Popover

# Popover

Displays rich content in a portal, triggered by a button.

## Props

### Popover


Prop	Type	Default	Description
...Radix props	ComponentProps<typeof PopoverPrimitive.Root>	-	All Radix Popover root props

### PopoverContent


Prop	Type	Default	Description
align	'start' | 'center' | 'end'	'center'	Content alignment relative to trigger
sideOffset	number	4	Offset in pixels from the trigger
...Radix props	ComponentProps<typeof PopoverPrimitive.Content>	-	All Radix content props

## Usage

```
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80" align="start" onOpenAutoFocus={(e) => {
    e.preventDefault();
  }}>
    <div>
      <div className="space-y-2 mb-2">
        <h4 className="leading-none font-medium">Dimensions</h4>
        <p className="text-muted-foreground text-sm">
          Set the dimensions for the layer.
        </p>
      </div>
      <div className="space-y-2">
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Width</p>
            <InputRoot
              id="width"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Max width</p>
            <InputRoot
              id="maxWidth"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Height</p>
            <InputRoot
              id="height"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Max height</p>
            <InputRoot
              id="maxHeight"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
      </div>
    </div>
  </PopoverContent>
</Popover>
```

### Example

```
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent align="start" sideOffset={8}>Content</PopoverContent>
</Popover>
```