Popover
Interactive content anchored to a trigger, such as a small form.
<Popover>
<PopoverTrigger render={<Button />}>Rollout</PopoverTrigger>
<PopoverContent side="right" align="center">
<PopoverTitle>Rollout</PopoverTitle>
<PopoverDescription>Send 10% of traffic to the new version first.</PopoverDescription>
</PopoverContent>
</Popover>Props
side
align
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/popover.jsonThe CLI writes components/ikada/popover.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Popover, PopoverContent, PopoverTitle, PopoverDescription } from "@sproutboat/ikada";
Usage
import { Popover, PopoverContent, PopoverTitle, PopoverDescription } from "@/components/ikada/popover";
<Popover>
<PopoverTrigger render={<Button />}>Rollout</PopoverTrigger>
<PopoverContent side="right" align="center">
<PopoverTitle>Rollout</PopoverTitle>
<PopoverDescription>Send 10% of traffic to the new version first.</PopoverDescription>
</PopoverContent>
</Popover>Examples
<Popover>
<PopoverTrigger render={<Button />}>Rollout</PopoverTrigger>
<PopoverContent>
<PopoverTitle>Rollout</PopoverTitle>
<PopoverDescription>Send 10% of traffic to the new version first.</PopoverDescription>
</PopoverContent>
</Popover><Popover>
<PopoverTrigger render={<Button />}>Rename</PopoverTrigger>
<PopoverContent className="flex flex-col gap-3">
<Field label="Sprout name">
<Input defaultValue="robin" />
</Field>
<div className="flex justify-end gap-2">
<PopoverClose render={<Button size="sm" variant="ghost" />}>Cancel</PopoverClose>
<PopoverClose render={<Button size="sm" variant="primary" />}>Save</PopoverClose>
</div>
</PopoverContent>
</Popover><Popover>
<PopoverTrigger render={<Button />}>Regions</PopoverTrigger>
<PopoverContent side="right" align="center">
<PopoverTitle>Regions</PopoverTitle>
<PopoverDescription>wren runs in eu-west and us-east.</PopoverDescription>
</PopoverContent>
</Popover>Props
| Prop | Type | Description |
|---|---|---|
| className | string | Classes merged onto the root element, after ikada's own. |
| side | Side | Which side of the trigger the popup opens on. Flips when there is no room. Default `bottom`. |
| align | Align | How the popup lines up with the trigger along that side. Default `start`. |
| style | CSSProperties | ((state: PopoverPopupState) => CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverPopupState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Also takes every prop of Omit<ComponentProps<typeof BasePopover.Popup>, "className">.
| Prop | Type | Description |
|---|---|---|
| style | CSSProperties | ((state: PopoverTitleState) => CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverTitleState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className | string | Classes merged onto the root element, after ikada's own. |
| Prop | Type | Description |
|---|---|---|
| style | CSSProperties | ((state: PopoverDescriptionState) => CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, PopoverDescriptionState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className | string | Classes merged onto the root element, after ikada's own. |
Source: src/components/popover.tsx