Beta Pricing: Get it for $49 during the beta phase, including all features and future updates.
Home / Page 1 ·

commandbar

1
<section class="bg-base-50 overflow-hidden">
  <div class="px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
    <div
      class="max-w-xl p-3 mx-auto overflow-hidden transition-all transform bg-white shadow-lg rounded-xl"
    >
      <!-- Input section with label and accessible search -->
      <div class="relative bg-base-50 focus-within:bg-white rounded-md">
        <label for="search" class="sr-only">Search</label>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-search size-5 pointer-events-none absolute top-3.5 left-4 text-base-400"
          slot="icon"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
          <path d="M21 21l-6 -6"></path>
        </svg>
        <input
          id="search"
          type="text"
          class="w-full h-12 pr-4 bg-transparent border-0 text-base-800 placeholder-base-400 pl-11 focus:ring-0 sm:text-sm"
          placeholder="Search for anything"
          role="combobox"
          aria-expanded="false"
          aria-controls="options"
          aria-autocomplete="list"
        />
      </div>
      <!-- Options list with roles and keyboard focusability -->
      <ul
        class="pt-3 space-y-3 overflow-y-auto max-h-96 scroll-py-3"
        id="options"
        role="listbox"
        tabindex="0"
      >
        <li id="option-1" role="option" tabindex="0" aria-selected="false">
          <button
            class="flex p-2 items-center w-full text-xs text-base-500 duration-200 cursor-pointer select-none hover:text-accent-500 group rounded-md hover:bg-base-50"
          >
            <div class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler icons-tabler-outline icon-tabler-layout-2 size-4"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
                ></path>
                <path
                  d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
                ></path>
                <path
                  d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
                ></path>
                <path
                  d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
                ></path>
              </svg>
              <span class="flex-auto truncate">Search projects...</span>
            </div>
            <span class="flex-none ml-auto text-xs font-semibold text-base-400">
              <kbd
                class="flex items-center justify-center size-4 font-semibold text-base-500 border rounded bg-white border-base-200"
              >
                S
              </kbd>
            </span>
          </button>
        </li>
        <li id="option-2" role="option" tabindex="0" aria-selected="false">
          <button
            class="flex p-2 items-center w-full text-xs text-base-500 duration-200 cursor-pointer select-none hover:text-accent-500 group rounded-md hover:bg-base-50"
          >
            <div class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler icons-tabler-outline icon-tabler-plus size-4"
                slot="icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M12 5l0 14"></path>
                <path d="M5 12l14 0"></path>
              </svg>
              <span class="flex-auto truncate">Create another project</span>
            </div>
            <span class="flex-none ml-auto text-xs font-semibold text-base-400">
              <kbd
                class="flex items-center justify-center size-4 font-semibold text-base-500 border rounded bg-white border-base-200"
              >
                C
              </kbd>
            </span>
          </button>
        </li>
        <!-- Add more items similarly with roles and attributes... -->
      </ul>
    </div>
  </div>
</section>