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
ChartArea ChartBar ChartLine ChartPie ChartRadial ChartRadar ChartBar ListTrackerRecharts ChartsDeprecated
Async ImageAvatarCarouselPreskok Icon
Charts

Recharts Charts

The earlier Recharts chart components, kept for existing installs.

View as MarkdownAsk ChatGPT

These components are deprecated. They still work and stay in the registry for existing installs, but new code should use the TanStack charts. The props map closely; see Migrating from Recharts.

What changed

The unprefixed registry names now install the TanStack versions:

BeforeNow
@preskok/chart (Recharts helpers)@preskok/recharts-chart
@preskok/area-chart → AreaChart@preskok/recharts-area-chart → RechartsAreaChart
@preskok/bar-chart → BarChart@preskok/recharts-bar-chart → RechartsBarChart
@preskok/line-chart → LineChart@preskok/recharts-line-chart → RechartsLineChart
@preskok/pie-chart → PieChart@preskok/recharts-pie-chart → RechartsPieChart
@preskok/experimental-*-chart@preskok/*-chart

Code already copied into your project is unaffected. Re-adding an unprefixed name brings in the TanStack version.

Area chart

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

Bar chart

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

Line chart

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

Pie chart

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

Chart helpers

npx shadcn@latest add @preskok/recharts-chart

Tracker

Visualize data over time with tooltips.

Async Image

Compound async image with lazy loading, skeleton placeholder, and error fallback.

On this page

What changed
Area chart
Bar chart
Line chart
Pie chart
Chart helpers
Compare chart implementations
The same data and configuration rendered by the TanStack chart and the deprecated Recharts chart.
TanStack
Recharts · Deprecated
JanFebMarAprMayJun$0k$20k$40k$60k$80k$100k
Qualified pipeline last 7d
Daily opportunity value grouped by segment.
Support workload last 7d
Open tickets by queue, stacked by day.
Dealership performance
Sales vs Leads per month
Weekly request mix
Inbound requests grouped by owning team.