Popover

Displays rich content in a portal, triggered by a button.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add popover

Anatomy

<template>
  <UiPopover>
    <UiPopoverTrigger />
    <UiPopoverContent>
      <!-- Some markup -->
    </UiPopoverContent>
  </UiPopover>
</template>

Usage

Full example

Origin UI

Placeholder

A placeholder box that can be used as any filler content.

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.