RUEN

Brock UI

Editable React components for charts and data — copy the code and paste it straight into your project. Built by Almas Kasymzhanov — a data journalist, analyst, developer, and entrepreneur — for the people who do that work too: journalists, frontend developers, and data-viz designers. Every component is one he reaches for in his own daily work, and the collection grows as that work does.

Components

Open-source and installable through the shadcn registry. Open any card for its live studio, code, and docs.

Column chart with 7 data points. Highest: 6 (215); lowest: 0 (142).
Data table.
LabelValue
Bar 1142
Bar 2168
Bar 3187
Bar 4159
Bar 5203
Bar 6178
Bar 7215
Column ChartNEW

Time-series vertical bars for activity, volume, and counts.

Bar chart with 4 data points. Highest: Direct (4,120); lowest: Email (940).
Data table.
LabelValue
Direct4,120
Search3,870
Social1,290
Email940
Bar ChartNEW

Horizontal bars for ranked categorical comparisons.

Line chart with 1 series. Series: high 205 at 6, low 120 at 0.
Data table.
XSeries
0120
1138
2131
3159
4172
5188
6205
Line ChartNEW

Multi-series trends with direct labels and honest gaps.

Coming soon

Area ChartStacked Bar ChartPie ChartDonut ChartHistogramScatter PlotHeatmapFunnel ChartMetric Card