Introduction

PaceUI TanStack Charts provides a curated collection of modern, highly customizable chart components designed for analytics dashboards, monitoring platforms, and data-rich applications. Built on top of TanStack Charts and styled with Shadcn UI, these components integrate directly into your React & Next.js projects via the shadcn CLI.

Why TanStack Charts?

• Declarative & Reactive High-performance SVG primitives powered by TanStack Charts reactivity for seamless real-time data updates.
• Full Code Ownership Component source code copies directly into your project via the shadcn CLI with zero external library lock-in.
• Performant & Responsive Hardware-accelerated rendering optimized for desktop, tablet, and mobile displays.
• Customizable & Themed Fully styled with CSS variables and Tailwind classes to adapt to light and dark themes out of the box.

Getting Started

Add any chart component directly to your project using the shadcn CLI:

npx shadcn@latest add @paceui/tanstack-charts-line-interactive

Explore the charts in the sidebar to preview interactive demos, copy code snippets, and inspect chart properties.

Acknowledgements

Special thanks to TanStack Charts for their incredible work building powerful, reactive charting primitives for the modern web ecosystem.