https://github.com/hackycy/datav-kit

基于 Web Components 构建的、与框架无关的数据可视化视觉装饰组件。
https://github.com/hackycy/datav-kit

dataviz

Last synced: 22 days ago
JSON representation

基于 Web Components 构建的、与框架无关的数据可视化视觉装饰组件。

• Host: GitHub
• URL: https://github.com/hackycy/datav-kit
• Owner: hackycy
• License: mit
• Created: 2026-06-21T03:49:19.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2026-07-02T10:14:25.000Z (about 1 month ago)
• Last Synced: 2026-07-02T12:12:19.788Z (about 1 month ago)
• Topics: dataviz
• Language: TypeScript
• Homepage: https://hackycy.github.io/datav-kit/
• Size: 568 KB
• Stars: 2
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


# DataV Kit

Framework-agnostic visual decoration components for data dashboards, powered by Web Components.

[![License](https://img.shields.io/github/license/hackycy/datav-kit?style=flat-square)](./LICENSE)

[![Elements Version](https://img.shields.io/npm/v/%40datav-kit%2Felements?style=flat-square&label=elements)](https://www.npmjs.com/package/@datav-kit/elements)

[![Elements Downloads](https://img.shields.io/npm/dm/%40datav-kit%2Felements?style=flat-square&label=downloads)](https://www.npmjs.com/package/@datav-kit/elements)

Build expressive large-screen dashboard surfaces with SSR-safe Custom Elements, decorative borders, HUD-style decorations, animated numbers, and theme presets.

[Quick Start](#quick-start) | [Packages](#packages) | [Documentation](https://hackycy.github.io/datav-kit)



## Highlights

- **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.

## Quick Start

```bash

pnpm add @datav-kit/elements @datav-kit/themes

```

```ts

import { registerElements } from '@datav-kit/elements'

import '@datav-kit/themes/cyber-blue.css'

registerElements()

```

```html

  Command Center

```

## Packages

| Package | Version | Downloads | Role |

| --- | --- | --- | --- |

| [`@datav-kit/elements`](./packages/elements) | [![npm](https://img.shields.io/npm/v/%40datav-kit%2Felements?style=flat-square)](https://www.npmjs.com/package/@datav-kit/elements) | [![npm downloads](https://img.shields.io/npm/dm/%40datav-kit%2Felements?style=flat-square)](https://www.npmjs.com/package/@datav-kit/elements) | Public Web Components entrypoints and component registrations. |

| [`@datav-kit/core`](./packages/core) | [![npm](https://img.shields.io/npm/v/%40datav-kit%2Fcore?style=flat-square)](https://www.npmjs.com/package/@datav-kit/core) | [![npm downloads](https://img.shields.io/npm/dm/%40datav-kit%2Fcore?style=flat-square)](https://www.npmjs.com/package/@datav-kit/core) | Web Components primitives, lifecycle helpers, events, and controllers. |

| [`@datav-kit/shared`](./packages/shared) | [![npm](https://img.shields.io/npm/v/%40datav-kit%2Fshared?style=flat-square)](https://www.npmjs.com/package/@datav-kit/shared) | [![npm downloads](https://img.shields.io/npm/dm/%40datav-kit%2Fshared?style=flat-square)](https://www.npmjs.com/package/@datav-kit/shared) | Framework-agnostic utilities shared by DataV Kit packages. |

| [`@datav-kit/themes`](./packages/themes) | [![npm](https://img.shields.io/npm/v/%40datav-kit%2Fthemes?style=flat-square)](https://www.npmjs.com/package/@datav-kit/themes) | [![npm downloads](https://img.shields.io/npm/dm/%40datav-kit%2Fthemes?style=flat-square)](https://www.npmjs.com/package/@datav-kit/themes) | Optional CSS variable themes and theme exports. |

## Repository Map

```text

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

```

## Development

```bash

pnpm install

pnpm build

pnpm typecheck

pnpm test

pnpm lint

```

## Inspire

- [datav-vue3](https://github.com/vaemusic/datav-vue3)

## License

[MIT](./LICENSE) License Copyright [hackycy](https://github.com/hackycy)