# Popover

> A versatile popover component for displaying contextual content, forms, and interactive menus with smooth animations.  Features: 	•	Smooth open and close animations 	•	Form handling with textarea 	•	Menu-style interactions 	•	Command palette functionality 	•	Project status displays 	•	Click outside detection 	•	Keyboard navigation 	•	Dark mode support 	•	Custom trigger variants 	•	Flexible content layouts 	•	Compound component pattern 	•	Accessibility features Notes: 	•	Built with Framer Motion for smooth animations 	•	Utilizes React Context for state management 	•	Handles click outside and escape key events 	•	Employs a responsive design with a mobile-first approach 	•	Includes TypeScript support with proper types 	•	Integrates seamlessly with Shadcn UI components 	•	Supports custom styling and theming 	•	Optimized for performance with proper hooks usage

- Author: [Prism UI](https://21st.dev/@Codehagen)
- Library: [Prism UI](https://21st.dev/@Codehagen/library/prism-ui)
- License: mit
- Tags: Popover
- npm dependencies: framer-motion, @radix-ui/react-icons
- Live preview: https://21st.dev/@Codehagen/components/popover

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/Codehagen/popover?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/popover.md