Hewn
Components

Components

Sparkline

Compact inline trend line for dense data surfaces.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add sparkline

Sparkline is a minimal trend line for tables, cards, and dashboards. It uses role="img" with a required summary and respects reduced motion.

Signups over the last seven weeks

Usage

TSX
import { Sparkline } from "@hewnui/ui";

<Sparkline
  data={[4, 6, 5, 9, 7, 11]}
  summary="Signups over the last six weeks"
/>

States

  • loading — skeleton placeholder
  • empty — dashed empty message (also when data is empty)
  • error — alert message

Accessibility

Provide a concrete summary. Prefer a surrounding visually-hidden data table when the exact values matter.

API reference

Props for Sparkline from @hewnui/ui/sparkline. Generated from component types — not hand-written.

Prop

Type

Skeleton

Placeholder blocks for loading layouts.

LineChart

Multi-series line chart with optional tooltip.

On this page

UsageStatesAccessibility