Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/expandable-content-buttonimport ExpandableContentButton from "@/components/ui/expandable-content-button"
import { ChevronDown, ChevronUp, Twitter, Linkedin, Copy } from "lucide-react";
// Demo Usage
export default function Demo() {
return (
<div className="flex gap-4">
<ExpandableContentButton
label="Filters"
options={[
{ label: "Filter 1", onClick: () => alert("Filter 1 selected") },
{ label: "Filter 2", onClick: () => alert("Filter 2 selected") },
{ label: "Filter 3", onClick: () => alert("Filter 3 selected") },
]}
/>
<ExpandableContentButton
label="Share"
options={[
{ label: "Twitter", icon: <Twitter className="w-4 h-4" />, onClick: () => alert("Shared on Twitter") },
{ label: "LinkedIn", icon: <Linkedin className="w-4 h-4" />, onClick: () => alert("Shared on LinkedIn") },
{ label: "Copy Link", icon: <Copy className="w-4 h-4" />, onClick: () => alert("Link copied") },
]}
/>
</div>
);
}