Components
Loading preview...
A toolbar that adjusts its width based on what you need to do. It starts small and can expand to offer more tools.
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/toolbar-expandableimport { 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>
)
}