Vitrine

Vitrine is a free, MIT-licensed Astro theme that renders an archive as a printed catalogue sheet: one plate per object, set inside a ruled grid with a caption above and a cartellino below. It is built for catalogue raisonné-style collections, museum archives and bodies of work made of discrete objects rather than for blog or marketing layouts.

What is Vitrine?

Vitrine is an Astro 7 and Tailwind CSS v4 theme for archives, collections and bodies of work made of objects. It takes Markdown/MDX content files — one per object, with title, image, caption, date, medium and collection — plus collection files arranged by an order field, and produces a static site with a paginated catalogue, collection pages, individual object entries, a colophon, contact, legal pages and a 404. Images placed in src/assets/objects/ are resized at build time. The theme is made by ondelva and ships as a free edition, with a paid Pro edition linked from the same page.

What makes Vitrine stand out?

• Plate grid layout — a 1px rule runs through the grid and objects sit inside the cells rather than filling them, with double-width cells available; the plate cell stays paper-colored in dark mode so photographs shot on white do not become white rectangles.
• Static Astro 7 with no client-side framework — Tailwind CSS v4 for styling, type-safe content collections for objects and collections checked at build time.
• Contrast checked in CI — pnpm check:contrast fails on any color pair below WCAG AA in both light and dark modes.
• Lighthouse 95+ in all four categories across demo pages, verified in CI.
• Full metadata surface — Open Graph, JSON-LD, RSS, sitemap, robots.txt and a pluggable analytics slot supporting Plausible, GA4 or Umami.
• Dev-only styleguide — pnpm dev serves /styleguide with every color token, the type scale and the plate grid on one page; the route is never built.
• Responsive from 360px with dark mode included, and an AGENTS.md file for Claude Code or Cursor.
• Sample content included — 23 photographs from the Metropolitan Museum's Open Access collection (CC0), intended to be deleted when starting a real archive.

Who should use Vitrine?

• Artists and photographers: publish a body of work as numbered plates with medium, date and catalogue number printed beneath each image.
• Museum and archive editors: organize objects into ordered collections with paginated catalogue browsing and per-object notes printed beside the label.
• Small institutions and private collectors: stand up a static catalogue raisonné on Cloudflare, Vercel, Netlify or GitHub Pages with one-click deploy buttons.
• Astro developers: use the theme as a starting point for a type-safe MDX content archive with an existing CI contrast and Lighthouse gate.

How does Vitrine work?

Scaffold with pnpm create astro@latest my-archive -- --template ondelva/astro-theme-vitrine (Node.js 22.12+ and pnpm 9+ required), then edit src/config.ts for site name, URL, author, navigation, social links, contact endpoint, pagination and feature switches, and override colors, type and plate metrics in src/styles/theme.css. Add MDX files under src/content/objects/ and Markdown files under src/content/collections/; the gate after any change is pnpm check && pnpm build.

Pricing

Vitrine is free and MIT-licensed. A separate Pro edition is sold at $49 for one person and $129 for a team of up to ten, adding term indexes, chronologies, Pagefind search, multiple plates per object, provenance/exhibition/literature registers, four color presets, build-time share cards and commercial licensing.

FAQ

Is Vitrine free?

Yes. The edition described here is free and MIT-licensed, so you can use, modify and redistribute it. A paid Pro edition exists separately with additional pages and licensing terms; support for the free edition is via GitHub Issues with no response time promised.

What does the free edition leave out compared with Pro?

The free theme includes one plate per object, a single color preset, the object's own plate as its share card, and no search or index of terms. Pro adds a terms index, chronology, Pagefind search, further captioned plates with an enlargement dialog, and apparatus registers.

What are the technical requirements?

You need Node.js 22.12 or newer and pnpm 9 or newer, though the exact pnpm version is pinned in package.json so pnpm 10+ switches automatically. Output is fully static, so it deploys to Cloudflare, Vercel, Netlify or GitHub Pages.

Where do I configure the site?

Site-specific settings live in src/config.ts — name, URL, author, navigation, social links, contact endpoint, pagination and feature switches — while colors, type and plate metrics are tokens overridden in src/styles/theme.css.