Components
Loading preview...
A toolbar that changes its height as needed. It grows to show more content and shrinks to save space, keeping your screen neat.
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/toolbar-dynamicimport { Folder, MessageCircle, User, WalletCards } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Toolbar, type ToolbarItem } from "@/components/ui/toolbar-dynamic";
const TOOLBAR_ITEMS: ToolbarItem[] = [
{
id: 1,
label: "User",
icon: <User className="h-5 w-5" />,
content: (
<div className="flex flex-col space-y-4">
<div className="flex flex-col space-y-1 text-muted-foreground">
<div className="h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-400" />
<span>Ibelick</span>
</div>
<Button variant="outline" size="sm">
Edit Profile
</Button>
</div>
),
},
{
id: 2,
label: "Messages",
icon: <MessageCircle className="h-5 w-5" />,
content: (
<div className="flex flex-col space-y-4">
<div className="text-muted-foreground">You have 3 new messages.</div>
<Button variant="outline" size="sm">
View more
</Button>
</div>
),
},
{
id: 3,
label: "Documents",
icon: <Folder className="h-5 w-5" />,
content: (
<div className="flex flex-col space-y-4">
<div className="flex flex-col text-muted-foreground">
<div className="space-y-1">
<div>Project_Proposal.pdf</div>
<div>Meeting_Notes.docx</div>
<div>Financial_Report.xls</div>
</div>
</div>
<Button variant="outline" size="sm">
Manage documents
</Button>
</div>
),
},
{
id: 4,
label: "Wallet",
icon: <WalletCards className="h-5 w-5" />,
content: (
<div className="flex flex-col space-y-4">
<div className="flex flex-col text-muted-foreground">
<span>Current Balance</span>
<span>$1,250.32</span>
</div>
<Button variant="outline" size="sm">
View Transactions
</Button>
</div>
),
},
]
export function ToolbarDemo() {
return (
<div className="h-[400px] w-full relative bg-gradient-to-br from-neutral-50 to-neutral-100">
<Toolbar items={TOOLBAR_ITEMS} />
</div>
)
}