Basecoat UI MCP

<!-- Basecoat Command Component - Standalone --> <div class="command rounded-lg border shadow-md w-full max-w-[450px]"> <header> <svg class="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8"></circle> <path d="m21 21-4.3-4.3"></path> </svg> <input type="text" role="combobox" aria-expanded="true" aria-controls="command-menu" placeholder="Type a command or search..."> </header> <div role="menu" id="command-menu"> <div role="group" aria-labelledby="suggestions"> <span role="heading" id="suggestions">Suggestions</span> <div role="menuitem"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M8 2v4"></path> <path d="M16 2v4"></path> <rect width="18" height="18" x="3" y="4" rx="2"></rect> <path d="M3 10h18"></path> </svg> <span>Calendar</span> </div> <div role="menuitem"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10"></circle> <path d="M8 14s1.5 2 4 2 4-2 4-2"></path> <line x1="9" x2="9.01" y1="9" y2="9"></line> <line x1="15" x2="15.01" y1="9" y2="9"></line> </svg> <span>Search Emoji</span> </div> <div role="menuitem" aria-disabled="true"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect width="16" height="20" x="4" y="2" rx="2"></rect> <line x1="8" x2="16" y1="6" y2="6"></line> <line x1="16" x2="16" y1="14" y2="18"></line> <path d="M16 10h.01"></path> <path d="M12 10h.01"></path> <path d="M8 10h.01"></path> <path d="M12 14h.01"></path> <path d="M8 14h.01"></path> <path d="M12 18h.01"></path> <path d="M8 18h.01"></path> </svg> <span>Calculator</span> </div> </div> <hr role="separator"> <div role="group" aria-labelledby="settings"> <span role="heading" id="settings">Settings</span> <div role="menuitem"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> <span>Profile</span> <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘P</kbd> </div> <div role="menuitem"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect width="20" height="14" x="2" y="5" rx="2"></rect> <path d="M2 10h20"></path> </svg> <span>Billing</span> <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘B</kbd> </div> <div role="menuitem"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> <span>Settings</span> <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘S</kbd> </div> </div> </div> </div>