Popover

A 16px-radius floating panel with optional title and description, opening with a short origin-aware pop.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { PopoverRounded } from '@/components/component-kit/items/popover-rounded';
3
4export function Example() {
5  return (
6    <PopoverRounded
7      trigger={<Button variant="outline">Share</Button>}
8      title="Share this project"
9      description="Anyone with the link can view."
10    >
11      <p className="text-sm">Your content here.</p>
12    </PopoverRounded>
13  );
14}

Props

Popover properties
Prop	Type	Default	Description
`trigger`	`ReactElement`	`—`	Element that opens the popover.
`title`	`ReactNode`	`—`	Optional heading inside the panel.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`bottom`	Which side of the trigger the panel opens on.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { PopoverRounded } from '@/components/component-kit/items/popover-rounded';
3
4export function Example() {
5  return (
6    <PopoverRounded
7      trigger={<Button variant="outline">Share</Button>}
8      title="Share this project"
9      description="Anyone with the link can view."
10    >
11      <p className="text-sm">Your content here.</p>
12    </PopoverRounded>
13  );
14}

Prop

Type

Default

Description

trigger

ReactElement

—

Element that opens the popover.

title

ReactNode

—

Optional heading inside the panel.

side

"top" | "right" | "bottom" | "left"

bottom

Which side of the trigger the panel opens on.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { PopoverRounded } from '@/components/component-kit/items/popover-rounded';
3
4export function Example() {
5  return (
6    <PopoverRounded
7      trigger={<Button variant="outline">Share</Button>}
8      title="Share this project"
9      description="Anyone with the link can view."
10    >
11      <p className="text-sm">Your content here.</p>
12    </PopoverRounded>
13  );
14}

Prop

Type

Default

Description

trigger

ReactElement

—

Element that opens the popover.

title

ReactNode

—

Optional heading inside the panel.

side

"top" | "right" | "bottom" | "left"

bottom

Which side of the trigger the panel opens on.

Popover

A 16px-radius floating panel with optional title and description, opening with a short origin-aware pop.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { PopoverRounded } from '@/components/component-kit/items/popover-rounded';
3
4export function Example() {
5  return (
6    <PopoverRounded
7      trigger={<Button variant="outline">Share</Button>}
8      title="Share this project"
9      description="Anyone with the link can view."
10    >
11      <p className="text-sm">Your content here.</p>
12    </PopoverRounded>
13  );
14}

Props

Popover properties
Prop	Type	Default	Description
`trigger`	`ReactElement`	`—`	Element that opens the popover.
`title`	`ReactNode`	`—`	Optional heading inside the panel.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`bottom`	Which side of the trigger the panel opens on.