This component no longer exists. It was in Pure UI’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-10 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.

Popover

pure-ui/popover

RemovedComponent

A customizable popover component

Install it

npx shadcn@latest add https://raw.githubusercontent.com/MusKRI/pure-ui/main/public/r/popover.json

Source

src/registry/pure-ui/ui/popover/index.tsxraw.githubusercontent.com/MusKRI/pure-ui/main/public/r/popover.json · first 6 KB

1"use client";
2
3import { createContext, useContext, useMemo } from "react";
4import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
5
6import { cn } from "@/lib/classes";
7
8const cssAnimationPresets = {
9  none: "transition-none",
10  scale: [
11    `[transition-property:scale,opacity] [will-change:scale,opacity]`,
12    `data-starting-style:scale-80 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:scale-80`,
13  ],
14  fade: [
15    `[transition-property:opacity] [will-change:opacity]`,
16    `data-starting-style:opacity-0 data-ending-style:opacity-0`,
17  ],
18  slideOutside: [
19    `[transition-property:translate,opacity] [will-change:translate,opacity]`,
20    // side=bottom
21    `data-[side=bottom]:data-starting-style:opacity-0 data-[side=bottom]:data-starting-style:translate-y-[10px] data-[side=bottom]:data-ending-style:translate-y-[10px] data-[side=bottom]:data-ending-style:opacity-0`,
22    // side=top
23    `data-[side=top]:data-starting-style:opacity-0 data-[side=top]:data-starting-style:translate-y-[-10px] data-[side=top]:data-ending-style:translate-y-[-10px] data-[side=top]:data-ending-style:opacity-0`,
24    // side=left
25    `data-[side=left]:data-starting-style:opacity-0 data-[side=left]:data-starting-style:translate-x-[-10px] data-[side=left]:data-ending-style:translate-x-[-10px] data-[side=left]:data-ending-style:opacity-0`,
26    // side=right
27    `data-[side=right]:data-starting-style:opacity-0 data-[side=right]:data-starting-style:translate-x-[10px] data-[side=right]:data-ending-style:translate-x-[10px] data-[side=right]:data-ending-style:opacity-0`,
28    // side=inline-start
29    `data-[side=inline-start]:data-starting-style:opacity-0 data-[side=inline-start]:data-starting-style:translate-x-[-10px] data-[side=inline-start]:data-ending-style:translate-x-[-10px] data-[side=inline-start]:data-ending-style:opacity-0`,
30    // side=inline-end
31    `data-[side=inline-end]:data-starting-style:opacity-0 data-[side=inline-end]:data-starting-style:translate-x-[10px] data-[side=inline-end]:data-ending-style:translate-x-[10px] data-[side=inline-end]:data-ending-style:opacity-0`,
32  ],
33  slideInside: [
34    `[transition-property:translate,opacity] [will-change:translate,opacity]`,
35    // side=bottom
36// … truncated

What it pulls in

npm packages

@base-ui/react
clsx
tailwind-merge

Other registry items

classes

Files it writes

src/registry/pure-ui/ui/popover/index.tsx