# DataV Kit

> Framework-agnostic Web Components for data dashboard decoration.

## Table of Contents

### Guide

- [Introduction](/datav-kit/guide/introduction.md): Overview of datav-kit architecture, package structure, and Web Components approach for data dashboard development.
- [Installation](/datav-kit/guide/installation.md): Install datav-kit packages, register Web Components, and configure element imports for data screen projects.
- [Framework Integration](/datav-kit/guide/framework-integration.md): Integrate datav-kit Web Components with Vue, React, Vite, and webpack frameworks using custom element configuration.
- [Theming](/datav-kit/guide/theming.md): Coordinate dashboard backgrounds, text, status, data-series colors and dvk component accents through scoped dark or light project themes.
- [Component Authoring](/datav-kit/guide/component-authoring.md): Create new datav-kit elements with proper file layout, metadata, registration, and testing conventions.

### Decoration

- [Decoration 1](/datav-kit/components/decorations/decoration-1.md): Animated vertical bar decoration component for data dashboard dividers and accents.
- [Decoration 2](/datav-kit/components/decorations/decoration-2.md): Two-row dotted light decoration with animated point fill for cyber dashboard styling.
- [Decoration 3](/datav-kit/components/decorations/decoration-3.md): Animated angular line decoration with stroke dash animation for responsive dividers.
- [Decoration 4](/datav-kit/components/decorations/decoration-4.md): Responsive diamond panel with corner ornaments, main frame, and side accent lines for content display.
- [Decoration 5](/datav-kit/components/decorations/decoration-5.md): Angled line decoration with three polylines and horizontal mirror option for dashboard layouts.
- [Decoration 6](/datav-kit/components/decorations/decoration-6.md): Minimal cyber HUD rail with thin strokes, segmented breaks, angled cuts, and light nodes for enterprise screens.
- [Decoration 7](/datav-kit/components/decorations/decoration-7.md): Crystal-glass ribbon ornament with gradients, refraction, particles, and flowing light trails for data screens.
- [Decoration 8](/datav-kit/components/decorations/decoration-8.md): Rotating HUD energy ring with arcs, tick marks, neon blocks, and dark hollow center for metrics display.
- [Decoration 9](/datav-kit/components/decorations/decoration-9.md): Minimal enterprise HUD rail with guide lines, corner guides, and angled parallelogram modules for symmetry.
- [Decoration 10](/datav-kit/components/decorations/decoration-10.md): Enterprise radar HUD with concentric rings, scanning beam, target signals, and technical grid overlay.
- [Decoration 11](/datav-kit/components/decorations/decoration-11.md): Cyber floating audio halo with fixed outer rhythm blocks, glow rings, segmented scales, and raised inner indicators.

### Title

- [Title 1](/datav-kit/components/titles/title-1.md): Slim enterprise large-screen header banner redesigned as one equal-height horizontal light panel with broad translucent surfaces and a few guiding rails.
- [Title 2](/datav-kit/components/titles/title-2.md): Deep glass large-screen top title bar with cyber-blue mechanical wings, a central title panel, low-brightness flow line, and gold title focus.
- [Title 3](/datav-kit/components/titles/title-3.md): Aurora arc large-screen title header with open curved light tracks, a translucent center lens, soft orbit rails, and light-bead terminals.
- [Title 4](/datav-kit/components/titles/title-4.md): Flat rail large-screen title header built from straight horizontal rails, quiet inner guides, and short end ticks, with a title-first opening that follows the title box.
- [Title 5](/datav-kit/components/titles/title-5.md): Recessed large-screen title header whose top guide rail steps down through a shoulder on each side into a flat bright bottom edge, around a recess that widens to follow the title.

### Border

- [Border Box 1](/datav-kit/components/borders/border-box-1.md): Animated rectangular SVG border component with moving highlight for data dashboard panels.
- [Border Box 2](/datav-kit/components/borders/border-box-2.md): Layered neon cyber frame with corners, energy bars, tick marks, and circular nodes for HUD layouts.
- [Border Box 3](/datav-kit/components/borders/border-box-3.md): Restrained futuristic blue frame with fixed corners, center modules, and responsive edge strips.
- [Border Box 4](/datav-kit/components/borders/border-box-4.md): Dense neon HUD frame with ornate corners, detail modules, and source-clipped edge sections.
- [Border Box 5](/datav-kit/components/borders/border-box-5.md): Layered electric-blue HUD frame with five fixed frame layers and responsive background adaptation.
- [Border Box 6](/datav-kit/components/borders/border-box-6.md): High-precision cyan HUD frame with traced source layers, marker stacks, and bottom hatch details.
- [Border Box 7](/datav-kit/components/borders/border-box-7.md): Chamfered glowing panel with fixed mirrored corner ornaments and optional background fill.
- [Border Box 8](/datav-kit/components/borders/border-box-8.md): Dynamic polygon panel with four fixed mirrored animated corner ornaments for dashboard containers.
- [Border Box 9](/datav-kit/components/borders/border-box-9.md): Glowing panel with host border, inset shadow, and rounded corner linework for data screens.
- [Border Box 10](/datav-kit/components/borders/border-box-10.md): Rounded outline panel with animated corner glows and responsive content padding for dashboards.
- [Border Box 11](/datav-kit/components/borders/border-box-11.md): Enterprise data-platform frame with status rails, live nodes, and rail-charge motion for operations panels.
- [Border Box 12](/datav-kit/components/borders/border-box-12.md): Minimal electric-blue HUD frame with chamfered corners, title rail, and symmetric side folds.
- [Border Box 13](/datav-kit/components/borders/border-box-13.md): Sparse electric-blue split rail frame with corner modules, carrier spine, and endpoint sparkles.
- [Border Box 14](/datav-kit/components/borders/border-box-14.md): Orthogonal signal-port corner frame with circuit traces, pin contacts, and interface nodes.
- [Border Box 15](/datav-kit/components/borders/border-box-15.md): Lightweight responsive panel with corner dots, corner ticks, straight edge rails, and optional background.
- [Border Box 16](/datav-kit/components/borders/border-box-16.md): Floating CPU-like thin border with broken outer rails, open inner hairlines, shallow edge pins, and subtle chip activity.

### Other

- [Fit Screen](/datav-kit/components/other/fit-screen.md): Responsive scaling container that adapts design canvases to viewport or host container with multiple scaling modes.
- [Count To](/datav-kit/components/other/count-to.md): Animated numeric metric display with prefix, suffix, thousands separator, and decimal formatting options.
- [Loading Orbit](/datav-kit/components/other/loading-orbit.md): Two counter-rotating loading rings with datav-kit color cycling and an optional status slot.
- [Loading Energy](/datav-kit/components/other/loading-energy.md): A restrained enterprise loading indicator with a compact status panel, data lanes, and subtle progress motion.
- [Loading Pulse](/datav-kit/components/other/loading-pulse.md): A compact five-bar loading pulse whose bars rise and fall out of phase from the centre outward, with a quiet track behind each bar and an optional status slot.
- [Performance Monitor](/datav-kit/components/other/performance-monitor.md): Runtime diagnostics overlay for datav-kit dashboards.

### Reference

- [Architecture Contracts](/datav-kit/reference/architecture-contracts.md): Implementation contracts for datav-kit metadata, events, SSR, props, themes, and decorative container content areas.
- [datav-kit 技术架构](/datav-kit/architecture.md): Technical architecture of datav-kit covering package responsibilities, rendering models, theming, SSR, and design decisions.