Components

Aside

Asides highlight secondary information alongside the main content.

Import:

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

Default

Syntax:

<Aside>Some content in an aside.</Aside>

Result:

Caution

Syntax:

<Aside type="caution">Some cautionary content.</Aside>

Result:

Tip

Syntax:

<Aside type="tip">

Other content is also supported in asides.

```js
// A code snippet, for example.
```

</Aside>

Result:

Danger

Syntax:

<Aside type="danger">Do not give your password to anyone.</Aside>

Result:

Badge

Inline labels for status, categories, or callouts.

Import:

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

New

Syntax:

<Badge text="New" variant="note" />

Result:

New

Deprecated

Syntax:

<Badge text="Deprecated" variant="danger" />

Result:

Deprecated

Success

Syntax:

<Badge text="Success" variant="success" />

Result:

Success

Tip

Syntax:

<Badge text="Tip" variant="tip" />

Result:

Tip

Caution

Syntax:

<Badge text="Caution" variant="caution" />

Result:

Caution

Sizes

Small

Syntax:

<Badge text="New" size="small" />

Result:

New

Small

Syntax:

<Badge text="Medium" size="medium" />

Result:

Medium

Small

Syntax:

<Badge text="Large" size="large" />

Result:

Large

Card

A bordered container for a titled block of content.

Import:

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

Single card

Syntax:

<Card title="Single Card">
  Content goes here.
</Card>

Result:

Single Card

Content goes here.

CardGrid

Lays out multiple cards in a responsive grid.

Import:

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

Card grid

Syntax:

<CardGrid>
  <Card title="Card 1">First card</Card>
  <Card title="Card 2">Second card</Card>
</CardGrid>

Result:

Card 1

First card

Card 2

Second card

Code

Renders a syntax-highlighted code block from a string prop.

Import:

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

Code block

Syntax:

<Code code="console.log('Hello');" lang="js" title="hello.js" />

Result:

console.log('Hello');

FileTree

Displays a directory structure with file and folder icons.

Import:

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

File tree

Syntax:

<FileTree>
- src/
  - content/
    - docs/
      - guides/
        - astrowiki.mdx
      - index.mdx
</FileTree>

Result:

Directorysrc/
- Directorycontent/
  - Directorydocs/
    Directoryguides/
    astrowiki.mdx
    index.mdx

Icon

Renders one of Starlight’s built-in icons.

Import:

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

Basic icon

Syntax:

<Icon name="open-book" />

Result:

Sized and colored icon

Syntax:

<Icon name="github" size="2rem" color="var(--sl-color-text-accent)" />

Result:

LinkButton

A prominent, button-styled call-to-action link.

Import:

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

Default

Syntax:

<LinkButton href="/guides/linux/fedora/">Fedora Guide</LinkButton>

Result:

Fedora Guide

Secondary variant

Syntax:

<LinkButton href="https://astro.build" variant="secondary">
  Astro Website
</LinkButton>

Result:

Astro Website

LinkCard

A card-styled link with a title and description.

Import:

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

Link card

Syntax:

<LinkCard
  title="Fedora Guide"
  description="Learn about Fedora Linux."
  href="/guides/linux/fedora/"
/>

Result:

Fedora Guide Learn about Fedora Linux.

Steps

Numbers and styles a sequence of ordered steps.

Import:

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

Numbered steps

Syntax:

<Steps>

1. Import the component into your MDX file:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Wrap `<Steps>` around your ordered list items.

</Steps>

Result:

Import the component into your MDX file:

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

Wrap <Steps> around your ordered list items.

Tabs

Groups related content into switchable tabs.

Import:

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

Basic tabs

Syntax:

<Tabs>
  <TabItem label="Fedora">sudo dnf install package</TabItem>
  <TabItem label="Arch">sudo pacman -S package</TabItem>
</Tabs>

Result:

Fedora
Arch

sudo dnf install package

Tabs with icons

Syntax:

<Tabs>
  <TabItem label="Stars" icon="star">
    Sirius, Vega, Betelgeuse
  </TabItem>
  <TabItem label="Moons" icon="moon">
    Io, Europa, Ganymede
  </TabItem>
</Tabs>

Result:

Stars
Moons

Sirius, Vega, Betelgeuse