Skip to content
Agentic UI Kit
Buy

Motion Line Draw

MRR KPI detail page whose area draws in on view and morphs between the last 12 months and the previous 12 months.

Full screen Try a theme

Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.

About this motion

What it's for

  • MRR KPI detail page whose area draws in on view and morphs between the last 12 months and the previous 12 months.
  • Revenue by plan with three series that morph when the reader switches from revenue to account counts.
  • Churn or conversion trend on a report page drawn once when it scrolls into view.

For Streaming data that arrives every second, use Motion Chart Live Stream. For A single-measure bar or line chart that only needs a one-off entrance with per-point keyboard inspection, use Motion Chart Enter Series.

Includes

  • Chart entrance
  • In view trigger
  • Line draw
  • Area reveal
  • Data morph
  • Multi series
  • Series toggle
  • Change summary

Works with

  • Radix UI and Base UI primitives (pick the one your project uses)
  • React 19, Next.js App Router and Tailwind CSS 4, installed with the shadcn CLI
  • Your theme tokens, in light and dark mode

Install

Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.

Agentic UI CLI
agentic-ui add motion-line-draw
Installs through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/motion-line-draw

Used in

A standalone component: drop it into any screen.

Type
Motion
Variants
Radix UI and Base UI
Themes
Light and dark
Widths
Preview it at desktop, tablet and mobile widths above.
Motion
Animated, with a reduced-motion fallback