Popover
A click-opened surface with no arrow: it grows out of the trigger's centre and stays on screen as it shifts.
$149 once · every Pro piece
Customize
start
center
end
Focus moves in and stays in until Escape, an outside click or a button closes it.
Install
npx shadcn@latest add @obsyde/popoverNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Popover } from '@/components/obsyde/ember/popover/Popover';
export function Example() {
return (
<Popover side="bottom" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/popover/Popover.tsxcomponentember/popover/popover-demo.cssstylesember/popover/popover.cssstylesember/popover/PopoverDemo.tsxdemoember/overlays-kit/demo.csssharedember/overlays-kit/kit.tssharedember/shared/spring.tssharedember/shared/accent.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
sideSide | 'bottom' | 'top' | 'left' | 'right' | 'bottom' |
alignAlign | 'start' | 'center' | 'end' | 'center' |