Using Components

Interactive Components

Standard text is great, but sometimes you need more. We have built-in components for better layout, navigation, and visualization.

New Content Components

1. Steps

Perfect for “How-to” guides. Automatically numbers your H3 or H4 headings and connects them with a line.

import Steps from '../../../../components/content/Steps.astro';

<Steps>

### Step 1: Open the menu
Click the button...

### Step 2: Select option
Choose the third item...

</Steps>

Preview:

Step 1: Open the menu

Click the button…

Step 2: Select option

Choose the third item…

2. Link Cards

Better than plain links for navigation hubs.

import LinkCard from '../../../../../../components/content/LinkCard.astro';

<LinkCard
  title="Go to Google Drive"
  description="Access our shared file repository."
  href="https://drive.google.com"
/>

Preview:

Go to Google Drive →

Access our shared file repository.

Built-in Starlight Components

3. Tabs

Organize content into switchable tabs.

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Windows">Press Ctrl + C</TabItem>
  <TabItem label="Mac">Press Cmd + C</TabItem>
</Tabs>

Preview:

Windows

Press Ctrl + C

Mac

Press Cmd + C

4. File Tree

Show project structures clearly.

import { FileTree } from '@astrojs/starlight/components';

<FileTree>
- src/
  - components/
  - pages/
- package.json
</FileTree>

Preview:

• Directorysrc/

  • Directorycomponents/

    • …
  • Directorypages/

    • …
• package.json

5. Card Grids

Group multiple cards together.

import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
  <Card title="Feature A" icon="star">Details here...</Card>
  <Card title="Feature B" icon="moon">Details here...</Card>
</CardGrid>

Preview:

Feature A

Details here…

Feature B

Details here…

Existing Custom Components

• Google Drive Folders: Display live folders.
• Videos & Playlists: Embed training videos.
• Diagrams: Create flowcharts with code.

How to use them

You must use a .mdx file extension (not .md) to use components.

1. Import the component at the top of your file (under the frontmatter).
2. Use the tag where you want it to appear.

---
title: "My Page"
---

import Steps from '../../../../components/content/Steps.astro';

# My Page
Follow these steps:

<Steps>
...
</Steps>