Morphing Command Bar

Elastic command bar that expands seamlessly from passive state to active input with action trigger.

7.7 KB

•

Updated on September 17, 2026

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-morphing-command-bar

Code

import { MorphingCommandBar } from '@/components/spaceui/morphing-command-bar'

export default function Example() {
  return <MorphingCommandBar />
}

Prop	Type	Default	Description
`placeholder`	string	Search components, actions or docs...	Input placeholder text
`onSubmit`	(query: string) => void	—	Submit callback
`corner`	number	28	Corner radius in px

MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

On This Page