Reactolith UI

Getting Started

Introduction

Installation

Usage

Layout

Aspect Ratio

Card

Resizable

Scroll Area

Separator

Direction Provider

Forms

Button

Button Group

Calendar

Checkbox

Combobox

Field

Input

Input Group

Input OTP

Label

Native Select

Radio Group

Select

Slider

Switch

Textarea

Toggle

Toggle Group

Data Display

Accordion

Avatar

Badge

Carousel

Chart

Collapsible

Item

Kbd

Table

Feedback

Alert

Empty

Progress

Skeleton

Sonner

Spinner

Overlay

Alert Dialog

Context Menu

Dialog

Dropdown Menu

Hover Card

Popover

Sheet

Tooltip

Navigation

Breadcrumb

Command

Menubar

Navigation Menu

Pagination

Sidebar

Tabs

shadcn/ui docs

Chart

Beautiful and responsive charts built with Recharts.

Preview

Usage

<ui-chart-container json-config='{"desktop":{"label":"Desktop","color":"hsl(var(--chart-1))"},"mobile":{"label":"Mobile","color":"hsl(var(--chart-2))"}}'>
  <ui-bar-chart json-data='[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120}]'>
    <ui-cartesian-grid json-vertical="false" />
    <ui-x-axis dataKey="month" json-tickLine="false" json-axisLine="false" json-tickMargin="8" />
    <ui-chart-tooltip>
      <ui-chart-tooltip-content />
    </ui-chart-tooltip>
    <ui-bar dataKey="desktop" fill="var(--color-desktop)" json-radius="4" />
    <ui-bar dataKey="mobile" fill="var(--color-mobile)" json-radius="4" />
  </ui-bar-chart>
</ui-chart-container>

Sub-components

<ui-chart-container> <ui-chart-tooltip> <ui-chart-tooltip-content> <ui-chart-legend> <ui-chart-legend-content> <ui-bar-chart> <ui-line-chart> <ui-area-chart> <ui-pie-chart> <ui-radar-chart> <ui-radial-bar-chart> <ui-bar> <ui-line> <ui-area> <ui-pie> <ui-radar> <ui-radial-bar> <ui-x-axis> <ui-y-axis> <ui-cartesian-grid> <ui-polar-grid> <ui-polar-angle-axis> <ui-polar-radius-axis> <ui-cell> <ui-label-list>

Props

`<ui-chart-container>`

Prop	Type	Default	Description
`config`	`ChartConfig`	`—`	Chart configuration object. Use json-config for HTML.

`<ui-chart-tooltip-content>`

Prop	Type	Default	Description
`hideLabel`	`boolean`	`false`	Hide the label in the tooltip.
`hideIndicator`	`boolean`	`false`	Hide the indicator in the tooltip.

`<ui-bar-chart>`

Prop	Type	Default	Description
`data`	`object[]`	`—`	Chart data array. Use json-data for HTML.

`<ui-line-chart>`

Prop	Type	Default	Description
`data`	`object[]`	`—`	Chart data array. Use json-data for HTML.

`<ui-area-chart>`

Prop	Type	Default	Description
`data`	`object[]`	`—`	Chart data array. Use json-data for HTML.

`<ui-bar>`

Prop	Type	Default	Description
`dataKey`	`string`	`—`	The key of data for the bar.
`fill`	`string`	`—`	Fill color.
`radius`	`number`	`—`	Border radius.

`<ui-line>`

Prop	Type	Default	Description
`dataKey`	`string`	`—`	The key of data for the line.
`stroke`	`string`	`—`	Stroke color.

`<ui-area>`

Prop	Type	Default	Description
`dataKey`	`string`	`—`	The key of data for the area.
`fill`	`string`	`—`	Fill color.
`stroke`	`string`	`—`	Stroke color.

`<ui-pie>`

Prop	Type	Default	Description
`dataKey`	`string`	`—`	The key of data for the pie.
`data`	`object[]`	`—`	Pie data array. Use json-data for HTML.

`<ui-radar>`

Prop	Type	Default	Description
`dataKey`	`string`	`—`	The key of data for the radar.

`<ui-radial-bar>`

Prop	Type	Default	Description
`dataKey`	`string`	`—`	The key of data for the radial bar.

`<ui-x-axis>`

Prop	Type	Default	Description
`dataKey`	`string`	`—`	The key for axis labels.

`<ui-cartesian-grid>`

Prop	Type	Default	Description
`vertical`	`boolean`	`true`	Show vertical grid lines.
`horizontal`	`boolean`	`true`	Show horizontal grid lines.

`<ui-polar-angle-axis>`

Prop	Type	Default	Description
`dataKey`	`string`	`—`	The key for angle axis labels.

`<ui-cell>`

Prop	Type	Default	Description
`fill`	`string`	`—`	Fill color for the cell.

`<ui-label-list>`

Prop	Type	Default	Description
`dataKey`	`string`	`—`	The key of data for labels.
`position`	`string`	`—`	Label position.

All components also accept standard HTML attributes (class, id, style, data-*, aria-*, etc.) which are passed through to the underlying element.