CommandPaletteItem

<ts-command-palette-item> vv0.6.3

An individual item within the command palette.

Open in Storybook for interactive demos.

Preview

<ts-command-palette-item></ts-command-palette-item>

Properties

Property	Attribute	Type	Default	Description
group	group	string | undefined	—	Optional group name for categorization.
icon	icon	string | undefined	—	Optional icon name (Lucide icon).
label	label	string	—	The display label for the item.
shortcut	shortcut	string | undefined	—	Optional keyboard shortcut text (e.g., “Ctrl+S”).
value	value	string	—	The value emitted when this item is selected.

CSS Parts

Use ::part() to style internal elements:

Part	Description
base	The item container.
icon	The icon wrapper.
label	The label text.
shortcut	The keyboard shortcut text.

ts-command-palette-item::part(base) {
  /* your custom styles */
}

Usage

HTML

<ts-command-palette-item></ts-command-palette-item>

React

import { TsCommandPaletteItem } from '@tessera-ui/react';

<TsCommandPaletteItem></TsCommandPaletteItem>