Getting Started
VoxBlocks is a set of Web Components for Vox Pupuli and OpenVox community web sites. Because they are standard custom elements, they work in plain HTML pages, Jekyll sites, VitePress docs, and any framework.
With a bundler (npm)
npm install @voxpupuli/voxblocksImport once in your entry point — this registers every <vox-*> element and pulls in the design tokens:
import '@voxpupuli/voxblocks';
import '@voxpupuli/voxblocks/voxblocks.css';Without a build step (CDN / static sites)
The CDN build bundles Lit, so a single module script is enough:
<link rel="stylesheet" href="https://unpkg.com/@voxpupuli/voxblocks/dist/cdn/voxblocks.css">
<script type="module" src="https://unpkg.com/@voxpupuli/voxblocks/dist/cdn/voxblocks.js"></script>Use the components
<vox-button href="https://voxpupuli.org">Visit Vox Pupuli</vox-button>
<vox-callout variant="tip">
<p>Components are just HTML tags — no framework required.</p>
</vox-callout>Dark mode
Tokens switch automatically when an ancestor element (usually <html>) has the class dark — the VitePress convention used by the OpenVox docs — or the attribute data-vox-theme="dark":
<html data-vox-theme="dark">Fonts
VoxBlocks doesn't bundle font files — it names Inter (body), Source Serif 4 (headings), and JetBrains Mono (code) in its font stacks and falls back to system fonts if they aren't loaded, the same way it's always handled Inter. Load them yourself for the intended look, e.g.:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,600;1,500&family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">All three are open licensed (Source Serif 4 and JetBrains Mono included) and safe to self-host instead if a site doesn't want the Google Fonts request.