Starlight components

Components Showcase

David Morales

Jan 1, 2024

Link Cards

Usage

Display a link prominently using the LinkCard component. Each LinkCard requires a title and an href attribute.

Example page

Add a link description

Add a short description to a link card using the description attribute.

Example page This is a link card with a description.

Group link cards

Display multiple LinkCard components side-by-side when there is enough space by grouping them using the CardGrid component.

Example page

Another example page

Aside

Usage

Starlight provides a custom syntax for rendering asides in Markdown and MDX as an alternative to the Aside component.

Use custom titles

Override the default aside titles by using the title attribute.

Advanced uses

With folded content:

Used as a FAQ:

🙋 Can I use Nano Stores in `.astro` files or other server-side components?

Nano Stores can be imported, written to, and read from in server-side components, but we don’t recommend it! This is due to a few restrictions:

Writing to a store from a .astro file or non-hydrated component will not affect the value received by client-side components.
You cannot pass a Nano Store as a “prop” to client-side components.
You cannot subscribe to store changes from a .astro file, since Astro components do not re-render.

If you understand these restrictions and still find a use case, you can give Nano Stores a try! Just remember that Nano Stores are built for reactivity to changes on the client specifically.

🙋 How do Svelte stores compare to Nano Stores?

Nano Stores and Svelte stores are very similar! In fact, nanostores allow you to use the same $ shortcut for subscriptions that you might use with Svelte stores.

If you want to avoid third-party libraries, Svelte stores are a great cross-island communication tool on their own. Still, you might prefer Nano Stores if a) you like their add-ons for “objects” and async state, or b) you want to communicate between Svelte and other UI frameworks like Preact or Vue.

🙋 How do Solid signals compare to Nano Stores?

If you’ve used Solid for a while, you may have tried moving signals or stores outside of your components. This is a great way to share state between Solid islands! Try exporting signals from a shared file:

import { createSignal } from 'solid-js';

export const sharedCount = createSignal(0);

…and all components importing sharedCount will share the same state. Though this works well, you might prefer Nano Stores if a) you like their add-ons for “objects” and async state, or b) you want to communicate between Solid and other UI frameworks like Preact or Vue.

Link Buttons

Usage

Use the LinkButton component to display a visually distinct call-to-action link. A link button is useful for directing users to the most relevant or actionable content and is often used on landing pages.

Get started

Optionally, customize the appearance of the link button using the variant attribute, which can be set to primary (the default) or secondary.

Configuration Reference

Add icons to link buttons

Include an icon in a link button using the icon attribute set to the name of one of Starlight’s built-in icons.

The iconPlacement attribute can be used to place the icon before the text by setting it to start (defaults to end).

Starlight icons

Steps

Usage

Use the Steps component to style numbered lists of tasks. This is useful for more complex step-by-step guides where each step needs to be clearly highlighted.

Wrap Steps around a standard Markdown ordered list. All the usual Markdown syntax is applicable inside Steps.

First item
Second item
Third item

With embedded components

First item with a code snippet

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

Second item with an aside

This is a note!

Tabs

Usage

Display a tabbed interface using the Tabs and TabItem components. Each TabItem must have a label to display to users.

Stars
Moons

Sirius, Vega, Betelgeuse

Sync tabs

Keep multiple tab groups synchronized by adding the syncKey attribute.

All Tabs on a page with the same syncKey value will display the same active label. This allows your reader to choose once (e.g. their operating system or package manager), and see their choice persisted across page navigations.

To synchronize related tabs, add an identical syncKey property to each Tabs component and ensure that they all use the same TabItem labels:

Some stars:

Orion
Gemini

Bellatrix, Rigel, Betelgeuse

Some exoplanets:

Orion
Gemini

HD 34445 b, Gliese 179 b, Wasp-82 b

Add icons to tabs

Include an icon in a tab item using the icon attribute set to the name of one of Starlight’s built-in icons to display an icon next to the label.

Stars
Moons

Sirius, Vega, Betelgeuse