Popover

A floating panel of content that appears when the user interacts with a trigger element. Useful for displaying additional information or interactive content without navigating away. Built on @rn-primitives/popover.

Installation

npx @tapcn/cli add popover

Or using shadcn directly:

npx shadcn@latest add https://tapcn.vercel.app/r/popover.json

This will also install the text component.

Usage

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '~/components/ui/popover';
import { Button } from '~/components/ui/button';
import { Text } from '~/components/ui/text';

export function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">
          <Text>Open Popover</Text>
        </Button>
      </PopoverTrigger>
      <PopoverContent>
        <Text className="font-semibold">Popover Title</Text>
        <Text className="text-sm text-muted-foreground">
          This is the popover content. It can contain any elements.
        </Text>
      </PopoverContent>
    </Popover>
  );
}

With form content

import { View } from 'react-native';
import { Input } from '~/components/ui/input';
import { Label } from '~/components/ui/label';

export function PopoverWithForm() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">
          <Text>Set Dimensions</Text>
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <View className="gap-4">
          <Text className="font-medium">Dimensions</Text>
          <View className="gap-2">
            <Label nativeID="width">Width</Label>
            <Input aria-labelledby="width" defaultValue="100%" />
          </View>
          <View className="gap-2">
            <Label nativeID="height">Height</Label>
            <Input aria-labelledby="height" defaultValue="25px" />
          </View>
        </View>
      </PopoverContent>
    </Popover>
  );
}

Sub-Components

Component	Description
`Popover`	Root component, manages open/closed state
`PopoverTrigger`	The element that triggers the popover
`PopoverContent`	The floating content panel

Props

PopoverContent

Prop	Type	Default	Description
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Horizontal alignment relative to the trigger
`sideOffset`	`number`	`4`	Distance from the trigger
`className`	`string`	--	Additional NativeWind classes

Platform Behavior

Web: Uses CSS animations for open/close transitions
Native: Uses react-native-reanimated for native-performance animations
iOS: Uses FullWindowOverlay from react-native-screens for proper stacking

Dependencies

text -- for TextClassContext
@rn-primitives/popover -- underlying primitive

Popover

On this page