nessra uinessra ui

Popover

Previous: PaginationNext: Progress

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

Docs API Reference
Loading...
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/popover.json

Usage

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>

API Reference

Popover

ComponentDescription
PopoverThe root component
PopoverTriggerThe button that toggles it
PopoverContentThe popover content
PopoverAnchorOptional anchor element

PopoverContent Props

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""bottom"Preferred side
sideOffsetnumber0Distance from trigger
align"start" | "center" | "end""center"Alignment against trigger
alignOffsetnumber0Offset from alignment
PaginationProgress

On this page

InstallationUsageAPI ReferencePopoverPopoverContent Props