Components

SuperCmd provides full compatibility with Raycast’s core UI components. All components are fully implemented and support the complete Raycast API specification.

List

List Component

Display a filterable list of items with optional details panel

The List component displays a list of items with built-in search, filtering, keyboard navigation, and action support.

Props

children

React.ReactNode

List.Item and List.Section components

searchBarPlaceholder

string

Placeholder text for the search bar

onSearchTextChange

(text: string) => void

Callback when search text changes. Enables controlled search.

searchText

string

Controlled search text value

filtering

boolean

default:"true"

Enable/disable built-in client-side filtering

isLoading

boolean

Show loading state

isShowingDetail

boolean

Show detail panel for selected item

Title shown in the footer

throttle

boolean

Throttle search text changes (300ms debounce)

onSelectionChange

(id: string) => void

Callback when selection changes

Example

import { List } from '@raycast/api';

export default function Command() {
  return (
    <List searchBarPlaceholder="Search items...">
      <List.Item title="First Item" subtitle="Details" />
      <List.Item title="Second Item" subtitle="More details" />
    </List>
  );
}

List.Item

string

Unique identifier for the item

title

string | { value: string; tooltip?: string }

required

Item title

subtitle

string | { value: string; tooltip?: string }

Item subtitle

icon

Image.ImageLike

Item icon (emoji, icon name, file path, or URL)

accessories

List.Item.Accessory[]

Array of accessories shown on the right side

keywords

string[]

Keywords for search filtering

detail

React.ReactElement<List.Item.Detail.Props>

Detail panel content

actions

React.ReactElement<ActionPanel.Props>

Action panel for this item

List.Item.Detail

Detail panel shown when isShowingDetail is true.

markdown

string

Markdown content to display

metadata

React.ReactElement<List.Item.Detail.Metadata.Props>

Metadata sidebar

List.Section

title

string

Section title

subtitle

string

Section subtitle

children

React.ReactNode

List.Item components

Detail

Detail Component

Display rich markdown content with optional metadata sidebar

The Detail component displays markdown content with an optional metadata sidebar.

Props

markdown

string

Markdown content to render

isLoading

boolean

Show loading state

Title shown in the footer

actions

React.ReactElement<ActionPanel.Props>

Action panel

metadata

React.ReactElement<Detail.Metadata.Props>

Metadata sidebar

Example

import { Detail } from '@raycast/api';

export default function Command() {
  const markdown = `
# Hello World

This is a **detail** view with *markdown* support.

- List item 1
- List item 2
  `;

  return (
    <Detail 
      markdown={markdown}
      metadata={
        <Detail.Metadata>
          <Detail.Metadata.Label title="Status" text="Active" />
          <Detail.Metadata.Separator />
          <Detail.Metadata.Link title="Website" target="https://example.com" text="example.com" />
        </Detail.Metadata>
      }
    />
  );
}

Detail.Metadata

Metadata sidebar components:

Detail.Metadata.Label - Display a label with text
Detail.Metadata.Link - Display a clickable link
Detail.Metadata.TagList - Display a list of tags
Detail.Metadata.Separator - Horizontal separator line

Form

Form Component

Collect user input with various field types

The Form component provides a way to collect user input with validation support.

Props

children

React.ReactNode

Form field components

actions

React.ReactElement<ActionPanel.Props>

Action panel

Title shown in the footer

isLoading

boolean

Show loading state

Example

import { Form, ActionPanel, Action } from '@raycast/api';

export default function Command() {
  return (
    <Form
      actions={
        <ActionPanel>
          <Action.SubmitForm title="Submit" onSubmit={(values) => console.log(values)} />
        </ActionPanel>
      }
    >
      <Form.TextField id="name" title="Name" placeholder="Enter name" />
      <Form.TextArea id="description" title="Description" />
      <Form.Dropdown id="priority" title="Priority">
        <Form.Dropdown.Item value="high" title="High" />
        <Form.Dropdown.Item value="medium" title="Medium" />
        <Form.Dropdown.Item value="low" title="Low" />
      </Form.Dropdown>
      <Form.Checkbox id="notify" label="Send notification" />
      <Form.DatePicker id="dueDate" title="Due Date" />
    </Form>
  );
}

Form Fields

Available form field components:

Form.TextField - Single-line text input
Form.TextArea - Multi-line text input
Form.Dropdown - Dropdown selection
Form.Checkbox - Checkbox input
Form.DatePicker - Date/time picker
Form.FilePicker - File selection
Form.PasswordField - Password input
Form.Separator - Visual separator
Form.Description - Descriptive text

All fields support:

id (string, required) - Field identifier
title (string) - Field label
value (any) - Controlled value
onChange (function) - Change callback
error (string) - Validation error message

Grid

Grid Component

Display items in a responsive grid layout

The Grid component displays items in a grid layout with search and filtering.

Props

children

React.ReactNode

Grid.Item and Grid.Section components

columns

number

default:"5"

Number of columns

searchBarPlaceholder

string

Placeholder text for search bar

isLoading

boolean

Show loading state

filtering

boolean

default:"true"

Enable built-in filtering

Example

import { Grid } from '@raycast/api';

export default function Command() {
  return (
    <Grid columns={4}>
      <Grid.Item content="🎨" title="Art" />
      <Grid.Item content="🎵" title="Music" />
      <Grid.Item content="📚" title="Books" />
    </Grid>
  );
}

Grid.Item

content

Image.ImageLike

required

Primary content (image, emoji, or icon)

title

string

Item title

subtitle

string

Item subtitle

actions

React.ReactElement<ActionPanel.Props>

Action panel

ActionPanel

ActionPanel & Actions

Interactive actions triggered by keyboard shortcuts

The ActionPanel contains actions that users can trigger with keyboard shortcuts.

Props

children

React.ReactNode

Action components

title

string

Panel title

Common Actions

Action.Open - Open URL or file
Action.OpenInBrowser - Open URL in browser
Action.Push - Navigate to new view
Action.Pop - Go back
Action.CopyToClipboard - Copy to clipboard
Action.Paste - Paste content
Action.SubmitForm - Submit form values
Action.ShowInFinder - Reveal file in Finder
Action.Trash - Move to trash

Example

import { ActionPanel, Action, Detail } from '@raycast/api';

export default function Command() {
  return (
    <Detail
      markdown="Hello World"
      actions={
        <ActionPanel>
          <Action.OpenInBrowser url="https://example.com" />
          <Action.CopyToClipboard content="Hello World" />
          <Action.Push title="Details" target={<Detail markdown="More info" />} />
        </ActionPanel>
      }
    />
  );
}

MenuBarExtra

Create menu bar extras (background extensions)

The MenuBarExtra component creates menu bar extras that run in the background.

Props

title

string

Menu bar title text

icon

Image.ImageLike

Menu bar icon

Tooltip on hover

isLoading

boolean

Show loading indicator

Example

import { MenuBarExtra } from '@raycast/api';

export default function Command() {
  return (
    <MenuBarExtra icon="⏱️" tooltip="Timer">
      <MenuBarExtra.Item title="Start Timer" onAction={() => {}} />
      <MenuBarExtra.Item title="Stop Timer" onAction={() => {}} />
      <MenuBarExtra.Separator />
      <MenuBarExtra.Submenu title="Presets">
        <MenuBarExtra.Item title="5 minutes" />
        <MenuBarExtra.Item title="10 minutes" />
      </MenuBarExtra.Submenu>
    </MenuBarExtra>
  );
}

MenuBarExtra.Item

title

string

required

Item title

icon

Image.ImageLike

Item icon

onAction

() => void

Click handler

shortcut

Keyboard.Shortcut

Keyboard shortcut

Raycast API

Implementation Status

List

List Component

Props

Example

List.Item

List.Item.Detail

List.Section

Detail

Detail Component

Props

Example

Detail.Metadata

Form

Form Component

Props

Example

Form Fields

Grid

Grid Component

Props

Example

Grid.Item

ActionPanel

ActionPanel & Actions

Props

Common Actions

Example

MenuBarExtra

MenuBarExtra

Props

Example

MenuBarExtra.Item

Build docs developers (and LLMs) love

Raycast API

Implementation Status

​List

List Component

​Props

​Example

​List.Item

​List.Item.Detail

​List.Section

​Detail

Detail Component

​Props

​Example

​Detail.Metadata

​Form

Form Component

​Props

​Example

​Form Fields

​Grid

Grid Component

​Props

​Example

​Grid.Item

​ActionPanel

ActionPanel & Actions

​Props

​Common Actions

​Example

​MenuBarExtra

MenuBarExtra

​Props

​Example

​MenuBarExtra.Item

Build docs developers (and LLMs) love

List

Props

Example

List.Item

List.Item.Detail

List.Section

Detail

Props

Example

Detail.Metadata

Form

Props

Example

Form Fields

Grid

Props

Example

Grid.Item

ActionPanel

Props

Common Actions

Example

MenuBarExtra

Props

Example

MenuBarExtra.Item