āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/nolly-studio/cult-ui/components/popover ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<ComponentPreview name="popover-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]" description="All variations" />
npx shadcn@latest add https://cult-ui.com/r/popover.json
<Step>Copy and paste the following code into your project.</Step>
<ComponentSource name="popover" /><Step>Update the import paths to match your project setup.</Step>
</Steps> </TabsContent> </CodeTabs>import {
PopoverCloseButton,
PopoverContent,
PopoverFooter,
PopoverForm,
PopoverLabel,
PopoverRoot,
PopoverSubmitButton,
PopoverTextarea,
PopoverTrigger,
} from "@/components/Popover"
export default function PopoverDemo() {
const handleSubmit = (note: string) => {
console.log('Submitted note:', note)
}
return (
<div className="p-8">
<h1 className="mb-4 text-2xl font-bold">Headless Composable Popover Demo</h1>
<PopoverRoot>
<PopoverTrigger>Add Note</PopoverTrigger>
<PopoverContent>
<PopoverForm onSubmit={handleSubmit}>
<PopoverLabel>Add Note</PopoverLabel>
<PopoverTextarea />
<PopoverFooter>
<PopoverCloseButton />
<PopoverSubmitButton />
</PopoverFooter>
</PopoverForm>
</PopoverContent>
</PopoverRoot>
</div>
)
}
The Popover component is a headless, composable component that provides a flexible and customizable popover functionality. It uses Framer Motion for smooth animations and React context for state management.
The PopoverRoot component is the main wrapper for the Popover. It provides the context and configuration for all child components.
<PopoverRoot>
{/* Other Popover components */}
</PopoverRoot>
The PopoverTrigger component is used to trigger the opening of the popover. It can wrap any clickable element.
<PopoverTrigger>Add Note</PopoverTrigger>
The PopoverContent component contains the main content of the popover. It handles the animation and positioning of the popover.
<PopoverContent>
{/* Popover content */}
</PopoverContent>
The PopoverForm component is used to create a form within the popover. It handles form submission and provides an onSubmit prop for custom submission logic.
<PopoverForm onSubmit={handleSubmit}>
{/* Form fields */}
</PopoverForm>
The PopoverLabel component is used to add a label to the popover content. It animates with the popover opening and closing.
<PopoverLabel>Add Note</PopoverLabel>
The PopoverTextarea component provides a textarea input for the popover form.
<PopoverTextarea />
The PopoverFooter component is used to create a footer section in the popover, typically containing action buttons.
<PopoverFooter>
{/* Footer content */}
</PopoverFooter>
The PopoverCloseButton component provides a button to close the popover.
<PopoverCloseButton />
The PopoverSubmitButton component provides a submit button for the popover form.
<PopoverSubmitButton />
The Popover component is highly customizable. You can modify the styles of each sub-component by passing className props or by wrapping them in your own styled components. The animation behavior can be adjusted by modifying the TRANSITION object in the component's source code.
The Popover component includes basic accessibility features such as:
However, depending on your specific use case, you may need to add additional accessibility features to ensure full compliance with WCAG guidelines.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā