Popover

Popover primitive wrappers

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
...

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@/components/ui/popover'

export default function PopoverDemoExample() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent class="w-80">
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
        </PopoverHeader>
        <div class="mt-4 grid gap-2">
          {[
            ['width', 'Width', '100%'],
            ['max-width', 'Max. width', '300px'],
            ['height', 'Height', '25px'],
            ['max-height', 'Max. height', 'none'],
          ].map(([id, label, value]) => (
            <label for={id} class="grid grid-cols-3 items-center gap-4">
              {label}
              <Input id={id} defaultValue={value} class="col-span-2 h-8" />
            </label>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  )
}

Installation

npx @fictjs/shadcn@latest add popover

Install the runtime dependencies:

npm install @fictjs/radix-ui

Copy the Fict shadcn component into your project.

Source

components/ui/popover.tsx

src/components/ui/popover.tsx

import { Popover as PopoverPrimitive } from '@fictjs/radix-ui'

import { cn } from '@/lib/cn'

export const Popover = PopoverPrimitive.Root
export const PopoverTrigger = PopoverPrimitive.Trigger
export const PopoverClose = PopoverPrimitive.Close

type PopoverContentProps = {
  class?: string
  children?: unknown
  [key: string]: unknown
}

export function PopoverContent(props: PopoverContentProps) {
  const { class: className, sideOffset = 4, ...rest } = props
  return (
    <PopoverPrimitive.Content
      sideOffset={sideOffset}
      class={cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none', className)}
      {...rest}
    />
  )
}

export function PopoverHeader(props: PopoverContentProps) {
  const { class: className, ...rest } = props
  return <div class={cn('flex flex-col gap-1', className)} {...rest} />
}

export function PopoverTitle(props: PopoverContentProps) {
  const { class: className, ...rest } = props
  return <h4 class={cn('font-medium leading-none', className)} {...rest} />
}

export function PopoverDescription(props: PopoverContentProps) {
  const { class: className, ...rest } = props
  return <p class={cn('text-sm text-muted-foreground', className)} {...rest} />
}

Usage

Examples

Basic

import { Button } from '@/components/ui/button'
import {
...

import { Button } from '@/components/ui/button'
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@/components/ui/popover'

export default function PopoverBasicExample() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent align="start">
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  )
}

Alignments

import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
...

import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'

export default function PopoverAlignmentsExample() {
  return (
    <div class="flex gap-6">
      {(['start', 'center', 'end'] as const).map(align => (
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline" size="sm">
              {align[0].toUpperCase() + align.slice(1)}
            </Button>
          </PopoverTrigger>
          <PopoverContent align={align} class="w-40">
            Aligned to {align}
          </PopoverContent>
        </Popover>
      ))}
    </div>
  )
}

Form

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
...

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@/components/ui/popover'

export default function PopoverFormExample() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent class="w-64" align="start">
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
        </PopoverHeader>
        <div class="mt-4 grid gap-4">
          <label for="width" class="grid grid-cols-2 items-center">
            Width
            <Input id="width" defaultValue="100%" />
          </label>
          <label for="height" class="grid grid-cols-2 items-center">
            Height
            <Input id="height" defaultValue="25px" />
          </label>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Rtl

import { Button } from '@/components/ui/button'
import {
...

import { Button } from '@/components/ui/button'
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@/components/ui/popover'

const translations = {
  ar: {
    dir: 'rtl',
    title: 'الأبعاد',
    description: 'تعيين الأبعاد للطبقة.',
    sides: { left: 'يسار', top: 'أعلى', bottom: 'أسفل', right: 'يمين' },
  },
  he: {
    dir: 'rtl',
    title: 'מימדים',
    description: 'הגדר את המימדים לשכבה.',
    sides: { left: 'שמאל', top: 'למעלה', bottom: 'למטה', right: 'ימין' },
  },
  en: {
    dir: 'ltr',
    title: 'Dimensions',
    description: 'Set the dimensions for the layer.',
    sides: { left: 'Left', top: 'Top', bottom: 'Bottom', right: 'Right' },
  },
} as const

export default function PopoverRtlExample() {
  let language = $state<keyof typeof translations>('ar')
  const text = () => translations[language]
  return (
    <div class="grid gap-4">
      <select
        value={language}
        onChange={event => {
          language = event.currentTarget.value as keyof typeof translations
        }}
      >
        <option value="ar">Arabic (العربية)</option>
        <option value="he">Hebrew (עברית)</option>
        <option value="en">English</option>
      </select>
      <div class="flex flex-wrap justify-center gap-2" dir={text().dir}>
        {(['left', 'top', 'bottom', 'right'] as const).map(side => (
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline">{text().sides[side]}</Button>
            </PopoverTrigger>
            <PopoverContent side={side} dir={text().dir}>
              <PopoverHeader>
                <PopoverTitle>{text().title}</PopoverTitle>
                <PopoverDescription>{text().description}</PopoverDescription>
              </PopoverHeader>
            </PopoverContent>
          </Popover>
        ))}
      </div>
    </div>
  )
}

Pagination Progress