# Expandable Content Button

> The Expandable Content Button is a highly flexible shadcn/ui component that combines a standard button with a hidden dropdown panel. On click, the button expands to reveal a mini-card containing configurable options, such as filters, social share links, or other quick actions. The main button includes a right-aligned chevron icon that indicates the expanded state, while the dropdown options can include custom Lucide icons or none at all, depending on the use case. It automatically closes when the user clicks outside, ensuring a clean and intuitive user experience. This component is ideal for dashboards, toolbars, or any interface where space-efficient interactive controls are needed, offering both visual clarity and functional flexibility.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/expandable-content-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/expandable-content-button?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