Leader

Leader is a free, MIT-licensed Astro theme that presents a maker's products and notes as a printed table of contents, with a hairline "leader rule" joining each product title on the left to its category on the right. It targets small-product makers who want a typeset shelf rather than a screenshot gallery.

What is Leader?

Leader is a static Astro theme for a maker's workshop site, built on Astro 7 with Tailwind CSS v4 and static output. It takes product and note entries from Astro content collections (typed with zod) and renders them as ruled rows: a product on the left, its category on the right, and a hairline leader rule between them. The same row component drives the home shelf, the notes list and the category pages. It is published by ondelva, with a free MIT edition and a paid Pro edition.

Key Features

• The leader rule — each row pairs a product title with its category, joined by a hairline that thickens into the category's colour and takes the title with it on hover.
• Four colour-coded categories — one accent per category runs from the index row through the product page to every note filed under it; nothing else on the page is coloured, so the right edge reads as a column of groups.
• No key images — the theme is set in type and rules and is complete without any screenshot or photograph.
• Minimal JavaScript — Astro 7 and Tailwind CSS v4 with static output; the only shipped script is the three-state theme switcher, backed by light-dark() tokens for light and dark mode.
• Full page set — home, work shelf, product page, paginated notes, note, category, about, contact, legal pages and 404, plus content collections seeded with eight sample products and twelve sample notes.
• SEO and feed plumbing — RSS feed, sitemap, robots.txt, canonical URLs, Open Graph, Twitter cards and JSON-LD.
• Optional integrations — an analytics slot (Plausible, GA4, Umami) and a contact form that posts to any static form service, both off until configured.
• Checked accessibility and performance — WCAG AA on every colour pair and Lighthouse 95+ across all four categories, verified in CI; AGENTS.md ships for Claude Code, Cursor and other agents.

What can you do with Leader?

• Indie makers: list a handful of small products as ruled rows, each linking to a product page and a category, without producing any artwork first.
• Writers shipping alongside products: file build notes under the same colour as the product they belong to, with pagination and a working RSS feed.
• Astro developers: start from a configured theme — src/config.ts is the single entry point for name, URL, author, navigation, social links, SEO defaults, categories, accents, pagination, contact endpoint and analytics — and restyle via CSS tokens in src/styles/theme.css.
• Static-host deployers: push the static build to Cloudflare, Vercel, Netlify or GitHub Pages, with one-click deploy buttons for the first three.

How does Leader work?

Run pnpm create astro@latest my-workshop -- --template ondelva/astro-theme-leader (Node.js 22.12+ and pnpm 9 or newer), then pnpm install and pnpm dev. The dev server also exposes /styleguide, a single page showing every colour token and type size. Edit src/config.ts for site settings and the content collections for products and notes, then run pnpm check && pnpm build as the gate before deploying.

Pricing

Leader itself is free under the MIT license. Leader Pro is a paid edition — $49 for one person, $129 for a team of up to ten — adding tags, an archive, author pages, Pagefind search, editions with prices and Product JSON-LD, four colour presets, per-product and per-note share cards, newsletter and comment integrations, a second language under /ko/, and a footer without the theme credit.

FAQ

Is Leader free?

Yes. The free edition is MIT-licensed and includes the leader-rule shelf, four categories with accents, light and dark mode, RSS, sitemap, SEO metadata, and an optional analytics slot and contact form. A footer credit line links back to the repository and can be deleted.

What is the leader rule?

The leader rule is the hairline that joins a product title on the left to its category on the right, the way a printed table of contents joins a title to its page number. On hover it thickens into the category's accent colour and carries the title with it.

Does Leader need images?

No. The theme is set entirely in type and rules and is finished without any screenshot or photograph, so nothing waits on artwork. Leader Pro adds a cover and gallery view for products.