shadcn/ui Chart Components

Dev Design Library indexes 47 shadcn/ui chart components from 9 open-source UI libraries, with the most coming from Watermelon UI, Shadcn Space, FLX UI, Intent UI and Cojeev UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Chart components belong to the Data display group.

• chart-01Intent UI · Reactchart-01
• GitHub Profile CardSpectrum UI · ReactA GitHub profile card with account stats, a contribution graph, and social links.
• Chart 01 - Sales Performance Bar ChartShadcn Space · ReactAn interactive stacked bar chart displaying monthly earnings, profit, and expenses, ideal for admin dashboards to…
• LCD Meteraudiocn · ReactA recorder-style level meter on an LCD Display's screen: block segments in the display's ink that light whole, a held…
• Agndex DashboardWatermelon UI · ReactA developer portal for managing search indexes, API credentials, billing, and project settings with light and dark…
• Preferenceglasscn · ReactA weighted preference bar with icon badges, hover tinting, and tooltip descriptions.
• ChartCojeev UI · ReactCompose an understandable chart from a frame, labelled series, inspectable plot and accessible values.
• Analytics overviewFLX UI · ReactSidebar, KPI cards, a bar chart, and a recent activity list.
• Bento 01D2Studio UI · ReactBento grid for an education program platform with admin overview, faculty view and a program form.
• chart-02Intent UI · Reactchart-02
• Chart 02 - Earnings Pie ChartShadcn Space · ReactA clean donut chart widget summarizing total earnings with source-wise breakdown, perfect for admin dashboards to…
• Astrix DashboardWatermelon UI · ReactA trade compliance workspace with AI classification metrics, a live pipeline, HS code stream review, and light and…
• Dynamic chart tooltipCojeev UI · ReactCompare a point, read its known subtotal or rank its series. Values update in place and keep their series colours.
• Dashboard previewFLX UI · ReactA layered app dashboard with a floating notification.
• chart-03Intent UI · Reactchart-03
• Chart 03 - Yearly Sales ComparisonShadcn Space · ReactA smooth line chart comparing this year versus last year sales with summary stats, ideal for dashboards to visualize…
• Demostack DashboardWatermelon UI · ReactA responsive product-demo workspace with organization switching, resource discovery, team filtering, and light and…
• MetricsFLX UI · ReactA stat card with trend and sparkline, layered over a second.
• Chart 04 - Weekly SalesShadcn Space · ReactA compact bar chart widget showing daily sales for the past week with trend indicator, perfect for dashboards to…
• Gridline DashboardWatermelon UI · ReactA responsive electrical-grid workspace for network modelling, asset flexibility, planning, operations, and stakeholder…
• AnalyticsFLX UI · ReactA card with a gradient area chart.
• Toggle Group 06 - Chart Time RangeShadcn Space · ReactAnalytics card with a 24h, 7d, 30d, and 90d time range toggle that updates the total, trend, and bar chart.
• Jobtracker DashboardWatermelon UI · ReactA responsive job management workspace with customer records, job pipelines, estimates, drag-and-drop line items, and…
• Library DashboardWatermelon UI · ReactA responsive library management dashboard with collection metrics, circulation charts, branch switching, and…
• Medesk DashboardWatermelon UI · ReactA healthcare operations dashboard for appointments, staff performance, department load, resources, and patient flow…
• Tallie DashboardWatermelon UI · ReactAn expense audit workspace with live controls, exception tracking, transaction review, and light and dark themes.
• Bionis DashboardWatermelon UI · React
• Business ManagementWatermelon UI · React
• Business Operations DashboardWatermelon UI · React
• Capitalio DashboardWatermelon UI · React
• E Commerce DashboardWatermelon UI · React
• Erp DashboardWatermelon UI · React
• HrmWatermelon UI · React
• Incident ManagementWatermelon UI · React
• Invoice Generator DashboardWatermelon UI · React
• Invoice Manager DashboardWatermelon UI · React
• Issue TrackingWatermelon UI · React
• Lead DashboardWatermelon UI · React
• Mail DashboardWatermelon UI · React
• Meetings DashboardWatermelon UI · React
• Payment Operations DashboardWatermelon UI · React
• Portfolio DashboardWatermelon UI · React
• Project Management DashboardWatermelon UI · React
• Sales DashboardWatermelon UI · React
• Task Management DashboardWatermelon UI · React
• Web3 DashboardWatermelon UI · React
• Workflow Management DashboardWatermelon UI · React

Libraries with shadcn/ui chart components

• Watermelon UI
• Shadcn Space
• FLX UI
• Intent UI
• Cojeev UI

Related categories

• Chart Components
• React Chart Components
• Tailwind CSS Chart Components
• Animated Chart Components
• shadcn/ui Data Display Components
• shadcn/ui Card Components
• shadcn/ui Table Components
• shadcn/ui Avatar Components
• shadcn/ui Data Table Components
• shadcn/ui Accordion Components
• shadcn/ui Stat Components
• shadcn/ui List Components
• shadcn/ui Calendar Components
• shadcn/ui Collapsible Components
• shadcn/ui Stat Card Components
• shadcn/ui Avatar Group Components
• shadcn/ui Tree View Components
• shadcn/ui Carousel Components
• shadcn/ui Testimonial Components
• shadcn/ui Filter Bar Components