Civic UI

The Codeberg repository is the canonical source. The GitHub repository is a read-only mirror, used for npm provenance/publishing and for hosting the live playground via GitHub Pages.

A Vue 3 component library for public-sector and institutional websites — a calm, high-trust design language (deep navy ink, a strong yellow accent, soft-cornered buttons, generous whitespace) built entirely on CSS custom properties, so it re-skins without touching a single component.

It ships ready-to-use Sections for a public-facing site (hero, service teasers, FAQ, appointment booking, footer…), a full component set (buttons, forms, tables, overlays…), and a parallel webapp kit (AppShell, Sidebar, DataTable, StatCard…) so an internal tool can share the same design system as the public site.

Re-skinning to a different brand doesn't mean hand-picking two dozen CSS variables and hoping the contrast still holds: generatePalette()/applyPalette() take a ready-made palette, one brand color, a handful of roles, or every role, derive whatever you didn't specify, and check (and if needed correct) every text/background pairing against WCAG AA. See Theming.

Built for government and public-sector deployments

• Accessible by default. The entire component set is built and checked against WCAG 2.2 Level AA, EN 301 549, and BITV 2.0 — Germany's federal accessibility ordinance. Real keyboard operability everywhere, managed focus for every overlay, correct WAI-ARIA wiring, and forms that tie label/hint/error text together programmatically. Full breakdown: Accessibility & privacy conformance.
• GDPR-compliant by construction. Zero requests to third-party hosts — fonts are self-hosted, not pulled from a Google Fonts CDN, so loading the library never leaks a visitor's IP address to anyone. Details: Privacy and third-party requests.
• Built against OWASP ASVS 4.0 and BSI IT-Grundschutz APP.1.4. The two real injection surfaces a component library can expose — raw SVG props and URL bindings — route through an overridable security.js module, so you can wire in your own sanitizer or backend allowlist with one function call. Details: Security.

These are conformance targets the library is checked against during development, not third-party certifications — Accessibility & privacy conformance explains how to verify all of it yourself with free tooling once deployed.

Install

npm install civic-ui vue

// main.js
import { createApp } from 'vue'
import CivicUI from 'civic-ui'
import App from './App.vue'

createApp(App).use(CivicUI).mount('#app')

<template>
  <cui-hero-section title="Welcome" text="Built with Civic UI." />
</template>

Or import only what you need:

<script setup>
import { AppButton, Card } from 'civic-ui'
</script>

See Getting started for the full setup guide.

Documentation

The complete reference — every component and section, one page each, with live examples and full prop tables — lives in docs/. Run the interactive version locally:

git clone https://codeberg.org/zerobrick/civic-ui.git
cd civic-ui
npm install
npm run dev

This opens the playground: a browsable catalog of every component and section with a live preview, prop reference, and copy-pasteable code for each. It also has its own README — none of it ships in the published package.

Contribute / develop locally

npm run dev      # playground — Sections and Components catalog
npm run build    # builds the publishable library into dist/

License

MIT