Lilt UI

Install

npm install @lilt-ui/charts
# or: pnpm add @lilt-ui/charts
# or: yarn add @lilt-ui/charts
# or: bun add @lilt-ui/charts

Lilt needs React and React DOM 19. Every card, variant, and prop is documented at liltui.vercel.app. Import the stylesheet once, in your root layout or app entry:

import '@lilt-ui/charts/styles.css';

With an agent

Working with Claude Code, Cursor, or another coding agent? Paste this, then ask for the chart you want:

Use Lilt Charts (@lilt-ui/charts) for charts. Read https://liltui.vercel.app/llms.txt first and follow its rules.

llms.txt lists every card by job with its rules; llms-full.txt adds every example, data shape, and prop.

Your first card

'use client';

import { AreaChartCard } from '@lilt-ui/charts';

const visitors = [
  { month: 'Jan', organic: 2400, paid: 800 },
  { month: 'Feb', organic: 2800, paid: 700 },
  { month: 'Mar', organic: 3100, paid: 900 },
];

export function VisitorsCard() {
  return (
    <AreaChartCard
      title="Visitors"
      data={visitors}
      x="month"
      series={[
        { key: 'organic', label: 'Organic' },
        { key: 'paid', label: 'Paid' },
      ]}
    />
  );
}

The headline, value tiles, and hover come from your rows. Supply delta when you want a change chip, for example delta={0.082} for +8.2%. x and each series key are checked against your data, so a typo is a type error, not a blank chart.

Every card, finished

For	Cards
Trends	Area, Line, Bar, and Combo cards, overlapping, stacked, or as shares
At a glance	Stat cards with a sparkline, bars, a meter, or a ring
Parts and goals	Radial, Treemap, Progress, and Activity ring
Rankings	Horizontal bar, with shares and an "Other" row
Flows and change	Funnel, Sankey, and Slope
Patterns	Heatmap (matrix and calendar), Scatter (points, strip, beeswarm), Radar, Cohort retention
Spread	Range (floating bars, error bars, timeline intervals) and Box plot
Markets	Candlestick, Indicators, Price, Depth, Order book, Portfolio, Watchlist, Market map, and more
Cool	23 spatial families, from Skyline and Terrain to Chord loom, Sunburst terraces, and Voxel cloud

Charts drawn in depth

Explore the Cool families: Skyline, Block city, Hex city, Voxel waffle, Terrain, Ridgeline, Spiral year, Event helix, Chord loom, Arc bridges, Rank ribbons, Parallel ribbons, Contour islands, Sunburst terraces, Cluster constellation, Ternary prism, Wind rose, Marimekko blocks, Intersection towers, Horizon folds, Circle archipelago, Helix ribbons, and Voxel cloud. Each is its own card with its own data contract.

Companion cards

TreemapChartCard reads label, value, and an optional group for one parent level. CalendarHeatmapCard reads date and value, with optional inclusive UTC from/to bounds. TimelineChartCard reads label, start, and end, and packs overlaps within optional lane categories. StripChartCard reads category and value; display="beeswarm" separates collisions without moving numeric positions.

They take the same depth, loading, empty, and header props as every other card, plus onSelectionChange and renderReadout for your own presentation. Treemap areas must be nonnegative, calendar dates are UTC, and timeline durations are measured in milliseconds (displayed as hours by default).

Existing family pages also cover StreamgraphCard, DivergingBarCard, MirroredBarCard, NestedDonutCard, ComparativeFunnelCard, GoalPacingCard, MilestoneProgressCard, ViolinCard, and CorrelationMatrixCard. Line supports indexed growth; Line and unstacked Area accept supplied forecast bands; Horizontal Bar supports lollipops; Scatter supports ordered trails; and Treemap supports group drill-down.

Finance charts

Candlesticks, indicators, and order books ship from their own entry point, so apps that never draw a candle never load one:

'use client';

import { CandlestickChartCard } from '@lilt-ui/charts/finance';

const candles = [
  {
    date: new Date('2026-08-20'),
    open: 243.1,
    high: 246.4,
    low: 241.8,
    close: 245.2,
    volume: 2410000,
  },
  {
    date: new Date('2026-08-21'),
    open: 245.2,
    high: 247.0,
    low: 243.9,
    close: 244.6,
    volume: 1980000,
  },
];

export function MarketCard() {
  return (
    <CandlestickChartCard
      title="SOL · USDC"
      data={candles}
      x="date"
      open="open"
      high="high"
      low="low"
      close="close"
      volume="volume"
      valueFormat={{ style: 'currency', currency: 'USD' }}
    />
  );
}

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗