Raycast API
Community
Search
⌃K
Links

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

Render a markdown string
Render an image from the assets directory
import { Detail } from "@raycast/api";
​
export default function Command() {
return <Detail markdown="**Hello** _World_!" />;
}
import { Detail } from "@raycast/api";
​
export default function Command() {
return <Detail markdown={`![Image Title](example.png)`} />;
}

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

import { Detail } from "@raycast/api";
​
// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu
​
![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)
​
Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;
​
export default function Main() {
return (
<Detail
markdown={markdown}
navigationTitle="Pikachu"
metadata={
<Detail.Metadata>
<Detail.Metadata.Label title="Height" text={`1' 04"`} />
<Detail.Metadata.Label title="Weight" text="13.2 lbs" />
<Detail.Metadata.TagList title="Type">
<Detail.Metadata.TagList.Item text="Electric" color={"#eed535"} />
</Detail.Metadata.TagList>
<Detail.Metadata.Separator />
<Detail.Metadata.Link title="Evolution" target="https://www.pokemon.com/us/pokedex/pikachu" text="Raichu" />
</Detail.Metadata>
}
/>
);
}

Props

Prop
Description
Type
Default
children*
The elements of the Metadata view.
React.ReactNode
-

Detail.Metadata.Label

A single value with an optional icon.
Detail-metadata-label illustration

Example

import { Detail } from "@raycast/api";
​
// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu
​
![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)
​
Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;
​
export default function Main() {
return (
<Detail
markdown={markdown}
navigationTitle="Pikachu"
metadata={
<Detail.Metadata>
<Detail.Metadata.Label title="Height" text={`1' 04"`} icon="weight.svg" />
</Detail.Metadata>
}
/>
);
}

Props

Prop
Description
Type
Default
title*
The title of the item.
string
-
icon
An icon to illustrate the value of the item.
-
text
The text value of the item. Specifying color will display the text in the provided color. Defaults to Color.SecondaryText.
string or { color: Color; value: string }
-
An item to display a link.
Detail-metadata-link illustration

Example

import { Detail } from "@raycast/api";
​
// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu
​
![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)
​
Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;
​
export default function Main() {
return (
<Detail
markdown={markdown}
navigationTitle="Pikachu"
metadata={
<Detail.Metadata>
<Detail.Metadata.Link title="Evolution" target="https://www.pokemon.com/us/pokedex/pikachu" text="Raichu" />
</Detail.Metadata>
}
/>
);
}

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

import { Detail } from "@raycast/api";
​
// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu
​
![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)
​
Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;
​
export default function Main() {
return (
<Detail
markdown={markdown}
navigationTitle="Pikachu"
metadata={
<Detail.Metadata>
<Detail.Metadata.TagList title="Type">
<Detail.Metadata.TagList.Item text="Electric" color={"#eed535"} />
</Detail.Metadata.TagList>
</Detail.Metadata>
}
/>
);
}

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.
-
icon
An optional icon in front of the text of the tag.
-
onAction
Callback that is triggered when the item is clicked.
() => void
-

Detail.Metadata.Separator

A metadata item that shows a separator line. Use it for grouping and visually separating metadata items.
import { Detail } from "@raycast/api";
​
// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu
​
![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)
​
Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;
​
export default function Main() {
return (
<Detail
markdown={markdown}
navigationTitle="Pikachu"
metadata={
<Detail.Metadata>
<Detail.Metadata.Label title="Height" text={`1' 04"`} />
<Detail.Metadata.Separator />
<Detail.Metadata.Label title="Weight" text="13.2 lbs" />
</Detail.Metadata>
}
/>
);
}
Previous
Actions
Next
Form
Last modified 1d ago