Getting started

Install
```
$npm install @lilt-ui/charts
```
Lilt needs React and React DOM 19. Check both versions in your app before installing.
Add the styles
```
import '@lilt-ui/charts/styles.css';
```
Import it once, in your root layout or app entry. Every card reads from the same stylesheet.

Your first card

Save this component as visitors-card.tsx. It is complete: rows, the card, and the stylesheet import. Cards are client components, and the directive is harmless outside Next.js.

visitors-card.tsx

'use client';

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

const ranges = [
  { "id": "year", "label": "This year", "data": [
    { "month": "Jan", "organic": 2400, "referral": 1200, "paid": 800 },
    { "month": "Feb", "organic": 2800, "referral": 1400, "paid": 700 },
    { "month": "Mar", "organic": 3100, "referral": 1500, "paid": 900 },
    { "month": "Apr", "organic": 2900, "referral": 1700, "paid": 1100 },
    { "month": "May", "organic": 3600, "referral": 1900, "paid": 1000 },
    { "month": "Jun", "organic": 4100, "referral": 2100, "paid": 1300 },
    { "month": "Jul", "organic": 4500, "referral": 2400, "paid": 1400 },
    { "month": "Aug", "organic": 4300, "referral": 2500, "paid": 1600 },
    { "month": "Sep", "organic": 4900, "referral": 2600, "paid": 1500 },
    { "month": "Oct", "organic": 5400, "referral": 2900, "paid": 1800 },
    { "month": "Nov", "organic": 5800, "referral": 3100, "paid": 2000 },
    { "month": "Dec", "organic": 6700, "referral": 3500, "paid": 2200 },
  ], "delta": 0.184 },
  { "id": "last-year", "label": "Last year", "data": [
    { "month": "Jan", "organic": 2100, "referral": 1100, "paid": 900 },
    { "month": "Feb", "organic": 2300, "referral": 1200, "paid": 900 },
    { "month": "Mar", "organic": 2500, "referral": 1300, "paid": 1000 },
    { "month": "Apr", "organic": 2600, "referral": 1400, "paid": 1000 },
    { "month": "May", "organic": 2900, "referral": 1500, "paid": 1100 },
    { "month": "Jun", "organic": 3300, "referral": 1700, "paid": 1200 },
    { "month": "Jul", "organic": 3500, "referral": 1800, "paid": 1200 },
    { "month": "Aug", "organic": 3600, "referral": 2000, "paid": 1300 },
    { "month": "Sep", "organic": 3900, "referral": 2100, "paid": 1400 },
    { "month": "Oct", "organic": 4200, "referral": 2300, "paid": 1500 },
    { "month": "Nov", "organic": 4600, "referral": 2500, "paid": 1600 },
    { "month": "Dec", "organic": 5100, "referral": 2700, "paid": 1800 },
  ], "delta": 0.062 },
];

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

Render it
In the Next.js App Router, render it from any Server Component page. In any other React app, mount it from your entry.
app/page.tsx
```
import { VisitorsCard } from './visitors-card';

export default function Page() {
  return <main style={{ maxWidth: 640, margin: '48px auto', padding: 16 }}><VisitorsCard /></main>;
}
```
Every chart page has a Code tab with a complete component like this one. Import @lilt-ui/charts/styles.css once, in your app or in the component.
Match your theme
Cards read shadcn-style theme variables when your app defines them: --card, --card-foreground, --muted-foreground, --border, --ring, and --chart-1 to --chart-5. Anything you leave out falls back to Lilt's own values, and a palette prop still picks a fixed color set.
Every Lilt style sits in the lilt cascade layer, so your own CSS overrides it without specificity tricks. With Tailwind, declare the layer order once at the top of your global stylesheet, so Lilt beats Tailwind's resets and your utility classes beat Lilt:
globals.css
```
@layer theme, base, lilt, components, utilities;
@import 'tailwindcss';
```
Hand it to your agent
Working with Claude Code, Cursor or another coding agent? Paste this, then ask for the chart you want. llms.txt lists every card by job with its rules, and llms-full.txt adds every example, data shape and prop.
```
Use Lilt Charts (@lilt-ui/charts) for charts.
Read https://liltui.vercel.app/llms.txt first and follow its rules.
```

Your first card

Save this component as visitors-card.tsx. It is complete: rows, the card, and the stylesheet import. Cards are client components, and the directive is harmless outside Next.js.

visitors-card.tsx

'use client';

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

const ranges = [
  { "id": "year", "label": "This year", "data": [
    { "month": "Jan", "organic": 2400, "referral": 1200, "paid": 800 },
    { "month": "Feb", "organic": 2800, "referral": 1400, "paid": 700 },
    { "month": "Mar", "organic": 3100, "referral": 1500, "paid": 900 },
    { "month": "Apr", "organic": 2900, "referral": 1700, "paid": 1100 },
    { "month": "May", "organic": 3600, "referral": 1900, "paid": 1000 },
    { "month": "Jun", "organic": 4100, "referral": 2100, "paid": 1300 },
    { "month": "Jul", "organic": 4500, "referral": 2400, "paid": 1400 },
    { "month": "Aug", "organic": 4300, "referral": 2500, "paid": 1600 },
    { "month": "Sep", "organic": 4900, "referral": 2600, "paid": 1500 },
    { "month": "Oct", "organic": 5400, "referral": 2900, "paid": 1800 },
    { "month": "Nov", "organic": 5800, "referral": 3100, "paid": 2000 },
    { "month": "Dec", "organic": 6700, "referral": 3500, "paid": 2200 },
  ], "delta": 0.184 },
  { "id": "last-year", "label": "Last year", "data": [
    { "month": "Jan", "organic": 2100, "referral": 1100, "paid": 900 },
    { "month": "Feb", "organic": 2300, "referral": 1200, "paid": 900 },
    { "month": "Mar", "organic": 2500, "referral": 1300, "paid": 1000 },
    { "month": "Apr", "organic": 2600, "referral": 1400, "paid": 1000 },
    { "month": "May", "organic": 2900, "referral": 1500, "paid": 1100 },
    { "month": "Jun", "organic": 3300, "referral": 1700, "paid": 1200 },
    { "month": "Jul", "organic": 3500, "referral": 1800, "paid": 1200 },
    { "month": "Aug", "organic": 3600, "referral": 2000, "paid": 1300 },
    { "month": "Sep", "organic": 3900, "referral": 2100, "paid": 1400 },
    { "month": "Oct", "organic": 4200, "referral": 2300, "paid": 1500 },
    { "month": "Nov", "organic": 4600, "referral": 2500, "paid": 1600 },
    { "month": "Dec", "organic": 5100, "referral": 2700, "paid": 1800 },
  ], "delta": 0.062 },
];

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

Render it

In the Next.js App Router, render it from any Server Component page. In any other React app, mount it from your entry.

app/page.tsx

import { VisitorsCard } from './visitors-card';

export default function Page() {
  return <main style={{ maxWidth: 640, margin: '48px auto', padding: 16 }}><VisitorsCard /></main>;
}

Every chart page has a Code tab with a complete component like this one. Import @lilt-ui/charts/styles.css once, in your app or in the component.

Match your theme

Cards read shadcn-style theme variables when your app defines them: --card, --card-foreground, --muted-foreground, --border, --ring, and --chart-1 to --chart-5. Anything you leave out falls back to Lilt's own values, and a palette prop still picks a fixed color set.

Every Lilt style sits in the lilt cascade layer, so your own CSS overrides it without specificity tricks. With Tailwind, declare the layer order once at the top of your global stylesheet, so Lilt beats Tailwind's resets and your utility classes beat Lilt:

globals.css

@layer theme, base, lilt, components, utilities;
@import 'tailwindcss';

Hand it to your agent

Working with Claude Code, Cursor or another coding agent? Paste this, then ask for the chart you want. llms.txt lists every card by job with its rules, and llms-full.txt adds every example, data shape and prop.

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

Chart style

Palette

Theme

Appearance

Reading & motion

Install

Add the styles

Your first card

visitors-card.tsx

Render it

Match your theme

globals.css

Hand it to your agent

Chart style

Palette

Theme

Appearance

Reading & motion

Getting started

Install

Add the styles

Your first card

visitors-card.tsx

Render it

Match your theme

globals.css

Hand it to your agent