Detail

Search…
Detail
API Reference
Detail
Renders a markdown (CommonMark) string with an optional metadata panel.
Typically used as a standalone view or when navigating from a List.
Example
1
import { Detail } from "@raycast/api";
2
​
3
export default function Command() {
4
  return <Detail markdown="**Hello** _World_!" />;
5
}
Copied!
Props
Prop
Description
Type
Default
actions
A reference to an ActionPanel.
React.ReactNode
-
isLoading
Indicates whether a loading bar should be shown or hidden below the search bar
boolean
false
markdown
The CommonMark string to be rendered.
string
-
metadata
The Detail.Metadata to be rendered in the right side area
React.ReactNode
-
navigationTitle
The main title for that view displayed in Raycast
string
Command title
Detail.Metadata
A Metadata view that will be shown in the right-hand-side of the Detail.
Use it to display additional structured data about the main content shown in the Detail view.
Detail-metadata illustration
Example
1
import { Detail } from "@raycast/api";
2
​
3
const markdown = `
4
# Pikachu
5
​
6
![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)
7
​
8
Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
9
`;
10
​
11
export default function Main() {
12
  return (
13
    <Detail
14
      markdown={markdown}
15
      navigationTitle="Pikachu"
16
      metadata={
17
        <Detail.Metadata>
18
          <Detail.Metadata.Label title="Height" text={`1' 04"`} />
19
          <Detail.Metadata.Label title="Weight" text="13.2 lbs" />
20
          <Detail.Metadata.TagList title="Type">
21
            <Detail.Metadata.TagList.Item text="Electric" color={"#eed535"} />
22
          </Detail.Metadata.TagList>
23
          <Detail.Metadata.Separator />
24
          <Detail.Metadata.Link
25
            title="Evolution"
26
            target="https://www.pokemon.com/us/pokedex/pikachu"
27
            text="Raichu"
28
          />
29
        </Detail.Metadata>
30
      }
31
    />
32
  );
33
}
Copied!
Props
Prop
Description
Type
Default
children*
The Detail.Metadata.Item elements of the Metadata view.
React.ReactNode
-
Detail.Metadata.Label
A single value with an optional icon.
Detail-metadata-label illustration
Example
1
import { Detail } from "@raycast/api";
2
​
3
export default function Main() {
4
  return (
5
    <Detail
6
      markdown={markdown}
7
      navigationTitle="Pikachu"
8
      metadata={
9
        <Detail.Metadata>
10
          <Detail.Metadata.Label
11
            title="Height"
12
            text={`1' 04"`}
13
            icon="weight.svg"
14
          />
15
        </Detail.Metadata>
16
      }
17
    />
18
  );
19
}
Copied!
Props
Prop
Description
Type
Default
title*
The title shown above the item.
string
-
icon
An icon to illustrate the value of the item.
​Image.ImageLike​
-
text
The text value of the item.
string
-
Detail.Metadata.Link
An item to display a link.
Detail-metadata-link illustration
Example
1
import { Detail } from "@raycast/api";
2
​
3
export default function Main() {
4
  return (
5
    <Detail
6
      markdown={markdown}
7
      navigationTitle="Pikachu"
8
      metadata={
9
        <Detail.Metadata>
10
          <Detail.Metadata.Link
11
            title="Evolution"
12
            target="https://www.pokemon.com/us/pokedex/pikachu"
13
            text="Raichu"
14
          />
15
        </Detail.Metadata>
16
      }
17
    />
18
  );
19
}
Copied!
Props
Prop
Description
Type
Default
target*
The target of the link.
string
-
text*
The text value of the item.
string
-
title*
The title shown above the item.
string
-
Detail.Metadata.TagList
A list of Tags displayed in a row.
Detail-metadata-taglist illustration
Example
1
import { Detail } from "@raycast/api";
2
​
3
export default function Main() {
4
  return (
5
    <Detail
6
      markdown={markdown}
7
      navigationTitle="Pikachu"
8
      metadata={
9
        <Detail.Metadata>
10
          <Detail.Metadata.TagList title="Type">
11
            <Detail.Metadata.TagList.Item text="Electric" color={"#eed535"} />
12
          </Detail.Metadata.TagList>
13
        </Detail.Metadata>
14
      }
15
    />
16
  );
17
}
Copied!
Props
Prop
Description
Type
Default
children*
The tags contained in the TagList.
React.ReactNode
-
title*
The title shown above the item.
string
-
Detail.Metadata.TagList.Item
A Tag in a Detail.Metadata.TagList.
Props
Prop
Description
Type
Default
text*
The text of the tag.
string
-
color
Changes the text color to the provided color and sets a transparent background with the same color.
​Color.ColorLike​
-
icon
An optional icon in front of the text of the tag.
​Image.ImageLike​
-
Detail.Metadata.Separator
A metadata item that shows a separator line. Use it for grouping and visually separating metadata items.
1
import { Detail } from "@raycast/api";
2
​
3
export default function Main() {
4
  return (
5
    <Detail
6
      markdown={markdown}
7
      navigationTitle="Pikachu"
8
      metadata={
9
        <Detail.Metadata>
10
          <Detail.Metadata.Label title="Height" text={`1' 04"`} />
11
          <Detail.Metadata.Separator />
12
          <Detail.Metadata.Label title="Weight" text="13.2 lbs" />
13
        </Detail.Metadata>
14
      }
15
    />
16
  );
17
}
Copied!