Popover Example

How to use this popover

Props

No props in it!

Playground

Import from @filigran/ui :

Import {Popover, PopoverTrigger, PopoverContent} from '@filigran/ui'


       <Popover>
<PopoverTrigger asChild>
  <Button variant="outline">Open popover</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
    We can put anything in the content :
  <div>
    <div>
      <h2>Dimensions</h2>
      <p>
        Set the dimensions for the layer.
      </p>
    </div>
    <div className="grid gap-2">
      <div className="grid grid-cols-3 items-center gap-4">
        <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-4">
        <Label htmlFor="maxWidth">Max. width</Label>
        <Input
          id="maxWidth"
          defaultValue="300px"
          className="col-span-2 h-8"
        />
      </div>

        </div>
      </div>
    </PopoverContent>
  </Popover>