Popover
A floating panel that appears next to a trigger element.
'use client';
import { Button } from '@/components/ui/button';
import {
Popover,
PopoverDescription,
PopoverPopup,
PopoverTitle,
PopoverTrigger,
} from '@/components/ui/popover';
export function PopoverDefault() {
return (
<Popover>
<PopoverTrigger render={<Button variant='outline' />}>
Open Popover
</PopoverTrigger>
<PopoverPopup className='w-72'>
<PopoverTitle>Dimensions</PopoverTitle>
<PopoverDescription className='mt-1'>
Set the dimensions for the layer.
</PopoverDescription>
</PopoverPopup>
</Popover>
);
}
Installation
Usage
import {
Popover,
PopoverDescription,
PopoverPopup,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover"<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverPopup>
<PopoverTitle>Title</PopoverTitle>
<PopoverDescription>Description goes here.</PopoverDescription>
</PopoverPopup>
</Popover>Examples
With Form
'use client';
import { Button } from '@/components/ui/button';
import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import {
Popover,
PopoverDescription,
PopoverPopup,
PopoverTitle,
PopoverTrigger,
} from '@/components/ui/popover';
export function PopoverWithForm() {
return (
<Popover>
<PopoverTrigger render={<Button variant='outline' />}>
Edit Profile
</PopoverTrigger>
<PopoverPopup className='w-80'>
<PopoverTitle>Edit Profile</PopoverTitle>
<PopoverDescription className='mt-1'>
Make changes to your profile here.
</PopoverDescription>
<div className='mt-4 flex flex-col gap-3'>
<Field>
<FieldLabel>Name</FieldLabel>
<Input defaultValue='John Doe' />
</Field>
<Field>
<FieldLabel>Email</FieldLabel>
<Input type='email' defaultValue='john@example.com' />
</Field>
<Button className='mt-2'>Save changes</Button>
</div>
</PopoverPopup>
</Popover>
);
}