Command Bar Shell
Shell with a centered command bar in the top header, a keyboard shortcut hint, and a recent commands list below.
Shell with a centered command bar in the top header, a keyboard shortcut hint, and a recent commands list below.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Command Bar Shell leads with the bar: a centered input in the top header spanning up to max-w-lg, labeled Run a command or search with a Kbd hint showing the shortcut and a Search icon on the left. Below it the content area opens on a Recent commands list with three rows, Run deploy to production 4 min ago, Search: onboarding flow errors 22 min ago, and Open project prj_8h2k 1 hr ago, each with an arrow icon and tabular timestamp. A minimal icon rail on the left handles secondary navigation; the header right side shows the workspace badge and a Docs button.
Recent commands are one const array. The Kbd component makes the shortcut scannable without adding weight.
Reach for this shell for command-first tools where every session begins at the bar: CI runners, search-driven launchers, AI prompt interfaces, and admin consoles where typing is faster than clicking. Do not use it for information-dense dashboards where browsing beats typing. Wire the bar to your command palette or search handler and replace the dashed panels with workflow and history table blocks.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the CI runner overview with recent command history. Other command-bar contexts:
Tip: pre-fill the bar placeholder with the most common action verb so new users know the vocabulary before they type a character.