Popover

A small anchored surface for contextual information.

npx shadcn@latest add @silicon-ui/popover
overlaymenu
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/popover

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-popover

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/popover/popover.tsx
    • components/silicon-ui/popover/popover.module.css
    • components/silicon-ui/lib/escape.ts shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Popover } from "@/components/silicon-ui/popover/popover";

API reference

Popover

Accepts the props of PopoverProps.

PopoverClose

Accepts the props of ButtonHTMLAttributes.

PopoverTrigger

Accepts the props of ButtonHTMLAttributes.

PopoverContent

Accepts the props of PopoverContentImplProps, PopperContentProps, DismissableLayerProps, PopoverContentProps.

Dependencies

npm
@radix-ui/react-popover
Registry
None