Check this out
Components
Components let you easily reuse a piece of UI or styling consistently. Examples might include a link card or a YouTube embed. Starlight supports the use of components in MDX files and provides some common components for you to use.
Learn more about building components in the Astro Docs.
Using a component
You can use a component by importing it into your MDX file and then rendering it as a JSX tag.
These look like HTML tags but start with an uppercase letter matching the name in your import
statement:
---
# src/content/docs/index.mdx
title: Welcome to my docs
---
import SomeComponent from '../../components/SomeComponent.astro';
import AnotherComponent from '../../components/AnotherComponent.astro';
<SomeComponent prop="something" />
<AnotherComponent>
Components can also contain **nested content**.
</AnotherComponent>
Because Starlight is powered by Astro, you can add support for components built with any supported UI framework (React, Preact, Svelte, Vue, Solid, Lit, and Alpine) in your MDX files. Learn more about using components in MDX in the Astro docs.
Built-in components
Starlight provides some built-in components for common documentation use cases.
These components are available from the @astrojs/starlight/components
package.
Tabs
You can display a tabbed interface using the <Tabs>
and <TabItem>
components.
Each <TabItem>
must have a label
to display to users.
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs>
<TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
<TabItem label="Moons">Io, Europa, Ganymede</TabItem>
</Tabs>
The code above generates the following tabs on the page:
Cards
You can display content in a box matching Starlight’s styles using the <Card>
component.
Wrap multiple cards in the <CardGrid>
component to display cards side-by-side when there’s enough space.
A <Card>
requires a title
and can optionally include an icon
attribute set to the name of one of Starlight’s built-in icons.
import { Card, CardGrid } from '@astrojs/starlight/components';
<Card title="Check this out">Interesting content you want to highlight.</Card>
<CardGrid>
<Card title="Stars" icon="star">
Sirius, Vega, Betelgeuse
</Card>
<Card title="Moons" icon="moon">
Io, Europa, Ganymede
</Card>
</CardGrid>
The code above generates the following on the page:
Stars
Sirius, Vega, Betelgeuse
Moons
Io, Europa, Ganymede