---
title: Getting Started
description: Learn how to add author showcase pages to your documentation with the Starlight Showcases component library.
---

A set of [Starlight](https://starlight.astro.build) components to author showcase pages for your documentation.

Different type of showcase items can be displayed, such as [text](/components/text/), [images](/components/images/), [YouTube videos](/components/youtube/), [Twitter posts](/components/twitter/), [quotes](/components/quotes/), and [profiles](/components/profiles/).

Check out the [demo](/demo/) for a preview of the components in action.

:::note[Credits]
Credits to [Chris Swithinbank (@delucis)](https://github.com/delucis/) for the original idea and implementation in the [Starlight documentation](https://starlight.astro.build/resources/showcase/) and also creating the [Astro Embed](https://astro-embed.netlify.app/) 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"](https://starlight.astro.build/getting-started) guide in the Starlight docs to create one.

## Installation

import { Steps } from '@astrojs/starlight/components'
import { PackageManagers } from '@hideoo/starlight-plugins-docs-components'

<Steps>

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

   <PackageManagers pkg="starlight-showcases" />

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

   ```mdx title="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](https://starlight.astro.build/getting-started/#start-the-development-server) to preview the components.

</Steps>

For more details and examples, see the components' documentation in the sidebar or the [demo](/demo/) page for a preview of all the components in action.
