Components

Nebari Starlight styles the standard Starlight component set and adds one layout helper, GuideCard, for the guides landing page. Everything else is imported from @astrojs/starlight/components and works in any .mdx page.

import { Card, CardGrid, Tabs, TabItem, Steps, FileTree, Badge, Aside }
  from '@astrojs/starlight/components';

Available components

Component	Purpose	Status
Card / CardGrid	Grid of titled, icon’d content blocks	Stable
LinkCard	A card that is itself a link	Stable
Tabs / TabItem	Tabbed panels, syncable via syncKey	Stable
Steps	Numbered, visually distinct procedures	Stable
FileTree	Annotated file/directory trees	Stable
Badge	Inline status pills	Stable
Aside	Callouts (also via :::note syntax)	Stable
LinkButton	Prominent call-to-action link	Stable
Icon	Built-in icon set	Stable
GuideCard	Guides-landing row (badge, read time, arrow)	Stable
GuideFilter	Category chips that filter a stack of cards	Stable

Badge variants

<Badge> takes a text and a variant:

• note — note
• tip — tip
• success — success
• caution — caution
• danger — danger
• default — default

It also accepts a size of small, medium, or large.

Aside variants

Asides render with Nebari’s feedback colors. Use the fenced syntax in Markdown or the <Aside> component in MDX:

Variant	Markdown	Use for
Note	:::note	Neutral context
Tip	:::tip	Shortcuts and recommendations
Caution	:::caution	Footguns and gotchas
Danger	:::danger	Destructive or irreversible acts

Card grids at a glance

Layout components

Card, CardGrid, and LinkCard structure landing pages and section overviews.

Content components

Tabs, Steps, and FileTree make procedures and structure scannable.

Search indexing

Every page on this site is indexed by Pagefind at build time — including this one, which carries the search probe token pagefind-probe-token that the end-to-end search test looks for. You don’t configure any of this; the theme ships search enabled.

Full docs

For prop-level detail on any component, see the upstream Starlight component reference. This theme changes their appearance, not their API.

Guide cards

GuideCard is the one extra component. Import it from the theme, not from Starlight. Wrap a stack in GuideFilter to get the category chips; it also supplies .nbr-guide-list, so the page drops breadcrumbs, the meta row, and the title hairline.

import GuideCard from '@nebari/starlight/components/GuideCard.astro';
import GuideFilter from '@nebari/starlight/components/GuideFilter.astro';

<GuideFilter categories={['Getting started', 'Authoring']}>
  <GuideCard
    title="Installation"
    href="/getting-started/installation/"
    description="Add the theme to a new or existing Starlight site."
    category="Getting started"
  />
</GuideFilter>

categories must match each card’s category prop. The read time is derived from the linked page, so it stays in step with the article’s own meta row; pass time to override it. See the guides landing for a working example, and the layout classes for the other landing contracts (.nbr-grid-3, .nbr-cols-2, .nbr-chip).