Utility Blocks

Supporting components that enhance user experience: reading progress, social sharing, table of contents, related content suggestions, and loading states.

Scroll Progress

Reading progress indicator that shows how far the user has scrolled through the page. Check the colored bar at the top of this page!

Live Demo

The scroll progress bar is currently active at the top of this page. As you scroll down, you'll see it fill from left to right indicating your progress through the content.

  • ✓ Position: top or bottom
  • ✓ Customizable height and color
  • ✓ Smooth animation
  • ✓ Lightweight implementation
<ScrollProgress position="top" height="4px" />

Share Buttons

Privacy-first social sharing buttons with no tracking scripts. Component: ShareButtons.astro

Horizontal Layout (with labels)

Horizontal Layout (icons only)

Vertical Layout

Features: Multiple platforms, native share API on mobile, no tracking, copy to clipboard

Table of Contents

Auto-generated navigation from page headings. The TOC on the left is live!

Key Features

The Table of Contents component automatically extracts headings from your content and creates a clickable navigation menu with active section highlighting.

Automatic Generation

No manual configuration needed - the component finds all headings in the specified content area and builds the navigation structure automatically.

Scroll Tracking

As users scroll, the current section is highlighted in the table of contents, helping them understand where they are in the document.

Usage Examples

Perfect for:

  • Documentation pages
  • Long blog posts and articles
  • User guides and tutorials
  • Legal documents and policies

Configuration

Customize the selector to target your content area, set the maximum heading level to include, and enable sticky positioning to keep the TOC visible while scrolling.

Related Content

Suggest related articles to keep users engaged. Here's a live example:

You Might Also Like

Loading States

Skeleton screens for async content that reduce perceived wait time and improve UX.

Text Loading

Loading...

Card Loading

Loading...

List Loading

Loading...

Profile Loading

Loading...

💡 Implementation Notes

Scroll Progress: Add to your layout for global progress tracking, or to specific pages for content-specific indicators.

Share Buttons: Privacy-first design uses direct API URLs without tracking scripts. Native share API works automatically on mobile devices.

Table of Contents: Specify a CSS selector to target your content area. The component automatically finds headings and builds navigation.

Related Content: Can be populated dynamically from your content collections or CMS. Supports grid and list layouts.

Loading States: Use while fetching data to improve perceived performance. Supports multiple patterns: text, cards, lists, profiles, and custom layouts.