Component library

A living showcase of every component available when authoring .mdx content here — the built-ins that ship with Starlight plus the ZajLibrary add-ons. Treat this page as a regression checklist: after editing tokens.css or theme.css, skim it to confirm nothing broke.

Cards & card grids

Cards group related entry points. A <CardGrid> lays them out responsively (one column on mobile, multiple on wide screens).

Playbooks

End-to-end flows like the CodeCanyon Laravel pipeline.

AI System

The agent operating system: constitution, rules, hooks, skills.

Templates

Copy-paste kits with seed.sh scaffolding.

Knowledge

Handbooks, guides, and durable reference.

Link cards & buttons

<LinkCard> is a whole-card link for navigation; <LinkButton> is an inline call-to-action.

Final Laravel CodeCanyon ZIP → production, as a phased flow.

AI System Set up the agent OS the rest of the work runs on.

Browse playbooks All resources

Asides (callouts)

The four built-in variants:

Note

A neutral note for context.

Custom title

Tips get a custom title here.

Caution

Caution — double-check before proceeding.

Danger

Danger — destructive or irreversible.

Custom blocks (ZajLibrary add-on)

Two extra callouts via starlight-markdown-blocks, using the same ::: directive syntax:

💡Idea

Surface a design idea or alternative approach worth considering.

⚖️Decision

Record a decision and its rationale so future readers know why, not just what.

Badges

Inline status markers in every size and variant.

Default Note Success Tip Caution Danger

Small Medium Large

Steps

<Steps> turns an ordered list into a numbered, connected sequence — ideal for setup flows.

1. Install the dependency.

   npm

   npm i starlight-tags

   pnpm

   pnpm add starlight-tags

   yarn

   yarn add starlight-tags

2. Wire it into astro.config.mjs plugins.

3. Build to confirm green.

   npm

   npm run build

   pnpm

   pnpm run build

   yarn

   yarn run build

Package-manager tabs (ZajLibrary add-on)

<PackageManagers> renders synced tabs across npm/pnpm/yarn/bun — switching one switches all on the page.

npm

npm create astro@latest -- -- --template starlight

pnpm

pnpm create astro@latest -- --template starlight

yarn

yarn create astro -- --template starlight

Tabs

Generic synced tabs (the syncKey keeps them aligned across the page).

Local

Run npm run dev on :4321.

Preview

Run npm run preview to serve dist/.

Production

Deployed on Vercel.

File tree

<FileTree> visualizes directory structure — used heavily in the AI System kit docs.

• astro.config.mjs
• Directorysrc

  • Directorycomponents

    • Header.astro
    • Stepper.astro
  • Directorycontent

    • Directorydocs

      • Directoryresources

        • component-library.mdx the page you’re reading
  • Directorystyles

    • tokens.css single source of truth for the palette
    • theme.css

Code

The <Code> component renders syntax-highlighted code from a prop (handy for generated/dynamic snippets).

astro.config.mjs

export default {
  title: 'ZajLibrary',
};

Icons

Inline <Icon> from Starlight’s built-in set.

Tags (ZajLibrary add-on)

This page declares tags: [components, reference, authoring] in its frontmatter. With starlight-tags, each tag gets its own generated page (e.g. /tags/reference/) listing every doc that shares it — turning the library’s tags field into real cross-cutting navigation.