Components
Overlay attached to any interactive trigger element via passed attributes, opening on click or hover. Automatically repositions within the viewport with controllable fallback positions, supports custom content padding, a Dismissible close button, custom or trigger-aligned width, controlled state and focus trapping.
npx @21st-dev/cli add reshaped/reshaped-popoverLoading preview...
import { Button, Reshaped } from "reshaped/bundle";
import Popover from "@/components/ui/reshaped-popover";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
<Popover triggerType="hover">
<Popover.Trigger>
{(attributes) => (
<Button attributes={attributes}>Trigger popover on hover</Button>
)}
</Popover.Trigger>
<Popover.Content>Popover content</Popover.Content>
</Popover>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...