Introduction
Installation
Next.jsViteLaravelReact RouterRemixAstroTanStack StartTanStack RouterManual InstallationMCP
All componentsTheme
FieldFormInputText FieldTextareaSearch FieldInput OTPNumber FieldNumber FormatSliderCheckboxSwitchRadioSelectCombo BoxList BoxChoice BoxMulti SelectToken FieldNewTag FieldTag GroupCalendarDate FieldDate PickerDate Range PickerRange CalendarTime FieldColor PickerColor FieldColor AreaColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrop ZoneFile Trigger
ButtonButton GroupToggleToggle GroupPreskok Auth Button
EditorHeadingLinkTextKeyboard
CardContainerGrid ListResizableTableTreeSeparatorDescription ListScroll AreaShow MoreToolbar
BreadcrumbsNavbarPaginationTabsSidebar
DialogModalDrawerPopoverPreview TriggerNewSheetTooltipContext MenuDropdownCommandCommand MenuDisclosureMenu
ToastProgress BarProgress CircleMeterLoaderSkeletonNoteBadge
Chart (helpers)Area ChartBar ChartLine ChartPie ChartExperimental ChartsNewExperimental Radial ChartNewExperimental Radar ChartNewBar ListTracker
Async ImageAvatarCarouselPreskok Icon
Charts

Experimental Charts

Try the TanStack Charts implementation alongside the stable Recharts components.

View as MarkdownAsk ChatGPT

The existing chart components remain stable and continue to use Recharts. These separately named components use the pre-release TanStack Charts package so you can evaluate the new implementation without migrating production code.

Installation

Install only the experimental chart variant you want to evaluate:

npx shadcn@latest add @preskok/experimental-area-chart

Area chart

import { ExperimentalAreaChart } from "@/components/ui/preskok-ui/experimental-area-chart"

;<ExperimentalAreaChart
  config={config}
  data={data}
  dataKey="month"
  fillType="gradient"
  lineType="monotone"
/>

Bar chart

npx shadcn@latest add @preskok/experimental-bar-chart

Line chart

npx shadcn@latest add @preskok/experimental-line-chart

Pie chart

npx shadcn@latest add @preskok/experimental-pie-chart

Stability

TanStack Charts is still pre-release. Treat these components as opt-in and expect their API to change. The unprefixed AreaChart, BarChart, LineChart, and PieChart APIs are not changed by installing or testing them.

Pie Chart

A pie/donut chart component with customizable labels.

Experimental Radial ChartNew

Concentric radial bars built on TanStack Charts with tracks, labels, legends, and tooltips.

On this page

Installation
Area chart
Bar chart
Line chart
Pie chart
Stability
Compare chart implementations
Switch between the stable Recharts component and the experimental TanStack implementation using the same data and configuration.
Recharts · Stable
TanStack · Experimental
Qualified pipeline last 7d
Daily opportunity value grouped by segment.
Day 1Day 2Day 3Day 4Day 5Day 6Day 7$0k$50k$100k$150k$200k
Support workload
Last 6 days
Day 1Day 2Day 3Day 4Day 5Day 60 tickets50 tickets100 tickets150 tickets
Workload up 9.4% this week
Open tickets across API and billing queues
Dealership performance
Sales vs Leads per month
M1M2M3M4M5M6M7M8M9M10M11M1220406080100
Weekly request mix
Inbound requests grouped by owning team.
1,440Total requests