Skip to content

Kitchen sink

This page includes a wide variety of different components to show how these look together when using this theme. See the following pages for examples of individual components.

Learn more about components in Starlight’s “Using components” guide.

Asides

Blockquotes

Be not afeard; the isle is full of noises,
Sounds and sweet airs, that give delight and hurt not.

Cards

Check this out

Interesting content you want to highlight.

Other feature

More information you want to share.

Computer stuff

Build internet things with your computation machine.

Starlight ready

Just add Starlight and this theme comes to life.

Badges

Note Success Tip Caution Danger

Different sizes

Small Medium Large

Code

With an editor frame

example.astro
---
// this is a code block example
---
<p>Code can include something dynamic: {Astro.props.variable}</p>
Or highlight important lines!
Including insertions or deletions.

Terminal commands

Terminal window
echo "Welcome, world!"

Basic

Code block without a frame:

// for example
console.log('Welcome, world!');

Labels

labeled-line-markers.jsx
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children && !active && (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

File tree

  • astro.config.mjs
  • package.json
  • Directorysrc
    • Directorycomponents
      • Header.astro
      • Title.astro
    • Directorypages/
Get started

Configuration Reference

Learn more

Steps

  1. Import the component into your MDX file:

    import { Steps } from '@astrojs/starlight/components';
  2. Wrap <Steps> around your ordered list items.

Tabs

Sirius, Vega, Betelgeuse

Details

Where and when is the Andromeda constellation most visible?

The Andromeda constellation is most visible in the night sky during the month of November at latitudes between +90° and −40°.

Tables

LeftCenteredRight
This is leftText is centeredAnd this is right-aligned
More textEven more textAnd even more to the right