mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 21:58:17 +00:00
447 lines
38 KiB
Plaintext
447 lines
38 KiB
Plaintext
|
# Command
|
||
|
|
|
||
|
|
<Preview class="w-full max-w-sm">
|
||
|
|
<div id="demo-command-standalone" class="command border" aria-label="Command menu">
|
||
|
|
<header>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
|
||
|
|
<input type="text" id="demo-command-standalone-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="demo-command-standalone-menu" />
|
||
|
|
</header>
|
||
|
|
<div role="menu" id="demo-command-standalone-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
|
||
|
|
<div role="group" aria-labelledby="suggestions">
|
||
|
|
<span role="heading" id="suggestions">Suggestions</span>
|
||
|
|
<div role="menuitem" data-filter="Calendar" data-keywords="date event schedule">
|
||
|
|
<svg class="lucide lucide-calendar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" /></svg>
|
||
|
|
<span>Calendar</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Search Emoji" data-keywords="emoji smile reaction">
|
||
|
|
<svg class="lucide lucide-smile" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" x2="9.01" y1="9" y2="9" /><line x1="15" x2="15.01" y1="9" y2="9" /></svg>
|
||
|
|
<span>Search Emoji</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" aria-disabled="true">
|
||
|
|
<svg class="lucide lucide-calculator" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2" /><line x1="8" x2="16" y1="6" y2="6" /><line x1="16" x2="16" y1="14" y2="18" /><path d="M16 10h.01" /><path d="M12 10h.01" /><path d="M8 10h.01" /><path d="M12 14h.01" /><path d="M8 14h.01" /><path d="M12 18h.01" /><path d="M8 18h.01" /></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" data-filter="Profile" data-keywords="user account">
|
||
|
|
<svg class="lucide lucide-user" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
|
||
|
|
<span>Profile</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Billing" data-keywords="invoice payment">
|
||
|
|
<svg class="lucide lucide-credit-card" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></svg>
|
||
|
|
<span>Billing</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Settings" data-keywords="config preferences">
|
||
|
|
<svg class="lucide lucide-settings" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" /></svg>
|
||
|
|
<span>Settings</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
## About
|
||
|
|
|
||
|
|
shadcn/ui's Command component is built on `cmdk`. Basecoat implements the same command-menu pattern with vanilla HTML, CSS, and a small JavaScript controller for filtering, active item navigation, and dialog closing.
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
<Callout title="Template macros available" icon="code" action={{ label: "Read more", href: "/cli#command" }}>
|
||
|
|
This component ships `command()` and `command_dialog()` macros for Jinja and Nunjucks.
|
||
|
|
</Callout>
|
||
|
|
|
||
|
|
<Steps>
|
||
|
|
<Step title="Include the JavaScript files">
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.2/dist/js/basecoat.min.js" defer></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.2/dist/js/command.min.js" defer></script>
|
||
|
|
```
|
||
|
|
|
||
|
|
</Step>
|
||
|
|
<Step title="Add your command HTML">
|
||
|
|
|
||
|
|
```html
|
||
|
|
<div id="demo-command-standalone" class="command border" aria-label="Command menu">
|
||
|
|
<header>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
|
||
|
|
<input type="text" id="demo-command-standalone-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="demo-command-standalone-menu" />
|
||
|
|
</header>
|
||
|
|
<div role="menu" id="demo-command-standalone-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
|
||
|
|
<div role="group" aria-labelledby="suggestions">
|
||
|
|
<span role="heading" id="suggestions">Suggestions</span>
|
||
|
|
<div role="menuitem" data-filter="Calendar" data-keywords="date event schedule">
|
||
|
|
<svg class="lucide lucide-calendar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" /></svg>
|
||
|
|
<span>Calendar</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Search Emoji" data-keywords="emoji smile reaction">
|
||
|
|
<svg class="lucide lucide-smile" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" x2="9.01" y1="9" y2="9" /><line x1="15" x2="15.01" y1="9" y2="9" /></svg>
|
||
|
|
<span>Search Emoji</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" aria-disabled="true">
|
||
|
|
<svg class="lucide lucide-calculator" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2" /><line x1="8" x2="16" y1="6" y2="6" /><line x1="16" x2="16" y1="14" y2="18" /><path d="M16 10h.01" /><path d="M12 10h.01" /><path d="M8 10h.01" /><path d="M12 14h.01" /><path d="M8 14h.01" /><path d="M12 18h.01" /><path d="M8 18h.01" /></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" data-filter="Profile" data-keywords="user account">
|
||
|
|
<svg class="lucide lucide-user" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
|
||
|
|
<span>Profile</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Billing" data-keywords="invoice payment">
|
||
|
|
<svg class="lucide lucide-credit-card" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></svg>
|
||
|
|
<span>Billing</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Settings" data-keywords="config preferences">
|
||
|
|
<svg class="lucide lucide-settings" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" /></svg>
|
||
|
|
<span>Settings</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
Use `<dialog class="command-dialog">` for the command palette variant.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<button class="btn-outline" onclick="document.getElementById('command-palette').showModal()">Open</button>
|
||
|
|
<dialog id="command-palette" class="command-dialog" aria-label="Command menu">
|
||
|
|
<div class="command">
|
||
|
|
<!-- Command content -->
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
```
|
||
|
|
|
||
|
|
</Step>
|
||
|
|
</Steps>
|
||
|
|
|
||
|
|
### HTML structure
|
||
|
|
|
||
|
|
The command menu can be used standalone or inside a native dialog. The structure is:
|
||
|
|
|
||
|
|
<dl>
|
||
|
|
<dt><code class="highlight language-html"><dialog class="command-dialog"></code> <span class="badge-secondary">Optional</span></dt>
|
||
|
|
<dd>
|
||
|
|
Dialog variant. Wraps one <code><div class="command"></code>. Add <code>aria-label</code> or <code>aria-labelledby</code> for an accessible name.
|
||
|
|
<dl>
|
||
|
|
<dt><code class="highlight language-html"><div class="command"></code></dt>
|
||
|
|
<dd>
|
||
|
|
Root command menu. Can also be used standalone without the dialog wrapper. Add <code>data-filter="manual"</code> when your app owns filtering, such as remote search or a local Lunr index.
|
||
|
|
<dl>
|
||
|
|
<dt><code class="highlight language-html"><header></code></dt>
|
||
|
|
<dd>
|
||
|
|
Search input wrapper. The macro includes a search icon and input.
|
||
|
|
<dl>
|
||
|
|
<dt><code class="highlight language-html"><input type="text" role="combobox"></code></dt>
|
||
|
|
<dd>Filter input. Use <code>aria-expanded="true"</code> and <code>aria-controls="{ MENU_ID }"</code> to point to the command list.</dd>
|
||
|
|
</dl>
|
||
|
|
</dd>
|
||
|
|
<dt><code class="highlight language-html"><div role="menu" id="{ MENU_ID }"></code></dt>
|
||
|
|
<dd>
|
||
|
|
Command list. Set <code>data-empty</code> to customize the empty state.
|
||
|
|
<dl>
|
||
|
|
<dt><code class="highlight language-html"><div role="group" aria-labelledby="{ HEADING_ID }"></code> <span class="badge-secondary">Optional</span></dt>
|
||
|
|
<dd>Groups related command items. Hidden automatically when every item in the group is filtered out.</dd>
|
||
|
|
<dt><code class="highlight language-html"><span role="heading" id="{ HEADING_ID }"></code> <span class="badge-secondary">Optional</span></dt>
|
||
|
|
<dd>Group heading. Use an <code>id</code> when the parent group uses <code>aria-labelledby</code>.</dd>
|
||
|
|
<dt><code class="highlight language-html"><div role="menuitem"></code> or <code class="highlight language-html"><a role="menuitem"></code></dt>
|
||
|
|
<dd>Selectable command item. Use <code><a></code> for navigation and <code><div></code> for actions. Supports <code>data-filter</code>, <code>data-keywords</code>, <code>data-force</code>, <code>data-keep-command-open</code>, and <code>aria-disabled="true"</code>.</dd>
|
||
|
|
<dt><code class="highlight language-html"><span data-shortcut></code> <span class="badge-secondary">Optional</span></dt>
|
||
|
|
<dd>Shortcut hint aligned to the inline end of the item.</dd>
|
||
|
|
<dt><code class="highlight language-html"><span data-indicator></code> <span class="badge-secondary">Optional</span></dt>
|
||
|
|
<dd>Item indicator. It becomes visible with <code>data-checked="true"</code> or <code>aria-selected="true"</code>.</dd>
|
||
|
|
<dt><code class="highlight language-html"><hr role="separator"></code> <span class="badge-secondary">Optional</span></dt>
|
||
|
|
<dd>Separator between groups/items. Hidden while filtering.</dd>
|
||
|
|
</dl>
|
||
|
|
</dd>
|
||
|
|
</dl>
|
||
|
|
</dd>
|
||
|
|
</dl>
|
||
|
|
</dd>
|
||
|
|
</dl>
|
||
|
|
|
||
|
|
### JavaScript API
|
||
|
|
|
||
|
|
| API | Type | Description |
|
||
|
|
| --- | --- | --- |
|
||
|
|
| `command.refresh()` | Method | Rescans command items after children change inside the existing `role="menu"` list. |
|
||
|
|
|
||
|
|
## Examples
|
||
|
|
|
||
|
|
### Basic
|
||
|
|
|
||
|
|
A simple command menu in a dialog. The button also shows the keyboard shortcut used in this example.
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn-outline" onclick="document.getElementById('command-basic').showModal()">
|
||
|
|
Open command menu
|
||
|
|
<kbd class="kbd">⌘J</kbd>
|
||
|
|
</button>
|
||
|
|
<dialog id="command-basic" class="command-dialog" aria-label="Command menu" onclick="if (event.target === this) this.close()">
|
||
|
|
<div class="command">
|
||
|
|
<header>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
|
||
|
|
<input type="text" id="command-basic-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-basic-menu" />
|
||
|
|
</header>
|
||
|
|
<div role="menu" id="command-basic-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
|
||
|
|
<div role="group" aria-labelledby="command-basic-suggestions">
|
||
|
|
<span role="heading" id="command-basic-suggestions">Suggestions</span>
|
||
|
|
<div role="menuitem" data-filter="Calendar" data-keywords="date event schedule">
|
||
|
|
<svg class="lucide lucide-calendar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" /></svg>
|
||
|
|
<span>Calendar</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Search Emoji" data-keywords="emoji smile reaction">
|
||
|
|
<svg class="lucide lucide-smile" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" x2="9.01" y1="9" y2="9" /><line x1="15" x2="15.01" y1="9" y2="9" /></svg>
|
||
|
|
<span>Search Emoji</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" aria-disabled="true">
|
||
|
|
<svg class="lucide lucide-calculator" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2" /><line x1="8" x2="16" y1="6" y2="6" /><line x1="16" x2="16" y1="14" y2="18" /><path d="M16 10h.01" /><path d="M12 10h.01" /><path d="M8 10h.01" /><path d="M12 14h.01" /><path d="M8 14h.01" /><path d="M12 18h.01" /><path d="M8 18h.01" /></svg>
|
||
|
|
<span>Calculator</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr role="separator" />
|
||
|
|
<div role="group" aria-labelledby="command-basic-settings">
|
||
|
|
<span role="heading" id="command-basic-settings">Settings</span>
|
||
|
|
<div role="menuitem" data-filter="Profile" data-keywords="user account">
|
||
|
|
<svg class="lucide lucide-user" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
|
||
|
|
<span>Profile</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Billing" data-keywords="invoice payment">
|
||
|
|
<svg class="lucide lucide-credit-card" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></svg>
|
||
|
|
<span>Billing</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Settings" data-keywords="config preferences">
|
||
|
|
<svg class="lucide lucide-settings" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" /></svg>
|
||
|
|
<span>Settings</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
<script>
|
||
|
|
document.addEventListener("keydown", (event) => {
|
||
|
|
if ((event.metaKey || event.ctrlKey) && event.key === "j") {
|
||
|
|
event.preventDefault();
|
||
|
|
const dialog = document.getElementById("command-basic");
|
||
|
|
dialog.open ? dialog.close() : dialog.showModal();
|
||
|
|
dialog.querySelector("header input")?.focus();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Shortcuts
|
||
|
|
|
||
|
|
<Preview class="w-full max-w-sm">
|
||
|
|
<div id="command-shortcuts" class="command border" aria-label="Command menu">
|
||
|
|
<header>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
|
||
|
|
<input type="text" id="command-shortcuts-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-shortcuts-menu" />
|
||
|
|
</header>
|
||
|
|
<div role="menu" id="command-shortcuts-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
|
||
|
|
<div role="group" aria-labelledby="command-shortcuts-suggestions">
|
||
|
|
<span role="heading" id="command-shortcuts-suggestions">Suggestions</span>
|
||
|
|
<div role="menuitem" data-filter="Calendar" data-keywords="date event schedule">
|
||
|
|
<svg class="lucide lucide-calendar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" /></svg>
|
||
|
|
<span>Calendar</span>
|
||
|
|
<span data-shortcut>⌘K</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Search Emoji" data-keywords="emoji smile reaction">
|
||
|
|
<svg class="lucide lucide-smile" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" x2="9.01" y1="9" y2="9" /><line x1="15" x2="15.01" y1="9" y2="9" /></svg>
|
||
|
|
<span>Search Emoji</span>
|
||
|
|
<span data-shortcut>⌘E</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" aria-disabled="true">
|
||
|
|
<svg class="lucide lucide-calculator" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2" /><line x1="8" x2="16" y1="6" y2="6" /><line x1="16" x2="16" y1="14" y2="18" /><path d="M16 10h.01" /><path d="M12 10h.01" /><path d="M8 10h.01" /><path d="M12 14h.01" /><path d="M8 14h.01" /><path d="M12 18h.01" /><path d="M8 18h.01" /></svg>
|
||
|
|
<span>Calculator</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr role="separator" />
|
||
|
|
<div role="group" aria-labelledby="command-shortcuts-settings">
|
||
|
|
<span role="heading" id="command-shortcuts-settings">Settings</span>
|
||
|
|
<div role="menuitem" data-filter="Profile" data-keywords="user account">
|
||
|
|
<svg class="lucide lucide-user" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
|
||
|
|
<span>Profile</span>
|
||
|
|
<span data-shortcut>⌘P</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Billing" data-keywords="invoice payment">
|
||
|
|
<svg class="lucide lucide-credit-card" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></svg>
|
||
|
|
<span>Billing</span>
|
||
|
|
<span data-shortcut>⌘B</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Settings" data-keywords="config preferences">
|
||
|
|
<svg class="lucide lucide-settings" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" /></svg>
|
||
|
|
<span>Settings</span>
|
||
|
|
<span data-shortcut>⌘S</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Groups
|
||
|
|
|
||
|
|
<Preview class="w-full max-w-sm">
|
||
|
|
<div id="command-groups" class="command border" aria-label="Command menu">
|
||
|
|
<header>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
|
||
|
|
<input type="text" id="command-groups-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-groups-menu" />
|
||
|
|
</header>
|
||
|
|
<div role="menu" id="command-groups-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
|
||
|
|
<div role="group" aria-labelledby="command-groups-suggestions">
|
||
|
|
<span role="heading" id="command-groups-suggestions">Suggestions</span>
|
||
|
|
<div role="menuitem" data-filter="Calendar" data-keywords="date event schedule">
|
||
|
|
<svg class="lucide lucide-calendar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" /></svg>
|
||
|
|
<span>Calendar</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Search Emoji" data-keywords="emoji smile reaction">
|
||
|
|
<svg class="lucide lucide-smile" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" x2="9.01" y1="9" y2="9" /><line x1="15" x2="15.01" y1="9" y2="9" /></svg>
|
||
|
|
<span>Search Emoji</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" aria-disabled="true">
|
||
|
|
<svg class="lucide lucide-calculator" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2" /><line x1="8" x2="16" y1="6" y2="6" /><line x1="16" x2="16" y1="14" y2="18" /><path d="M16 10h.01" /><path d="M12 10h.01" /><path d="M8 10h.01" /><path d="M12 14h.01" /><path d="M8 14h.01" /><path d="M12 18h.01" /><path d="M8 18h.01" /></svg>
|
||
|
|
<span>Calculator</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr role="separator" />
|
||
|
|
<div role="group" aria-labelledby="command-groups-settings">
|
||
|
|
<span role="heading" id="command-groups-settings">Settings</span>
|
||
|
|
<div role="menuitem" data-filter="Profile" data-keywords="user account">
|
||
|
|
<svg class="lucide lucide-user" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
|
||
|
|
<span>Profile</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Billing" data-keywords="invoice payment">
|
||
|
|
<svg class="lucide lucide-credit-card" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></svg>
|
||
|
|
<span>Billing</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Settings" data-keywords="config preferences">
|
||
|
|
<svg class="lucide lucide-settings" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" /></svg>
|
||
|
|
<span>Settings</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Scrollable
|
||
|
|
|
||
|
|
<Preview class="w-full max-w-sm">
|
||
|
|
<div id="command-scrollable" class="command border" aria-label="Command menu">
|
||
|
|
<header>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
|
||
|
|
<input type="text" id="command-scrollable-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-scrollable-menu" />
|
||
|
|
</header>
|
||
|
|
<div role="menu" id="command-scrollable-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
|
||
|
|
<div role="group" aria-labelledby="command-scrollable-heading">
|
||
|
|
<span role="heading" id="command-scrollable-heading">Pages</span>
|
||
|
|
<div role="menuitem" data-filter="Page 1">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 1</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 2">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 2</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 3">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 3</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 4">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 4</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 5">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 5</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 6">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 6</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 7">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 7</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 8">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 8</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 9">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 9</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 10">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 10</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 11">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 11</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 12">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 12</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 13">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 13</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 14">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 14</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 15">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 15</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 16">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 16</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 17">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 17</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Page 18">
|
||
|
|
<svg class="lucide lucide-file" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /></svg>
|
||
|
|
<span>Page 18</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### RTL
|
||
|
|
|
||
|
|
Command supports document direction. Set `dir="rtl"` on the command root or a parent element.
|
||
|
|
|
||
|
|
<Preview class="w-full max-w-sm">
|
||
|
|
<div dir="rtl">
|
||
|
|
<div id="command-rtl" class="command border" aria-label="Command menu">
|
||
|
|
<header>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
|
||
|
|
<input type="text" id="command-rtl-input" placeholder="اكتب أمراً أو ابحث..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-rtl-menu" />
|
||
|
|
</header>
|
||
|
|
<div role="menu" id="command-rtl-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
|
||
|
|
<div role="group" aria-labelledby="command-rtl-suggestions">
|
||
|
|
<span role="heading" id="command-rtl-suggestions">اقتراحات</span>
|
||
|
|
<div role="menuitem" data-filter="Calendar">
|
||
|
|
<svg class="lucide lucide-calendar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" /></svg>
|
||
|
|
<span>التقويم</span>
|
||
|
|
<span data-shortcut>⌘K</span>
|
||
|
|
</div>
|
||
|
|
<div role="menuitem" data-filter="Settings">
|
||
|
|
<svg class="lucide lucide-settings" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" /></svg>
|
||
|
|
<span>الإعدادات</span>
|
||
|
|
<span data-shortcut>⌘S</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Preview>
|