---
title: "Discussion on \"How to Add shadcn Charts to a Next.js App Without Writing Recharts Boilerplate\" | Hashnode"
description: "Discussion on \"How to Add shadcn Charts to a Next.js App Without Writing Recharts Boilerplate\". Charts look like a small task on a ticket. Then you open the Recharts docs and remember how much setup every chart needs: a config object for labels and colors, axes, a tooltip, a legend, colors that"
url: "https://hashnode.com/posts/how-to-add-shadcn-ui-charts-to-nextjs/6abf4b9d63317980cdaece08"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [How to Add shadcn Charts to a Next.js App Without Writing Recharts Boilerplate](https://freecodecamp.org/news/how-to-add-shadcn-ui-charts-to-nextjs?utm_source=hashnode&utm_medium=feed)

Charts look like a small task on a ticket. Then you open the Recharts docs and remember how much setup every chart needs: a config object for labels and colors, axes, a tooltip, a legend, colors that

Oct 2 · 10 min read · freecodecamp.org  
Read the article

-   [#nextjs](https://hashnode.com/tag/nextjs)
-   [#shadcn](https://hashnode.com/tag/shadcn)
-   [#charts](https://hashnode.com/tag/charts)
-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#data-visualization-tools](https://hashnode.com/tag/data-visualization-tools)
-   [#typescript](https://hashnode.com/tag/typescript)

## Written by

[Ash](https://hashnode.com/@ashvinui)

@ashvinui

  
[View profile](https://hashnode.com/@ashvinui)

A Shadcn Lover and UI/UX Learner. I love to design + Code

## Responses

Markdown supported · ⌘↵ to post

No responses yet.