Grid - Raycast API

Search…
Grid
The Grid component is provided as an alternative to the List component when the defining characteristic of an item is an image.
Because its API tries to stick as closely to List's as possible, changing a view from List to Grid should be as simple as:
making sure you're using at least version 1.36.0 of the @raycast/api package
updating your imports from import { List } from '@raycast/api' to import { Grid } from '@raycast/api';
removing the isShowingDetail prop from the top-level List component, along with all List.Items' detail prop
renaming all List.Items' hicon prop to content
removing all List.Items' accessories, accessoryIcon and `accessoryTitle props; Grid.Item does not currently support accessories
finally, replacing all usages of List with Grid,
Search Bar
The search bar allows users to interact quickly with grid items. By default, Grid.Items are displayed if the user's input can be (fuzzy) matched to the item's title or keywords.
Custom filtering
Sometimes, you may not want to rely on Raycast's filtering, but use/implement your own. If that's the case, you can set the Grid's enableFiltering prop to false, and the items displayed will be independent of the search bar's text. Note that enableFiltering is also implicitly set to false if an onSearchTextChange listener is specified. If you want to specify a change listener and still take advantage of Raycast's built-in filtering, you can explicitly set enableFiltering to true.
1
import { useEffect, useState } from "react";
2
import { Grid } from "@raycast/api";
3
​
4
const items = [
5
  { content: "🙈", keywords: ["see-no-evil", "monkey"] },
6
  { content: "🥳", keywords: ["partying", "face"] },
7
];
8
​
9
export default function Command() {
10
  const [searchText, setSearchText] = useState("");
11
  const [filteredList, filterList] = useState(items);
12
​
13
  useEffect(() => {
14
    filterList(items.filter((item) => item.keywords.some((keyword) => keyword.includes(searchText))));
15
  }, [searchText]);
16
​
17
  return (
18
    <Grid
19
      itemSize={Grid.ItemSize.Medium}
20
      inset={Grid.Inset.Large}
21
      enableFiltering={false}
22
      onSearchTextChange={setSearchText}
23
      navigationTitle="Search Emoji"
24
      searchBarPlaceholder="Search your favorite emoji"
25
    >
26
      {filteredList.map((item) => (
27
        <Grid.Item key={item.content} content={item.content} />
28
      ))}
29
    </Grid>
30
  );
31
}
Copied!
Programmatically updating the search bar
Other times, you may want the content of the search bar to be updated by the extension, for example, you may store a list of the user's previous searches and, on the next visit, allow them to "continue" where they left off.
To do so, you can use the searchText prop.
1
import { useEffect, useState } from "react";
2
import { Action, ActionPanel, Grid } from "@raycast/api";
3
​
4
const items = [
5
  { content: "🙈", keywords: ["see-no-evil", "monkey"] },
6
  { content: "🥳", keywords: ["partying", "face"] },
7
];
8
​
9
export default function Command() {
10
  const [searchText, setSearchText] = useState("");
11
​
12
  return (
13
    <Grid
14
      searchText={searchText}
15
      onSearchTextChange={setSearchText}
16
      navigationTitle="Search Emoji"
17
      searchBarPlaceholder="Search your favorite emoji"
18
    >
19
      {items.map((item) => (
20
        <Grid.Item
21
          key={item.content}
22
          content={item.content}
23
          actions={
24
            <ActionPanel>
25
              <Action title="Select" onAction={() => setSearchText(item.content)} />
26
            </ActionPanel>
27
          }
28
        />
29
      ))}
30
    </Grid>
31
  );
32
}
Copied!
Dropdown
Some extensions may benefit from giving users a second filtering dimension. A media file management extension may allow users to view only videos or only images, an image-searching extension may allow switching ssearch engines, etc.
This is where the searchBarAccessory prop is useful. Pass it a Grid.Dropdown component, and it will be displayed on the right-side of the search bar. Invoke it either by using the global shortcut ⌘ P or by clicking on it.
Examples
Grid.tsx
GridWithSections.tsx
GridWithActions.tsx
GridWithEmptyView.tsx
1
import { Grid } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <Grid itemSize={Grid.ItemSize.Small} inset={Grid.Inset.Large}>
6
      <Grid.Item content="🥳" />
7
      <Grid.Item content="🙈" />
8
    </Grid>
9
  );
10
}
Copied!
1
import { Grid } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <Grid>
6
      <Grid.Section title="Section 1">
7
        <Grid.Item content="https://placekitten.com/400/400" title="Item 1" />
8
      </Grid.Section>
9
      <Grid.Section title="Section 2" subtitle="Optional subtitle">
10
        <Grid.Item content="https://placekitten.com/400/400" title="Item 1" />
11
      </Grid.Section>
12
    </Grid>
13
  );
14
}
Copied!
1
import { ActionPanel, Action, Grid } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <Grid>
6
      <Grid.Item
7
        content="https://placekitten.com/400/400"
8
        title="Item 1"
9
        actions={
10
          <ActionPanel>
11
            <Action.CopyToClipboard content="👋" />
12
          </ActionPanel>
13
        }
14
      />
15
    </Grid>
16
  );
17
}
Copied!
1
import { useEffect, useState } from "react";
2
import { Grid, Image } from "@raycast/api";
3
​
4
export default function CommandWithCustomEmptyView() {
5
  const [state, setState] = useState<{
6
    searchText: string;
7
    items: { content: Image.ImageLike; title: string }[];
8
  }>({ searchText: "", items: [] });
9
​
10
  useEffect(() => {
11
    // perform an API call that eventually populates `items`.
12
  }, [state.searchText]);
13
​
14
  return (
15
    <Grid onSearchTextChange={(newValue) => setState((previous) => ({ ...previous, searchText: newValue }))}>
16
      {state.searchText === "" && state.items.length === 0 ? (
17
        <Grid.EmptyView icon={{ source: "https://placekitten.com/500/500" }} title="Type something to get started" />
18
      ) : (
19
        state.items.map((item, index) => <Grid.Item key={index} content={item.content} title={item.title} />)
20
      )}
21
    </Grid>
22
  );
23
}
Copied!
API Reference
Grid
Displays Grid.Section or Grid.Item.
The grid uses built-in filtering by indexing the title & keywords of its items.
Example
1
import { Grid } from "@raycast/api";
2
​
3
const items = [
4
  { content: "🙈", keywords: ["see-no-evil", "monkey"] },
5
  { content: "🥳", keywords: ["partying", "face"] },
6
];
7
​
8
export default function Command() {
9
  return (
10
    <Grid
11
      itemSize={Grid.ItemSize.Medium}
12
      inset={Grid.Inset.Large}
13
      navigationTitle="Search Emoji"
14
      searchBarPlaceholder="Search your favorite emoji"
15
    >
16
      {items.map((item) => (
17
        <Grid.Item key={item.content} content={item.content} keywords={item.keywords} />
18
      ))}
19
    </Grid>
20
  );
21
}
Copied!
Props
Prop
Description
Type
Default
actions
A reference to an ActionPanel.
React.ReactNode
-
children
Grid sections or items. If Grid.Item elements are specified, a default section is automatically created.
React.ReactNode
-
enableFiltering
Toggles Raycast filtering. When true, Raycast will use the query in the search bar to filter grid items. When false, the extension needs to take care of the filtering.
boolean
false when onSearchTextChange is specified, true otherwise.
inset
Indicates how much space there should be between a Grid.Items' content and its borders. The absolute value depends on the value of the itemSize prop.
​Grid.Inset​
-
isLoading
Indicates whether a loading bar should be shown or hidden below the search bar
boolean
false
itemSize
The number of items that should be displayed on a single row.
​Grid.ItemSize​
​Grid.ItemSize.Medium​
navigationTitle
The main title for that view displayed in Raycast
string
Command title
searchBarAccessory
​Grid.Dropdown that will be shown in the right-hand-side of the search bar.
ReactElement<Grid.Dropdown.Props, string>
-
searchBarPlaceholder
Placeholder text that will be shown in the search bar.
string
"Search value..."
searchText
The text that will be displayed in the search bar.
string
-
selectedItemId
Selects the item with the specified id.
string
-
throttle
Defines whether the Grid.Props.onSearchTextChange will be triggered on every keyboard press or with a delay for throttling the events. Recommended to set to true when using custom filtering logic with asynchronous operations (e.g. network requests).
boolean
false
onSearchTextChange
Callback triggered when the search bar text changes.
(text: string) => void
-
onSelectionChange
Callback triggered when the item selection in the grid changes.
(id: string) => void
-
Grid.Dropdown
A dropdown menu that will be shown in the right-hand-side of the search bar.
Example
1
import { Grid, Image } from "@raycast/api";
2
import { useState } from "react";
3
​
4
const types = [
5
  { id: 1, name: "Smileys", value: "smileys" },
6
  { id: 2, name: "Animals & Nature", value: "animals-and-nature" },
7
];
8
​
9
const items: { [key: string]: { content: Image.ImageLike; keywords: string[] }[] } = {
10
  smileys: [{ content: "🥳", keywords: ["partying", "face"] }],
11
  "animals-and-nature": [{ content: "🙈", keywords: ["see-no-evil", "monkey"] }],
12
};
13
​
14
export default function Command() {
15
  const [type, setType] = useState<string>("smileys");
16
​
17
  return (
18
    <Grid
19
      navigationTitle="Search Beers"
20
      searchBarPlaceholder="Search your favorite drink"
21
      searchBarAccessory={
22
        <Grid.Dropdown tooltip="Select Emoji Category" storeValue={true} onChange={(newValue) => setType(newValue)}>
23
          <Grid.Dropdown.Section title="Emoji Categories">
24
            {types.map((type) => (
25
              <Grid.Dropdown.Item key={type.id} title={type.name} value={type.value} />
26
            ))}
27
          </Grid.Dropdown.Section>
28
        </Grid.Dropdown>
29
      }
30
    >
31
      {(items[type] || []).map((item) => (
32
        <Grid.Item content={item.content} keywords={item.keywords} />
33
      ))}
34
    </Grid>
35
  );
36
}
Copied!
Props
Prop
Description
Type
Default
tooltip*
Tooltip displayed when hovering the dropdown.
string
-
children
Grid sections or items. If Grid.Dropdown.Item elements are specified, a default section is automatically created.
React.ReactNode
-
defaultValue
The default value of the dropdown. Keep in mind that defaultValue will be configured once per component lifecycle. This means that if a user changes the value, defaultValue won't be configured on re-rendering.
string
-
id
ID of the dropdown.
string
-
placeholder
Placeholder text that will be shown in the dropdown search field.
string
"Search..."
storeValue
Indicates whether the value of the dropdown should be persisted after selection, and restored next time the dropdown is rendered.
boolean
-
value
The currently value of the dropdown.
string
-
onChange
Callback triggered when the grid item selection changes.
(newValue: string) => void
-
Grid.Dropdown.Item
A dropdown item in a Grid.Dropdown​
Example
1
import { Grid } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <Grid
6
      searchBarAccessory={
7
        <Grid.Dropdown tooltip="Dropdown With Items">
8
          <Grid.Dropdown.Item title="One" value="one" />
9
          <Grid.Dropdown.Item title="Two" value="two" />
10
          <Grid.Dropdown.Item title="Three" value="three" />
11
        </Grid.Dropdown>
12
      }
13
    >
14
      <Grid.Item content="https://placekitten.com/400/400" title="Item in the Main Grid" />
15
    </Grid>
16
  );
17
}
Copied!
Props
Prop
Description
Type
Default
title*
The title displayed for the item.
string
-
value*
Value of the dropdown item. Make sure to assign each unique value for each item.
string
-
icon
An optional icon displayed for the item.
​Image.ImageLike​
-
Grid.Dropdown.Section
Visually separated group of dropdown items.
Use sections to group related menu items together.
Example
1
import { Grid } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <Grid
6
      searchBarAccessory={
7
        <Grid.Dropdown tooltip="Dropdown With Sections">
8
          <Grid.Dropdown.Section title="First Section">
9
            <Grid.Dropdown.Item title="One" value="one" />
10
          </Grid.Dropdown.Section>
11
          <Grid.Dropdown.Section title="Second Section">
12
            <Grid.Dropdown.Item title="Two" value="two" />
13
          </Grid.Dropdown.Section>
14
        </Grid.Dropdown>
15
      }
16
    >
17
      <Grid.Item content="https://placekitten.com/400/400" title="Item in the Main Grid" />
18
    </Grid>
19
  );
20
}
Copied!
Props
Prop
Description
Type
Default
children
The item elements of the section.
React.ReactNode
-
title
Title displayed above the section
string
-
Grid.EmptyView
A view to display when there aren't any items available. Use to greet users with a friendly message if the extension requires user input before it can show any items e.g. when searching for an image, a gif etc.
Raycast provides a default EmptyView that will be displayed if the Grid component either has no children, or if it has children, but none of them match the query in the search bar. This too can be overridden by passing an empty view alongside the other Grid.Items.
Note that the EmptyView is never displayed if the Grid's isLoading property is true and the search bar is empty.
Grid EmptyView illustration
Example
1
import { useEffect, useState } from "react";
2
import { Grid, Image } from "@raycast/api";
3
​
4
export default function CommandWithCustomEmptyView() {
5
  const [state, setState] = useState<{
6
    searchText: string;
7
    items: { content: Image.ImageLike; title: string }[];
8
  }>({ searchText: "", items: [] });
9
​
10
  useEffect(() => {
11
    // perform an API call that eventually populates `items`.
12
  }, [state.searchText]);
13
​
14
  return (
15
    <Grid onSearchTextChange={(newValue) => setState((previous) => ({ ...previous, searchText: newValue }))}>
16
      {state.searchText === "" && state.items.length === 0 ? (
17
        <Grid.EmptyView icon={{ source: "https://placekitten.com/500/500" }} title="Type something to get started" />
18
      ) : (
19
        state.items.map((item, index) => <Grid.Item key={index} content={item.content} title={item.title} />)
20
      )}
21
    </Grid>
22
  );
23
}
Copied!
Props
Prop
Description
Type
Default
actions
A reference to an ActionPanel.
React.ReactNode
-
description
An optional description for why the empty view is shown.
string
-
icon
An icon displayed in the center of the EmptyView.
​Image.ImageLike​
-
title
The main title displayed for the Empty View.
string
-
Grid.Item
A item in the Grid.
This is one of the foundational UI components of Raycast. A grid item represents a single entity. It can be an image, an emoji, a GIF etc. You most likely want to perform actions on this item, so make it clear to the user what this item is about.
Example
1
import { Grid } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <Grid>
6
      <Grid.Item content="🥳" title="Partying Face" subtitle="Smiley" />
7
    </Grid>
8
  );
9
}
Copied!
Props
Prop
Description
Type
Default
content*
An image, optionally with a tooltip, representing the content of the grid item.
​Image.ImageLike or { tooltip: string; value: Image.ImageLike }
-
actions
A reference to an ActionPanel.
React.ReactNode
-
id
ID of the item. This string is passed to the onSelectionChange handler of the Grid when the item is selected. Make sure to assign each item a unique ID or a UUID will be auto generated.
string
-
keywords
An optional property used for providing additional indexable strings for search. When filtering the list in Raycast through the search bar, the keywords will be searched in addition to the title.
string[]
-
subtitle
An optional subtitle displayed next to the main title, optionally with a tooltip.
string or { tooltip: string; value: string }
-
title
The main title displayed for that item, optionally with a tooltip.
string or { tooltip: string; value: string }
-
Grid.Section
A group of related Grid.Item.
Sections are a great way to structure your grid. For example, you can group photos taken in the same place or in the same day. This way, the user can quickly access what is most relevant.
Example
1
import { Grid } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <Grid>
6
      <Grid.Section title="Section 1">
7
        <Grid.Item content="https://placekitten.com/400/400" title="Item 1" />
8
      </Grid.Section>
9
      <Grid.Section title="Section 2" subtitle="Optional subtitle">
10
        <Grid.Item content="https://placekitten.com/400/400" title="Item 1" />
11
      </Grid.Section>
12
    </Grid>
13
  );
14
}
Copied!
Props
Prop
Description
Type
Default
children
The Grid.Item elements of the section.
React.ReactNode
-
subtitle
An optional subtitle displayed next to the title of the section.
string
-
title
Title displayed above the section.
string
-
Types
Grid.Inset
An enum representing the amount of space there should be between a Grid Item's content and its borders. The absolute value depends on the value of Grid's itemSize prop.
Enumeration members
Name
Description
Small
Small insets
Medium
Medium insets
Large
Large insets
Grid.ItemSize
An enum representing the size of the Grid's child Grid.Items.
Enumeration members
Name
Description
Small
Fits 8 items per row.
Medium
Fits 5 items per row.
Large
Fits 3 items per row.