Popover

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

Preview

Open popover

Code

import Button from '@dinui/react/button'
import Input from '@dinui/react/input'
import Label from '@dinui/react/label'
import Popover from '@dinui/react/popover'

export default function PopoverDemo() {
  return (
    <Popover>
      <Popover.Trigger asChild>
        <Button variant="outline">Open popover</Button>
      </Popover.Trigger>

      <Popover.Content className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="font-medium leading-none">Dimensions</h4>
            <p className="text-sm text-fg-weaker">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 className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="height">Height</Label>
              <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
            </div>

            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="maxHeight">Max. height</Label>
              <Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
            </div>
          </div>
        </div>
      </Popover.Content>
    </Popover>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add popover

   yarn

   yarn dlx @dinui/cli@latest add popover

   pnpm

   pnpm dlx @dinui/cli@latest add popover

   bun

   bunx @dinui/cli@latest add popover

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-popover @radix-ui/react-popper tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-popover @radix-ui/react-popper tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-popover @radix-ui/react-popper tailwind-variants type-fest

   bun

   bun add @radix-ui/react-popover @radix-ui/react-popper tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import * as PopoverPrimitive from '@radix-ui/react-popover'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const popover = tv({
     slots: {
       content: [
         'z-50 rounded-md border bg-bg--contrast p-4 shadow-md outline-none',
         'data-[state=open]:animate-in data-[state=closed]:animate-out',
         'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
         'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       ],
     },
   })
   
   const PopoverContent = forwardRef<
     React.ElementRef<typeof PopoverPrimitive.Content>,
     Merge<
       React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,
       {
         portalProps?: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>
       }
     >
   >(({ portalProps, ...props }, ref) => {
     const { content } = popover()
   
     return (
       <PopoverPrimitive.Portal {...portalProps}>
         <PopoverPrimitive.Content
           align="center"
           sideOffset={4}
           {...props}
           ref={ref}
           className={content({ className: props.className })}
         />
       </PopoverPrimitive.Portal>
     )
   })
   PopoverContent.displayName = PopoverPrimitive.Content.displayName
   
   const Popover = Object.assign(PopoverPrimitive.Root, {
     Trigger: PopoverPrimitive.Trigger,
     Anchor: PopoverPrimitive.Anchor,
     Content: PopoverContent,
   })
   
   export default Popover
   export { popover, PopoverPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.