# shadcn charts vs ssych for trading screens

> shadcn/ui charts run on Recharts: area, bar, line, pie, radar and radial. For candles, depth and order flow, here is what ssych adds. Checked 9 Nov 2026.

shadcn/ui ships a chart set built on Recharts: area, bar, line, pie, radar and radial charts, with tooltips. It is the default in most shadcn projects and it is very good at business charts. A trading screen asks for other shapes, like candles with volume, a depth chart or a volume profile. That is where ssych fits, through the same shadcn CLI.

Facts about other libraries checked on 9 November 2026 (2026-11-09); sources at the end.

## Short answer

Keep shadcn charts for KPIs, revenue and usage. Add ssych parts for the trading shapes shadcn charts do not list. They share the CLI and the Tailwind setup, so they sit together in one project.

## Side by side

| | shadcn/ui charts | ssych |
|---|---|---|
| Charts drawn with | Recharts v3 | Plain SVG, no chart library |
| Chart types | Area, bar, line, pie, radar, radial, plus tooltips | Candlestick with volume, depth chart, volume profile, order flow, moving averages, drawdown, range navigator, heatmaps and more |
| Candlestick or OHLC | Not in the chart list | Yes, with a volume pane, a crosshair and an OHLC readout |
| Install | npx shadcn@latest add chart | npx shadcn@latest add @ssych/<name> |
| Theming | CSS variables such as --chart-1 | Tailwind classes in the installed file |
| License | MIT | MIT |
| Community | 127k GitHub stars on shadcn/ui | New in 2026, one maintainer, a small community |

## Where shadcn/ui charts is the better pick

- It is the default, with a huge community behind shadcn/ui.
- Recharts underneath: a mature chart engine with full docs, so most business charts are a config away.
- Colours come from CSS variables you already have.

## Where ssych fits better

- Trading shapes: candles with volume, market depth, volume profile and order flow.
- No chart runtime. The SVG is in the file you install.

## The ssych parts

- Candlestick Chart: `npx shadcn@latest add @ssych/candlestick` (https://ssych.com/library/candlestick.md)
- Depth Chart: `npx shadcn@latest add @ssych/depth-chart` (https://ssych.com/library/depth-chart.md)
- Volume Profile: `npx shadcn@latest add @ssych/volume-profile` (https://ssych.com/library/volume-profile.md)
- Order Flow: `npx shadcn@latest add @ssych/tape-flow` (https://ssych.com/library/tape-flow.md)
- SMA Chart: `npx shadcn@latest add @ssych/sma-chart` (https://ssych.com/library/sma-chart.md)
- Equity & Drawdown: `npx shadcn@latest add @ssych/equity-drawdown` (https://ssych.com/library/equity-drawdown.md)

## Questions

### Does shadcn/ui have a candlestick chart?

Its chart list on ui.shadcn.com shows area, bar, line, pie, radar and radial charts, with no candlestick or OHLC chart, as of 9 November 2026. You can build one on Recharts yourself, or install one: npx shadcn@latest add @ssych/candlestick.

### Do I need Recharts for the ssych charts?

No. They are plain SVG in React, so the only dependencies are small utilities like clsx and motion.

## Sources

- shadcn/ui charts, the chart list: https://ui.shadcn.com/charts/area
- shadcn/ui chart docs: install, Recharts v3, theming: https://ui.shadcn.com/docs/components/chart
- GitHub: shadcn-ui/ui: https://github.com/shadcn-ui/ui

Page: https://ssych.com/library/compare/shadcn-charts-vs-ssych