Toolbar Expandable

Buttons 44

About

A toolbar that adjusts its width based on what you need to do. It starts small and can expand to offer more tools.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Toolbar Expandable to your project and fits it to your theme.

Code

How Toolbar Expandable is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ArrowLeft, Search, User } from "lucide-react"
import { SearchToolbar } from "@/components/ui/toolbar-expandable"

export function SearchToolbarDemo() {
  return (
    <div className="h-[400px] w-full relative bg-gradient-to-br from-neutral-50 to-neutral-100">
      <SearchToolbar
        placeholder="Search notes"
        onSearch={(value) => console.log("Searching:", value)}
        leftIcon={<User className="h-5 w-5" />}
        searchIcon={<Search className="h-5 w-5" />}
        backIcon={<ArrowLeft className="h-5 w-5" />}
      />
    </div>
  )
}