Skip to content
Site Theme

Components

The theme ships 17 Astro components across five categories: layout shells, content sections, marketing blocks, portfolio, and documentation. Import them individually from the package.

Layout

Section titled “Layout”

BaseLayout

Section titled “BaseLayout”

Full page shell with a sticky header (logo badge, nav links, GitHub / package buttons) and footer. Wrap all your page content inside this component. Extra <head> tags go in the named head slot.

---
import BaseLayout from '@mcptoolshop/site-theme/components/BaseLayout.astro';
---
<BaseLayout title="My Tool" description="..." logoBadge="MT" brandName="my-tool" repoUrl="..." packageUrl="https://pypi.org/project/my-tool/" footerText="MIT">
  <Fragment slot="head">
    <meta property="og:image" content={ogImage} />
  </Fragment>
  <!-- page content -->
</BaseLayout>

Props

Section titled “Props”
Prop Type Required Description
title string yes Page <title>
description string yes Meta description
logoBadge string yes 1-2 character badge (e.g. "RS")
brandName string yes Name displayed in header
nav { href, label }[] no Anchor nav links (defaults to [])
repoUrl string yes GitHub repo URL
packageUrl string no Primary registry listing (npm, PyPI, crates.io, …)
packageLabel string no Optional label override
npmUrl string no Deprecated alias for packageUrl
footerText string yes Footer text (HTML allowed)

DocLayout

Section titled “DocLayout”

Two-column layout with a collapsible sidebar on mobile and a sticky sidebar on desktop. Used by the docs template.

---
import DocLayout from '@mcptoolshop/site-theme/components/DocLayout.astro';
---
<DocLayout sidebar={sidebarGroups} currentPath={Astro.url.pathname}>
  <!-- main content -->
</DocLayout>

Props

Section titled “Props”
Prop Type Required Description
sidebar SidebarGroup[] yes Navigation groups for the sidebar
currentPath string yes Current page path for active link highlighting

Content Sections

Section titled “Content Sections”

Hero

Section titled “Hero”

Gradient hero section with a status badge, large headline, call-to-action buttons, and optional code preview cards.

Props

Section titled “Props”
Prop Type Required Description
badge string yes Status badge text
headline string yes Main headline
headlineAccent string yes Muted suffix after headline
description string yes Description (HTML allowed)
primaryCta { href, label } yes Primary button
secondaryCta { href, label } yes Secondary button
previews { label, code }[] no Code preview cards

Section

Section titled “Section”

Anchor section wrapper with a heading and optional subtitle. Content goes in the default slot.

Props

Section titled “Props”
Prop Type Required Description
id string yes Anchor ID for navigation
title string yes Section heading
subtitle string no Text below the heading

FeatureGrid

Section titled “FeatureGrid”

Three-column responsive card grid. Each card displays a bold title and a short description.

Props

Section titled “Props”
Prop Type Required Description
features { title, desc }[] yes Array of features

DataTable

Section titled “DataTable”

Grid-based bordered table. The first cell in each row is styled as a row header.

Props

Section titled “Props”
Prop Type Required Description
columns string[] yes Column headers
rows string[][] yes Row data

CodeCardGrid

Section titled “CodeCardGrid”

Two-column grid of dark code block cards. Each card has a title and a code snippet.

Props

Section titled “Props”
Prop Type Required Description
cards { title, code }[] yes Array of code cards

ApiList

Section titled “ApiList”

Full-width stacked API reference cards. Each card displays a monospace signature with a description below.

Props

Section titled “Props”
Prop Type Required Description
apis { signature, description }[] yes Array of API entries

ContentSection

Section titled “ContentSection”

Anchor-linked content block that renders HTML content via Astro’s set:html directive. Used by the docs template for rich content sections.

Props

Section titled “Props”
Prop Type Required Description
id string yes Anchor ID for navigation
title string yes Section heading (linkable)
content string yes HTML content (rendered via set:html)

Marketing

Section titled “Marketing”

SocialProof

Section titled “SocialProof”

Stats bar with an optional headline and value/label pairs. Used by the product template for trust signals.

Props

Section titled “Props”
Prop Type Required Description
headline string no Text above the stats
stats { value, label }[] no Array of stat entries

PricingGrid

Section titled “PricingGrid”

Responsive pricing tier cards. One tier can be marked as highlighted to show a “Popular” badge. Used by the product template.

Props

Section titled “Props”
Prop Type Required Description
tiers PricingTier[] no Array of pricing tiers

PricingTier shape:

Field Type Required Description
name string yes Tier name (e.g. “Free”, “Pro”)
price string yes Price display (e.g. “$0”, “$29/mo”)
description string yes Short description
features string[] yes Feature list items
cta { href, label } yes Call-to-action button
highlighted boolean no Show “Popular” badge if true

TestimonialGrid

Section titled “TestimonialGrid”

Two-column grid of quote cards with author info. Falls back to initials when no avatar URL is provided.

Props

Section titled “Props”
Prop Type Required Description
testimonials TestimonialDef[] no Array of testimonial entries

TestimonialDef shape:

Field Type Required Description
quote string yes The testimonial text
author string yes Author name
role string yes Author role or title
avatarUrl string no Avatar image URL

CtaBanner

Section titled “CtaBanner”

Full-width gradient call-to-action banner with headline, optional description, and a button.

Props

Section titled “Props”
Prop Type Required Description
headline string yes Banner headline
description string no Text below the headline
cta { href, label } yes Call-to-action button

Portfolio

Section titled “Portfolio”

FilterBar

Section titled “FilterBar”

Client-side search and tag filtering bar. Works with PortfolioGrid — filters elements matching [data-portfolio-card] by reading data-tags and data-search-text attributes.

Props

Section titled “Props”
Prop Type Required Description
tags string[] yes Available tags for filter buttons
searchable boolean no Show text search input (default: true)
searchPlaceholder string no Search input placeholder text

PortfolioGrid

Section titled “PortfolioGrid”

Configurable card grid for collections of any content type. Supports category grouping, status badges, images or badge fallbacks, tags, metadata, and secondary action links.

Props

Section titled “Props”
Prop Type Required Description
items PortfolioItem[] yes Array of items to display
columns 2 | 3 | 4 no Grid columns on large screens (default: 3)
groupByCategory boolean no Group items under category headings (default: false)

PortfolioItem shape:

Field Type Required Description
title string yes Display title
description string yes Short description
href string yes Primary link (card click target)
image string no Card thumbnail URL
badge string no 1-2 char fallback when no image
tags string[] no Tags for filtering
category string no Category for grouping
status string no Status label (stable, beta, new, archived)
meta string no Secondary metadata line
secondaryAction { href, label } no Secondary action link

Documentation

Section titled “Documentation”
Section titled “Sidebar”

Grouped navigation list with active-link highlighting. Used inside DocLayout.

Props

Section titled “Props”
Prop Type Required Description
groups SidebarGroup[] yes Navigation groups with title and items
currentPath string no Current page path for active highlighting

SidebarGroup shape: { title: string, items: { label: string, href: string }[] }

TableOfContents

Section titled “TableOfContents”

On-page heading navigation. Renders a bordered list of heading links indented by depth.

Props

Section titled “Props”
Prop Type Required Description
headings { text, id, depth: 2 | 3 }[] no Array of page headings for TOC