Components
Loading preview...
A button that smoothly transitions between collapsed and expanded states using spring animations. Shows only an icon when collapsed and reveals text alongside the icon when expanded, perfect for responsive layouts and space-saving interfaces.
@molecule-ui
npx shadcn@latest add https://21st.dev/r/molecule-lab-rushil/expandable-buttonimport { ExpandableButton } from "@/components/ui/expandable-button";
import { Inbox } from "lucide-react"
export default function DemoOne() {
return <div className="w-full px-10 flex items-center justify-center">
<ExpandableButton icon={<Inbox className="w-5 h-5" />}>
Inbox
</ExpandableButton>
</div>
}