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, View } 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 padding={0}>
<Popover.Trigger>
{(attributes) => <Button attributes={attributes}>Trigger popover</Button>}
</Popover.Trigger>
<Popover.Content>
<View backgroundColor="neutral-faded" height={50} />
</Popover.Content>
</Popover>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...