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

import { Detail } from "@raycast/api";

export default function Command() {
  return <Detail markdown="**Hello** _World_!" />;
}

Props

PropDescriptionTypeDefault

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

You can specify custom image dimensions by adding a raycast-width and raycast-height query string to the markdown image. For example: ![Image Title](example.png?raycast-width=250&raycast-height=250)

You can also specify a tint color to apply to an markdown image by adding a raycast-tint-color query string. For example: ![Image Title](example.png?raycast-tintColor=blue)

You can now render LaTeX in the markdown. We support the following delimiters:

  • Inline math: \(...\) and \begin{math}...\end{math}

  • Display math: \[...\], $$...$$ and \begin{equation}...\end{equation}

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.

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

PropDescriptionTypeDefault

children*

The elements of the Metadata view.

React.ReactNode

-

Detail.Metadata.Label

A single value with an optional icon.

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

PropDescriptionTypeDefault

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.

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

PropDescriptionTypeDefault

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.

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

PropDescriptionTypeDefault

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

PropDescriptionTypeDefault

color

Changes the text color to the provided color and sets a transparent background with the same color.

-

icon

The optional icon tag icon. Required if the tag has no text.

-

text

The optional tag text. Required if the tag has no icon.

string

-

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>
      }
    />
  );
}

Last updated