Components

Visual UI components for building Raycast extension interfaces

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

navigationTitle · string

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

id · 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

navigationTitle · string

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

navigationTitle · string

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

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 · string

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