Getting Started

A set of Starlight components to author showcase pages for your documentation.

Different type of showcase items can be displayed, such as text, images, YouTube videos, Twitter posts, quotes, and profiles.

Check out the demo for a preview of the components in action.

Credits

Credits to Chris Swithinbank (@delucis) for the original idea and implementation in the Starlight documentation and also creating the Astro Embed library used in this project.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

1. Install the Starlight Showcases component library using your favorite package manager:

   npm

   npm i starlight-showcases

   pnpm

   pnpm add starlight-showcases

   yarn

   yarn add starlight-showcases

   ni

   ni starlight-showcases

2. Use any of the components in your MDX files.

   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.',
       },
     ]}
   />

3. Start the development server to preview the components.

For more details and examples, see the components’ documentation in the sidebar or the demo page for a preview of all the components in action.