Skip to content

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

Free

Popover with Divider for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not label the two sections.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Popover>
  <PopoverTrigger :asChild="true">
    <Button variant="outline">Options</Button>
  </PopoverTrigger>
  <PopoverContent class="gap-2">
    <PopoverTitle class="sr-only">Options</PopoverTitle>
    <p class="font-medium">Section 1</p>
    <Separator />
    <p class="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. Set asChild on PopoverTrigger and pass that one button. PopoverContent is 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

Sets asChild. 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