Skip to content
Starlight Showcases

Text

The <ShowcaseText> component can be used to showcase text entries which link to their respective pages.

Import

import { ShowcaseText } from 'starlight-showcases'

Usage

Specify a list of text entries to display using the entries prop. Each entry should at least specify a title and link to the respective page while an optional description can be provided.

src/content/docs/showcase.mdx
import { ShowcaseText } from 'starlight-showcases'


<ShowcaseText
  entries={[
    {
      href: 'https://github.com/HiDeoo/starlight-links-validator',
      title: 'starlight-links-validator',
      description: 'Check for broken links in your Starlight pages.',
    },
    {
      href: 'https://github.com/HiDeoo/starlight-typedoc',
      title: 'starlight-typedoc',
      description: 'Generate Starlight pages from TypeScript using TypeDoc.',
    },
  ]}
/>

The above code generates the following on the page:

starlight-links-validator Check for broken links in your Starlight pages.
starlight-typedoc Generate Starlight pages from TypeScript using TypeDoc.

Props

The <ShowcaseText> component accepts the following props:

entries

required
type: ShowcaseTextCardProps[]

The list of text entries to display. See the Usage section for an example and the entry definition for more details.

Entry

Each text entry should be an object with the following properties:

href

required
type: string

The link to the page the text entry refers to.

title

required
type: string

A title for the text entry.

description

type: string

An optional description for the text entry.