> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/SuperCmdLabs/SuperCmd/llms.txt
> Use this file to discover all available pages before exploring further.
# 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
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
List.Item and List.Section components
Placeholder text for the search bar
Callback when search text changes. Enables controlled search.
Controlled search text value
Enable/disable built-in client-side filtering
Show loading state
Show detail panel for selected item
Title shown in the footer
Throttle search text changes (300ms debounce)
Callback when selection changes
### Example
```tsx theme={null}
import { List } from '@raycast/api';
export default function Command() {
return (
);
}
```
### List.Item
Unique identifier for the item
Item title
Item subtitle
Item icon (emoji, icon name, file path, or URL)
Array of accessories shown on the right side
Keywords for search filtering
Detail panel content
Action panel for this item
### List.Item.Detail
Detail panel shown when `isShowingDetail` is true.
Markdown content to display
Metadata sidebar
### List.Section
Section title
Section subtitle
List.Item components
***
## Detail
Display rich markdown content with optional metadata sidebar
The `Detail` component displays markdown content with an optional metadata sidebar.
### Props
Markdown content to render
Show loading state
Title shown in the footer
Action panel
Metadata sidebar
### Example
```tsx theme={null}
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.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
Collect user input with various field types
The `Form` component provides a way to collect user input with validation support.
### Props
Form field components
Action panel
Title shown in the footer
Show loading state
### Example
```tsx theme={null}
import { Form, ActionPanel, Action } from '@raycast/api';
export default function Command() {
return (
);
}
```
### 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
Display items in a responsive grid layout
The `Grid` component displays items in a grid layout with search and filtering.
### Props
Grid.Item and Grid.Section components
Number of columns
Placeholder text for search bar
Show loading state
Enable built-in filtering
### Example
```tsx theme={null}
import { Grid } from '@raycast/api';
export default function Command() {
return (
);
}
```
### Grid.Item
Primary content (image, emoji, or icon)
Item title
Item subtitle
Action panel
***
## ActionPanel
Interactive actions triggered by keyboard shortcuts
The `ActionPanel` contains actions that users can trigger with keyboard shortcuts.
### Props
Action components
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
```tsx theme={null}
import { ActionPanel, Action, Detail } from '@raycast/api';
export default function Command() {
return (
} />
}
/>
);
}
```
***
## MenuBarExtra
Create menu bar extras (background extensions)
The `MenuBarExtra` component creates menu bar extras that run in the background.
### Props
Menu bar title text
Menu bar icon
Tooltip on hover
Show loading indicator
### Example
```tsx theme={null}
import { MenuBarExtra } from '@raycast/api';
export default function Command() {
return (
{}} />
{}} />
);
}
```
### MenuBarExtra.Item
Item title
Item icon
Click handler
Keyboard shortcut