Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Popover with Divider for React

An Options button that opens Section 1 and Section 2, with a separator between the two lines.

Options opens two lines, Section 1 and Section 2, with a separator between them. The title Options is hidden and read by screen readers.

Use it when one panel holds two kinds of content that should not run together. A list of commands belongs in a Dropdown Menu. In React, Base UI does not label the two sections.

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

Anatomy

Popover anatomy: trigger, title, positioner, arrow, description, content

Usage

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    Options
  </PopoverTrigger>
  <PopoverContent className="gap-2">
    <PopoverTitle className="sr-only">Options</PopoverTitle>
    <p className="font-medium">Section 1</p>
    <Separator />
    <p className="font-medium">Section 2</p>
  </PopoverContent>
</Popover>

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.

API Reference

Popover

No extra props in this demo. The rest is on the Popover page.

Button

Sets variant="outline". The rest is on the Button page.

Separator

No extra props in this demo. The rest is on the Separator page.

All 15 popover examples