Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Popover examples · Standard

Popover with Divider for React

A popover whose two sections are split by a separator.

Framework
UI library

An Options button that opens two sections with a separator between them. Split a panel this way when it holds two kinds of content that shouldn't run together. In React, Base UI handles opening, dismissing and focus.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the separator split the panel?

PopoverContent sets gap-2. Section 1 and Section 2 are p elements with font-medium. A Separator sits between them. PopoverTitle reads Options and has className="sr-only".

How does the Options button become the trigger?

The trigger is a Button with variant="outline" and the label Options. Activating it opens the panel. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

Where is the panel's name?

PopoverTitle is Options with className="sr-only", matching the button label. Section 1 and Section 2 are the visible text. They are paragraphs.

What controls the space around the separator?

gap-2 on PopoverContent spaces Section 1, the Separator, and Section 2. The two lines use font-medium. This file adds no width class.

How does this panel dismiss?

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.

What are the two sections?

They are p elements with the text Section 1 and Section 2. The Options trigger is the only button in this demo. The Separator is the divider between the paragraphs.

All 15 popover examples