Components System

Modular Block Components

Themes are built using modular, reusable components that can be mixed and matched across pages. Each block component can be easily imported and customized.

Data-Driven Components

For sections like cards, pricing tables, or feature lists, components accept data arrays while preserving customization options:

const included = [
  {
    title: "No subscription required",
    description: "One-time purchase with lifetime access to updates.",
  },
  {
    title: "Full source code",
    description: "Complete access to all theme files and components.",
  },
  // More items...
];

<ul
  class="pt-6 mt-6 border-t grid grid-cols-1 gap-4 lg:gap-12 border-base-50 lg:grid-cols-3"
>
  {included.map((item) => (
  <li class="space-y-2">
    <h3 class="font-medium text-base-900">{item.title}</h3>
    <p class="text-base-600 text-sm">{item.description}</p>
  </li>
  ))}
</ul>

Core Components

All themes include a set of flexible, reusable components that maintain consistent styling while allowing customization. The specific styling may vary between themes, but the core functionality remains the same.

Button Component

The button component adapts to render either <button> or <a> elements based on usage:

<!-- Basic button usage -->
<Button variant="accent" size="lg">
  Get Started
</Button>
<!-- Button with icons -->
<Button variant="default" size="base" gap="sm">
  <Icon name="arrow-left" slot="left-icon" />
  Back to Home
  <Icon name="external-link" slot="right-icon" />
</Button>
<!-- Icon-only button -->
<Button variant="muted" size="sm" iconOnly={true}>
  <Icon name="menu" slot="icon" />
</Button>

Common Props (specific variants may differ between themes):

• variant: default, accent, muted, alternative, none
• size: xxs, xs, sm, base, md, lg, xl
• gap: xs, sm, base, md, lg
• iconOnly: Boolean for icon-only buttons
• isLink: Boolean to render as <a> tag instead of <button>

Link Component

Some themes are using the link styling separate from buttons, the Link component provides consistent link-specific styling and behavior, but most of the times it has the same styles as the button:

<!-- Standard link button -->
<Link href="/about" variant="accent" size="base">
  Learn More
</Link>
<!-- Unstyled text link -->
<Link href="/contact" variant="link" class="underline hover:no-underline">
  Contact Us
</Link>
<!-- Link with icons -->
<Link href="/download" variant="default" size="lg" gap="sm">
  <Icon name="download" slot="left-icon" />
  Download Now
  <Icon name="external-link" slot="right-icon" />
</Link>
<!-- Custom styled link -->
<Link href="/pricing" variant="muted" size="md" class="shadow-lg">
  View Pricing
</Link>

Link-Specific Props:

• href: URL destination (required)
• variant: default, accent, muted, link (unstyled text link)
• size: xs, sm, base, md, lg, xl (not applied to variant="link")
• gap: xs, sm, base, md, lg for icon spacing
• class: Additional CSS classes
• Standard HTML anchor attributes: target, rel, title, etc.

Variant Behavior:

• default: Black background with white text, hover effects
• accent: Teal/accent color background with white text
• muted: White background with black text
• link: Unstyled text link (only applies custom classes, no button styling)

Note: Some themes use this dedicated Link component instead of the Button component’s isLink prop for better separation of concerns between interactive buttons and navigation links.

Text Component

A flexible text component for consistent typography across your site:

<!-- Heading with display variant -->
<Text tag="h1" variant="display2XL" class="font-bold text-center">
  Welcome to Our Site
</Text>
<!-- Paragraph with custom styling -->
<Text tag="p" variant="textLG" class="text-gray-600">
  This is a large paragraph with custom color.
</Text>
<!-- Link text -->
<Text tag="a" href="/about" variant="textBase" class="hover:underline">
  Learn more about us
</Text>
<!-- Text with icons -->
<Text tag="span" variant="textSM" class="flex items-center gap-2">
  <Icon name="check" slot="left-icon" />
  Verified Account
  <Icon name="star" slot="right-icon" />
</Text>

Text Variants (responsive by default):

• Display Sizes: display6XL, display5XL, display4XL, display3XL, display2XL, displayXL, displayLG, displayMD, displaySM, displayXS
• Text Sizes: textXL, textLG, textBase, textSM, textXS Text Props:
• tag: h1, h2, h3, h4, h5, h6, p, span, a, em, strong, small, blockquote
• variant: Typography scale variant
• href: For anchor tags
• target, rel, title: Standard HTML attributes

Share Buttons Component

Social sharing functionality with platform-specific handling:

<!-- Basic sharing (uses current page) -->
<ShareButtons />
<!-- Custom sharing content -->
<ShareButtons
  url="https://example.com/article"
  title="Amazing Article Title"
  description="Brief description of the content"
  contentType="blog"
/>
<!-- Generic content sharing -->
<ShareButtons
  url={Astro.url.href}
  title={frontmatter.title}
  contentType="generic"
/>

ShareButtons Props:

• url: Custom URL (defaults to current page)
• title: Custom title (defaults to page title)
• description: Additional description for sharing
• contentType: blog or generic (affects share text format) Supported Platforms:
• X (Twitter): Includes title and description in tweet
• Facebook: Direct URL sharing
• LinkedIn: Professional network sharing
• Copy Link: Clipboard functionality with visual feedback

Wrapper Component

This wrapper component provides flexible container styling for your content, allowing you to control padding and apply prose-specific styles. It’s designed to ensure consistent layout across different screen sizes and for various content types.

---
interface Props {
  variant?: "standard" | "paddinglessDesktop" | "prose";
  class?: string;
  id?: string;
}
const { variant = "standard", class: extraClass = "" } = Astro.props;
const variantClasses = {
  standard: " 2xl:px-12 w-full px-8   overflow-hidden xl:overflow-visible",
  paddinglessDesktop:
    "mx-auto max-w-6xl px-4 xl:px-0  overflow-hidden xl:overflow-visible",
  prose:
    "prose text-base-400 prose-blockquote:border-l-accent prose-a:border-white prose-a:border-b prose-a:no-underline prose-a:text-white   prose-a:transition-colors prose-a:duration-200 prose-a:hover:border-solid   prose-a:hover:text-accent-500 prose-headings:font-medium prose-headings:text-white prose-pre:border prose-li:marker:text-accent-400  max-w-none  prose-pre:rounded-xl w-full prose-blockquote:text-base-500  prose-pre:border-base-300 prose-ul:[list-style-type:'///'] prose-pre:scrollbar-hide prose-tr:border-base-800 prose-thead:border-base-800 prose-strong:text-white",
};
const classes = `${variantClasses[variant]} ${extraClass}`.trim();
---
<div class={classes}>
  <slot />
</div>

Usage:

---
import Wrapper from '../components/Wrapper.astro';
---
<Wrapper variant="standard">
  <h1>My Page Title</h1>
  <p>This content is wrapped with standard padding.</p>
</Wrapper>
<Wrapper variant="prose" class="my-custom-class">
  <article>
    <h2>Blog Post Content</h2>
    <p>This content will have prose-specific styling.</p>
    <blockquote>A blockquote example.</blockquote>
  </article>
</Wrapper>

Props:

• variant: Styling preset - "standard", "paddinglessDesktop", or "prose"
• class: Additional CSS classes
• id: ID for the wrapper div

Icon Component

This component provides a flexible way to include SVG icons in your Astro project:

---
const { variant, size, class: className, ...rest } = Astro.props;
const xs = ["size-3"];
const sm = ["size-4"];
const base = ["size-5"];
const md = ["size-6"];
const lg = ["size-7"];
const xl = ["size-8"];
---
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class:list={[
    "icon",
    "icon-tabler",
    "icons-tabler-outline",
    "icon-tabler-accessibility",
    size === "xs" && xs,
    size === "sm" && sm,
    size === "base" && base,
    size === "md" && md,
    size === "lg" && lg,
    size === "xl" && xl,
    className,
  ]}
  {...rest}
>
  <!-- SVG paths here -->
</svg>

Props:

• size: "xs", "sm", "base", "md", "lg", or "xl"
• class: Additional CSS classes
• ...rest: Standard HTML attributes for SVG elements

Universal Component Patterns

Slot System

All components use Astro’s slot system for flexible content:

<!-- Standard content slot -->
<Button>Click Me</Button>
<Link href="/page">Navigate Here</Link>
<!-- Named slots for icons -->
<Button>
  <Icon name="star" slot="left-icon" />
  Rate This
  <Icon name="arrow-right" slot="right-icon" />
</Button>
<Link href="/download" gap="sm">
  <Icon name="download" slot="left-icon" />
  Download
  <Icon name="external-link" slot="right-icon" />
</Link>
<!-- Icon-only with dedicated slot -->
<Button iconOnly={true}>
  <Icon name="menu" slot="icon" />
</Button>

Style Customization

Components accept additional classes while preserving base functionality:

<!-- Add custom classes -->
<Link href="/custom" class="shadow-lg border-2 border-blue-500" variant="accent">
  Custom Styled Link
</Link>
<!-- Override with variant="link" for minimal styling -->
<Link href="/minimal" variant="link" class="text-blue-600 hover:underline">
  Simple Text Link
</Link>

Theme Variations

While component APIs remain consistent, visual styles vary between themes:

• Minimal themes: Clean, simple styling with subtle hover effects
• Bold themes: Vibrant colors, pronounced shadows, animated interactions
• Corporate themes: Professional styling with conservative color palettes
• Creative themes: Unique styling with custom animations and effects

  Note: Always check your specific theme’s README for any unique component variations or additional props available. Some themes may use the Link component instead of Button’s isLink prop for better separation between buttons and navigation links.