Web components for Vox Pupuli and OpenVox community web sites — a general-purpose design system built on web standards, to keep branding consistent across all community offerings. The default theme, "Deep Teal," is a distinct OpenVox identity rather than a copy of any one site's look, and is fully retunable via CSS custom properties.
Because they are standard custom elements (built with Lit), the components work in plain HTML, Jekyll, VitePress, Vue, React — anywhere.
The component catalog, by category:
| Category | Components |
|---|---|
| Actions | vox-button, vox-cta, vox-theme-toggle |
| Forms | vox-checkbox, vox-file-input, vox-input, vox-input-group, vox-radio-group/vox-radio, vox-select, vox-switch, vox-textarea |
| Images | vox-avatar, vox-billboard |
| Navigation | vox-breadcrumbs, vox-header, vox-pagination, vox-series-nav, vox-sidenav, vox-subnav, vox-tabs |
| Overlays | vox-dialog, vox-disclosure, vox-dropdown |
| Page content | vox-accordion, vox-alert, vox-badge, vox-calendar-tile, vox-callout, vox-card, vox-cta-band, vox-empty-state, vox-footer, vox-grid, vox-hero, vox-link-hub, vox-loader, vox-quote, vox-sponsor-tier/vox-sponsor, vox-stat, vox-step-indicator, vox-timeline |
| Utilities | Utility classes: spacing (vox-m-*/vox-p-*), typography (vox-ts-*, vox-text-*), color (vox-color-*, vox-bg-*), border, display, flex, gap, shadow, visibility (incl. vox-sr-only and responsive hiding), width, z-index — plus .vox-table/.vox-table-wrap, .vox-list, and .vox-prose |
Form controls are form-associated custom elements (ElementInternals): they submit values, files, and validity with a plain <form> like native inputs.
With a bundler:
npm install @avitacco/voxblocksimport '@avitacco/voxblocks';
import '@avitacco/voxblocks/voxblocks.css';Without a build step (Lit bundled in):
<link rel="stylesheet" href="https://unpkg.com/@avitacco/voxblocks/dist/cdn/voxblocks.css">
<script type="module" src="https://unpkg.com/@avitacco/voxblocks/dist/cdn/voxblocks.js"></script>Then:
<vox-callout variant="tip">
<p>Components are just HTML tags — no framework required.</p>
</vox-callout>npm install
npm run docs:dev # component docs & live playground
npm run storybook # per-component Storybook, one story per documented example
npm run build # build npm + CDN bundles and type declarations
npm run docs:build # build the docs site
npm run build-storybook # build the static StorybookDesign tokens live in src/tokens/tokens.css (--vox-* custom properties, light + dark). Components live in src/components/<name>/vox-<name>.ts.
Apache-2.0