Framework-agnostic visual decoration components for data dashboards, powered by Web Components.
Build expressive large-screen dashboard surfaces with SSR-safe Custom Elements, decorative borders, HUD-style decorations, animated numbers, and theme presets.
- Framework agnostic: native Custom Elements that can be used from vanilla HTML, Vue, React, Vite, webpack, and SSR environments.
- Dashboard focused: border boxes, decorations, fit-screen containers, count-up numbers, and visual primitives designed for data screens.
- Theme ready: optional CSS variable presets for cyber blue, neon magenta, matrix green, solar gold, and ice white.
- Composable foundation: shared utilities, Web Components primitives, public elements, and themes are separated into focused packages.
DataV Kit is currently in its foundation phase. Vue and React adapters are planned, but intentionally not part of the current foundation work.
pnpm add @datav-kit/elements @datav-kit/themesimport { registerElements } from '@datav-kit/elements'
import '@datav-kit/themes/cyber-blue.css'
registerElements()<dvk-border-box-11 colors="#3d7fb8,#6ed7e8,#52f0b5">
<section>Command Center</section>
</dvk-border-box-11>| Package | Version | Downloads | Role |
|---|---|---|---|
@datav-kit/elements |
 |
 |
Public Web Components entrypoints and component registrations. |
@datav-kit/core |
 |
 |
Web Components primitives, lifecycle helpers, events, and controllers. |
@datav-kit/shared |
 |
 |
Framework-agnostic utilities shared by DataV Kit packages. |
@datav-kit/themes |
 |
 |
Optional CSS variable themes and theme exports. |
datav-kit
+-- packages
| +-- elements # public Custom Elements and component modules
| +-- core # Web Components primitives and helpers
| +-- shared # shared framework-agnostic utilities
| +-- themes # optional CSS variable theme presets
+-- docs # VitePress documentation site
+-- skills # repository-specific Codex/agent workflows
+-- turbo.json # monorepo task pipeline
pnpm install
pnpm build
pnpm typecheck
pnpm test
pnpm lint