shadcn/phlexcomponents

Command

A searchable command palette component that provides quick access to navigation.

Anatomy

Command do |c|

  c.trigger



  c.content do

    c.group do

      c.label

      c.item

      c.item

    end



    c.item

    c.item

  end

end

API Reference

Command

NameTypeDefault
open:booleanfalse
Whether the command palette should be visible when initially rendered. When true, opens immediately on page load.
modifier_key:symbolnil
Modifier key for keyboard shortcut. Options: :ctrl | :alt | :shift. Used in combination with shortcut_key to create keyboard shortcuts like Ctrl+K.
shortcut_key:stringnil
Key for keyboard shortcut (e.g., "k" for Ctrl+K). Must be used with modifier_key to create functional keyboard shortcuts.
search_path:stringnil
URL for remote search functionality. Backend must return JSON array of { html: string, group: string } objects. Enables dynamic search results from server.
search_error_text:string"Something went wrong, please try again."
Error message displayed when remote search requests fail. Only relevant when using search_path.
search_empty_text:string"No results found"
Message shown when search returns no results, both for local filtering and remote search.
search_placeholder_text:string"Search..."
Placeholder text displayed in the search input field within the command palette.
attributeskeyword arguments

Command#trigger

NameType
attributeskeyword arguments

Command#content

NameType
attributeskeyword arguments

Command#group

NameType
attributeskeyword arguments

Command#label

NameType
attributeskeyword arguments

Command#item

NameTypeDefault
value:stringnil
URL or path to navigate to when this command item is selected.
attributeskeyword arguments

Keyboard Interactions

KeyDescription
SpaceWhen focus is on trigger, opens the command.
EnterWhen focus is on trigger, opens the command. When focus is on an item, selects the focused item.
EscCloses the command and moves focus to trigger.

Examples

Basic

<%= render Command.new do |c| %>

  <%= c.trigger do %>

    <span class="hidden lg:inline-flex">Search documentation...</span>

    <span class="inline-flex lg:hidden">Search...</span>

  <% end %>



  <%= c.content do %>

    <%= c.group do %>

      <%= c.label { "Get Started" } %>

      <%= c.item(value: root_path) do %>

        <%= lucide_icon("file") %>

        Home

      <% end %>



      <%= c.item(value: page_path("installation")) do %>

        <%= lucide_icon("file") %>

        Docs

      <% end %>



      <%= c.item(value: page_path("components/accordion")) do %>

        <%= lucide_icon("file") %>

        Components

      <% end %>

    <% end %>

  <% end %>

<% end %>

<div data-controller="command" data-command-is-open-value="false" data-modifier-key="shift" data-shortcut-key="k" data-shadcn-phlexcomponents="command" class="inline-flex max-w-fit">

  <div style="display: none;" class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 pointer-events-auto" aria-hidden data-state="closed" data-command-target="overlay"></div>

  <button role="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="command-1dec2757b5-content" data-command-target="trigger" data-action="click->command#open" data-shadcn-phlexcomponents="command-trigger" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-secondary/80 px-4 py-2 has-[>svg]:px-3 bg-surface text-surface-foreground/60 dark:bg-card relative h-8 w-full justify-start pl-2.5 font-normal shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64">

    <span class="hidden lg:inline-flex">Search documentation...</span>

    <span class="inline-flex lg:hidden">Search...</span>

    <span class="absolute top-1.5 right-1.5 hidden gap-1 sm:flex"><kbd class="bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3 capitalize" data-command-target="modifierKey" data-shadcn-phlexcomponents="command-kbd">shift</kbd><kbd class="bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3 capitalize" data-shadcn-phlexcomponents="command-kbd">k</kbd></span></button>

  <div style="display: none;" id="command-1dec2757b5-content" tabindex="-1" role="dialog" aria-describedby="command-1dec2757b5-description" aria-labelledby="command-1dec2757b5-title" data-state="closed" data-command-target="content" data-action="command:click:outside->command#clickOutside

    keydown.up->command#highlightItem:prevent

    keydown.down->command#highlightItem:prevent

    keydown.enter->command#select

    " data-shadcn-phlexcomponents="command-content" class="bg-background bg-clip-padding dark:bg-neutral-900 dark:ring-neutral-800 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 fixed gap-4 grid left-[50%] max-w-[calc(100%-2rem)] p-2 pb-11 ring-4 ring-neutral-200/80 rounded-xl shadow-2xl sm:max-w-lg top-[50%] translate-x-[-50%] translate-y-[-50%] w-full z-50 pointer-events-auto outline-none"><template>

      <div role="group" aria-labelledby="-group-b71ca8bcd3" data-command-target="group" data-shadcn-phlexcomponents="command-group" class="scroll-mt-16 first:pt-0 pt-3">

        <div data-shadcn-phlexcomponents="command-label" class="text-muted-foreground px-3 pb-1 text-xs font-medium"></div>

      </div>

    </template>

    <div class="text-popover-foreground flex h-full w-full flex-col overflow-hidden bg-transparent">

      <div class="sr-only">

        <h2 id="command-1dec2757b5-title">Search...</h2>

        <p id="command-1dec2757b5-description">Search for a command to run...</p>

      </div>

      <label class="sr-only" id="command-1dec2757b5-search-label" for="command-1dec2757b5-search">Search...</label>

      <div data-shadcn-phlexcomponents="command-search-input-container" class="flex h-9 items-center gap-2 border px-3 bg-input/50 border-input rounded-md"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 opacity-50"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><input id="command-1dec2757b5-search" placeholder="Search..." type="text" autocomplete="off" autocorrect="off" role="combobox" spellcheck="false" aria-autocomplete="list" aria-expanded="false" aria-controls="command-1dec2757b5-list" aria-labelledby="command-1dec2757b5-search-label" data-command-target="searchInput" data-action="keydown->command#inputKeydown input->command#search" data-shadcn-phlexcomponents="command-search-input" class="placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 h-9"></div>

      <div data-command-target="listContainer" data-shadcn-phlexcomponents="command-list-container" class="mt-3 p-1 max-h-80 min-h-80 overflow-y-auto">

        <div role="presentation" data-command-target="empty" data-shadcn-phlexcomponents="command-text" class="py-6 text-center text-sm hidden">No results found</div>

        <div role="presentation" data-command-target="error" data-shadcn-phlexcomponents="command-text" class="py-6 text-center text-sm hidden">Something went wrong, please try again.</div>

        <div role="presentation" data-command-target="loading" data-shadcn-phlexcomponents="command-text" class="py-6 text-center text-sm hidden">

          <div class="flex justify-center" aria-label="Loading"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg></div>

        </div>

        <div id="command-1dec2757b5-list" data-command-target="list">

          <div role="group" aria-labelledby="command-1dec2757b5-group-4d9e0ba278" data-command-target="group" data-shadcn-phlexcomponents="command-group" class="scroll-mt-16 first:pt-0 pt-3">

            <div data-shadcn-phlexcomponents="command-label" class="text-muted-foreground px-3 pb-1 text-xs font-medium">Get Started</div>

            <div role="option" tabindex="-1" data-highlighted="false" data-value="/" data-action="click->command#select

              mouseover->command#highlightItem

              " data-command-target="item" data-shadcn-phlexcomponents="command-item" class="data-[highlighted=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 px-3 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[highlighted=true]:border-input data-[highlighted=true]:bg-input/50 h-9 rounded-md border border-transparent font-medium">

              <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></svg>

              Home

            </div>

            <div role="option" tabindex="-1" data-highlighted="false" data-value="/installation" data-action="click->command#select

              mouseover->command#highlightItem

              " data-command-target="item" data-shadcn-phlexcomponents="command-item" class="data-[highlighted=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 px-3 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[highlighted=true]:border-input data-[highlighted=true]:bg-input/50 h-9 rounded-md border border-transparent font-medium">

              <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></svg>

              Docs

            </div>

            <div role="option" tabindex="-1" data-highlighted="false" data-value="/components/accordion" data-action="click->command#select

              mouseover->command#highlightItem

              " data-command-target="item" data-shadcn-phlexcomponents="command-item" class="data-[highlighted=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 px-3 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[highlighted=true]:border-input data-[highlighted=true]:bg-input/50 h-9 rounded-md border border-transparent font-medium">

              <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></svg>

              Components

            </div>

          </div>

        </div>

      </div>

      <div data-shadcn-phlexcomponents="command-footer" class="text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium dark:border-t-neutral-700 dark:bg-neutral-800">

        <div class="flex items-center gap-2"><kbd data-shadcn-phlexcomponents="command-kbd" class="bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg></kbd>Go to Page</div>

      </div>

    </div>

  </div>

</div>

Search Path

# some_controller.rb (without jbuilder)

def index

  search_term = params[:q]

  data = SomeModel.query(search_term)

  results = []



  data.each do |d|

    results.push({

      html: render_to_string(CommandItem.new(value: d.name) { d.name.titleize }, layout: false),

      group: d.group # or nil

    })

  end



  render json: results

end



# some_controller.rb (with jbuilder)

def index

  search_term = params[:q]

  @data = SomeModel.query(search_term)

end



# some_controller/index.json.jbuilder

json.array! @data do |d|

  json.html render CommandItem.new(value: d.name) { d.name.titleize }

  json.group d.group # or nil

end



<%= render Command.new(modifier_key: :ctrl, shortcut_key: "k", search_path: command_search_examples_path) do |c| %>

  <%= c.trigger do %>

    <span class="hidden lg:inline-flex">Search components...</span>

    <span class="inline-flex lg:hidden">Search...</span>

  <% end %>



  <%= c.content(search_placeholder: "Search components...") do %>

    <%= c.group do %>

      <%= c.label { "Get Started" } %>

      <%= c.item(value: root_path) do %>

        <%= lucide_icon("file") %>

        Home

      <% end %>



      <%= c.item(value: page_path("installation")) do %>

        <%= lucide_icon("file") %>

        Docs

      <% end %>



      <%= c.item(value: page_path("components/accordion")) do %>

        <%= lucide_icon("file") %>

        Components

      <% end %>

    <% end %>

  <% end %>

<% end %>

<div data-controller="command" data-command-is-open-value="false" data-modifier-key="ctrl" data-shortcut-key="k" data-search-path="/examples/command_search" data-shadcn-phlexcomponents="command" class="inline-flex max-w-fit">

  <div style="display: none;" class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 pointer-events-auto" aria-hidden data-state="closed" data-command-target="overlay"></div>

  <button role="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="command-fcb721a648-content" data-command-target="trigger" data-action="click->command#open" data-shadcn-phlexcomponents="command-trigger" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-secondary/80 px-4 py-2 has-[>svg]:px-3 bg-surface text-surface-foreground/60 dark:bg-card relative h-8 w-full justify-start pl-2.5 font-normal shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64">

    <span class="hidden lg:inline-flex">Search components...</span>

    <span class="inline-flex lg:hidden">Search...</span>

    <span class="absolute top-1.5 right-1.5 hidden gap-1 sm:flex"><kbd class="bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3 capitalize" data-command-target="modifierKey" data-shadcn-phlexcomponents="command-kbd">ctrl</kbd><kbd class="bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3 capitalize" data-shadcn-phlexcomponents="command-kbd">k</kbd></span></button>

  <div style="display: none;" id="command-fcb721a648-content" tabindex="-1" role="dialog" aria-describedby="command-fcb721a648-description" aria-labelledby="command-fcb721a648-title" data-state="closed" data-command-target="content" data-action="command:click:outside->command#clickOutside

    keydown.up->command#highlightItem:prevent

    keydown.down->command#highlightItem:prevent

    keydown.enter->command#select

    " data-shadcn-phlexcomponents="command-content" search-placeholder="Search components..." class="bg-background bg-clip-padding dark:bg-neutral-900 dark:ring-neutral-800 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 fixed gap-4 grid left-[50%] max-w-[calc(100%-2rem)] p-2 pb-11 ring-4 ring-neutral-200/80 rounded-xl shadow-2xl sm:max-w-lg top-[50%] translate-x-[-50%] translate-y-[-50%] w-full z-50 pointer-events-auto outline-none"><template>

      <div role="group" aria-labelledby="-group-375014ed8c" data-command-target="group" data-shadcn-phlexcomponents="command-group" class="scroll-mt-16 first:pt-0 pt-3">

        <div data-shadcn-phlexcomponents="command-label" class="text-muted-foreground px-3 pb-1 text-xs font-medium"></div>

      </div>

    </template>

    <div class="text-popover-foreground flex h-full w-full flex-col overflow-hidden bg-transparent">

      <div class="sr-only">

        <h2 id="command-fcb721a648-title">Search...</h2>

        <p id="command-fcb721a648-description">Search for a command to run...</p>

      </div>

      <label class="sr-only" id="command-fcb721a648-search-label" for="command-fcb721a648-search">Search...</label>

      <div data-shadcn-phlexcomponents="command-search-input-container" class="flex h-9 items-center gap-2 border px-3 bg-input/50 border-input rounded-md"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 opacity-50"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><input id="command-fcb721a648-search" placeholder="Search..." type="text" autocomplete="off" autocorrect="off" role="combobox" spellcheck="false" aria-autocomplete="list" aria-expanded="false" aria-controls="command-fcb721a648-list" aria-labelledby="command-fcb721a648-search-label" data-command-target="searchInput" data-action="keydown->command#inputKeydown input->command#search" data-shadcn-phlexcomponents="command-search-input" class="placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 h-9"></div>

      <div data-command-target="listContainer" data-shadcn-phlexcomponents="command-list-container" class="mt-3 p-1 max-h-80 min-h-80 overflow-y-auto">

        <div role="presentation" data-command-target="empty" data-shadcn-phlexcomponents="command-text" class="py-6 text-center text-sm hidden">No results found</div>

        <div role="presentation" data-command-target="error" data-shadcn-phlexcomponents="command-text" class="py-6 text-center text-sm hidden">Something went wrong, please try again.</div>

        <div role="presentation" data-command-target="loading" data-shadcn-phlexcomponents="command-text" class="py-6 text-center text-sm hidden">

          <div class="flex justify-center" aria-label="Loading"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg></div>

        </div>

        <div id="command-fcb721a648-list" data-command-target="list">

          <div role="group" aria-labelledby="command-fcb721a648-group-28b253b968" data-command-target="group" data-shadcn-phlexcomponents="command-group" class="scroll-mt-16 first:pt-0 pt-3">

            <div data-shadcn-phlexcomponents="command-label" class="text-muted-foreground px-3 pb-1 text-xs font-medium">Get Started</div>

            <div role="option" tabindex="-1" data-highlighted="false" data-value="/" data-action="click->command#select

              mouseover->command#highlightItem

              " data-command-target="item" data-shadcn-phlexcomponents="command-item" class="data-[highlighted=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 px-3 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[highlighted=true]:border-input data-[highlighted=true]:bg-input/50 h-9 rounded-md border border-transparent font-medium">

              <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></svg>

              Home

            </div>

            <div role="option" tabindex="-1" data-highlighted="false" data-value="/installation" data-action="click->command#select

              mouseover->command#highlightItem

              " data-command-target="item" data-shadcn-phlexcomponents="command-item" class="data-[highlighted=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 px-3 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[highlighted=true]:border-input data-[highlighted=true]:bg-input/50 h-9 rounded-md border border-transparent font-medium">

              <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></svg>

              Docs

            </div>

            <div role="option" tabindex="-1" data-highlighted="false" data-value="/components/accordion" data-action="click->command#select

              mouseover->command#highlightItem

              " data-command-target="item" data-shadcn-phlexcomponents="command-item" class="data-[highlighted=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 px-3 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[highlighted=true]:border-input data-[highlighted=true]:bg-input/50 h-9 rounded-md border border-transparent font-medium">

              <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></svg>

              Components

            </div>

          </div>

        </div>

      </div>

      <div data-shadcn-phlexcomponents="command-footer" class="text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium dark:border-t-neutral-700 dark:bg-neutral-800">

        <div class="flex items-center gap-2"><kbd data-shadcn-phlexcomponents="command-kbd" class="bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg></kbd>Go to Page</div>

      </div>

    </div>

  </div>

</div>