How do I install the Sparkline component in my application?

Run 'npx nnuikit add sparkline' using the CLI to add the component to your codebase, or install 'npm install nnuikit' to import it across React, Vue, Svelte, Astro, or plain HTML.

Does Sparkline work with React 19, Next.js, and SSR without hydration errors?

Yes. NNUI-KIT executes strictly in the Light DOM without Shadow DOM barriers. Its 'Mutate Attributes, Never Nodes' invariant guarantees seamless reconciler compatibility with zero hydration mismatch errors.

Components/Sparkline

Sparkline

Tier 2: Light-DOM

Lightweight SVG micro-trendline and area chart with interactive hover tooltip

All-In-One Architecture Advantage: The <ui-sparkline> component operates strictly in the Light DOM. It eliminates Shadow DOM encapsulation barriers, supports seamless global styling (Tailwind CSS / design tokens), and integrates natively across React 19, Vue 3, Svelte 5, Astro, and SSR frameworks.

Installation

$npx nnuikit add sparkline

copy

Interactive Preview & Code

Weekly Revenue

$48,250

Server Latency

18ms

<ui-sparkline data="[12, 19, 14, 25, 32, 28, 48]" hoverable fill="gradient"></ui-sparkline>

                  import React from 'react';
import 'nnuikit/css';
import { Sparkline } from 'nnuikit/react';

export default function SparklineDemo() {
  return (
    <Sparkline
      data={[12, 19, 14, 25, 32, 28, 48]}
      hoverable
      fill="gradient"
    />
  );
}

                  <script setup>
import 'nnuikit/css';
import 'nnuikit/client';
</script>

<template>
  <ui-sparkline data="[12, 19, 14, 25, 32, 28, 48]" hoverable fill="gradient" />
</template>

                  <script>
  import 'nnuikit/css';
  import 'nnuikit/client';
</script>

<ui-sparkline data="[12, 19, 14, 25, 32, 28, 48]" hoverable fill="gradient" />

How to Utilize

NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:

React 18 & 19 (Next.js 15 App Router)

import 'nnuikit/css';
import 'nnuikit/client';
import { Sparkline } from 'nnuikit/react';

Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)

<!-- Automatically registers <ui-sparkline> and <nnui-sparkline> -->
import 'nnuikit/css';
import 'nnuikit/client';

Platform Features

Zero Shadow DOM

Element lives in the Light DOM. Tailwind and global CSS apply directly.

persist="url | local"

Add declarative persistence attribute to auto-sync state with URL search params.

sync="cross-tab"

Synchronize changes across all open browser tabs via BroadcastChannel.