Images

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

Import

import { ShowcaseImage } from 'starlight-showcases'

Usage

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

Images use Astro’s built-in optimized asset support and should be provided as dynamic imports with relative paths to the image file stored in your project src/ directory, e.g. src/assets/showcase/image.png.

src/content/docs/showcase.mdx

import { ShowcaseImage } from 'starlight-showcases'

<ShowcaseImage
  entries={[
    {
      thumbnail: import('../../../assets/demo/starlight-openapi.png'),
      href: 'https://github.com/HiDeoo/starlight-openapi',
      title: 'starlight-openapi',
    },
    {
      thumbnail: import('../../../assets/demo/starlight-obsidian.png'),
      href: 'https://github.com/HiDeoo/starlight-obsidian',
      title: 'starlight-obsidian',
    },
    {
      thumbnail: import('../../../assets/demo/starlight-image-zoom.png'),
      href: 'https://github.com/HiDeoo/starlight-image-zoom',
      title: 'starlight-image-zoom',
    },
  ]}
/>

Preview

starlight-openapi

starlight-obsidian

starlight-image-zoom

Props

The <ShowcaseImage> component accepts the following props:

entries

required
type: ShowcaseImageCardProps[]

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

Entry

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

thumbnail

required
type: Promise<ImageImport>

The image to display as a thumbnail. The image should be provided as a dynamic import using the relative path to the image file stored in your project src/ directory, e.g. import('../../assets/showcase/image.png').

href

required
type: string

The link to the page the image entry refers to.

title

required
type: string

A title for the image entry.

description

type: string

An optional description for the image entry.