CommandPalette
<ts-command-palette> vv0.6.3
A command palette overlay for quick search and action execution. Activated via Cmd+K (Mac) / Ctrl+K (Windows/Linux).
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-command-palette placeholder="Type a command...">Content</ts-command-palette>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
open | open | boolean | false | Whether the command palette is open. |
placeholder | placeholder | string | 'Type a command...' | Placeholder text for the search input. |
Events
Section titled “Events”| Event | Detail | Bubbles | Composed | Description |
|---|---|---|---|---|
tsClose | void | Yes | Yes | Emitted when the palette is closed. |
tsSelect | \{ value: string; \} | Yes | Yes | Emitted when an item is selected. |
| Name | Description |
|---|---|
*(default)* | Default slot for <ts-command-palette-item> children. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
list | The scrollable results list. |
overlay | The backdrop overlay. |
panel | The palette panel container. |
search | The search input element. |
ts-command-palette::part(list) { /* your custom styles */}<ts-command-palette placeholder="Type a command...">Content</ts-command-palette>import { TsCommandPalette } from '@tessera-ui/react';
<TsCommandPalette placeholder="Type a command...">Content</TsCommandPalette>