Line Chart Components

Dev Design Library indexes 63 line chart components from 23 open-source UI libraries, with the most coming from Tremor Blocks, shadcn/ui, Shark UI, Spectrum UI and beUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Line chart components belong to the Data display group.

• Chart Line Defaultshadcn/ui · React
• Line ChartChakra UI · ReactUsed to display data points connected by straight line segments, showing trends and patterns in continuous data over…
• Line ChartTremor · React
• Forecast line chart with stripe pattern zoneReUI · ReactForecast line chart with stripe pattern zone
• Mono Rounded Line ChartAmicro Micro Transitions · React
• ChartsUntitled UI React · React
• Line ChartbeUI · ReactLine and area charts that morph with your data, with a snapping crosshair and value tooltips.
• ChartTailGrids · ReactA chart component with multiple variants.
• Indicator ChartSpectrum UI · ReactPrice, RSI and MACD stacked on one time axis with a single crosshair that reports all three panes at once.
• ChartSpell UI · ReactInteractive line chart with a cursor-tracked tooltip card, snap-to-point hover, and built-in X-axis labels.
• Line ChartPanel UI · React NativeAnimated time series, drawn on the UI thread.
• Heart Rate WidgetOpenSourceUI · React
• Heartbeat MonitorKinetics · HTML/CSSGlowing dot traces an EKG along the path
• Line ChartTremor Blocks · ReactThe base line chart component (Recharts): several series, legend, tooltip and axes. Componente base de gráfico de…
• ChartObsidianUI · React
• Chart Line DefaultShark UI · React
• Github Star HistorySona UI · React
• Typing SeismographUI Lab · ReactRecords the rhythm of your typing on a scrolling seismograph.
• ChartHextaUI · ReactRecharts charts with themed colors, a tooltip and legend that read labels from one config, and keyboard navigation…
• Chart ArtifactLocalMode · ReactA dependency-free inline-SVG chart (line / bar / area / scatter / radar / gauge) for local metrics — eval curves…
• Line chartCojeev UI · ReactTrack changes using linear, smooth or step lines with accessible point inspection.
• Traffic CardROI UI · ReactA website traffic card component with line chart and statistics.
• Line ChartReactFrame · ReactA multi-series line/area chart, smooth Catmull-Rom curves, a highlighted zone band, a reference line, endpoint value…
• Chart Line Dotsshadcn/ui · React
• Revenue Line ChartAmicro Micro Transitions · React
• Prediction Market CardbeUI · ReactA listing surface with outcome CTAs and an independent bookmark toggle.
• Line ChartSpectrum UI · ReactMulti-series lines with solid, dashed, bump, step, gradient, and glow strokes.
• Live Line ChartPanel UI · React NativeA reading that keeps arriving, against a window that keeps moving.
• Line Chart 01Tremor Blocks · React
• Chart Line DotsShark UI · React
• Chart Line Dots Colorsshadcn/ui · React
• Price Target FanbeUI · ReactOwns chart data and interaction; children may replace or rearrange the default parts.
• Portfolio ChartSpectrum UI · ReactAccount value against cost basis with drawdown from the running peak shaded underneath.
• Web Line ChartPanel UI · React NativeLine charts with drag to inspect, averages and replay.
• Line Chart 02Tremor Blocks · React
• Chart Line Dots ColorsShark UI · React
• Chart Line Dots Customshadcn/ui · React
• Prediction MarketbeUI · React
• Price ChartSpectrum UI · ReactTicker chrome with last price and signed delta. Use it for tokens, equities, or protocol TVL.
• Web Live Line ChartPanel UI · React NativeA live line chart that streams values in real time, such as requests per second.
• Line Chart 03Tremor Blocks · React
• Chart Line Dots CustomShark UI · React
• Chart Line Interactiveshadcn/ui · React
• Line Chart 04Tremor Blocks · React
• Chart Line InteractiveShark UI · React
• Chart Line Labelshadcn/ui · React
• Line Chart 05Tremor Blocks · React
• Chart Line LabelShark UI · React
• Chart Line Label Customshadcn/ui · React
• Line Chart 06Tremor Blocks · React
• Chart Line Label CustomShark UI · React
• Chart Line Linearshadcn/ui · React
• Line Chart 07Tremor Blocks · React
• Chart Line LinearShark UI · React
• Chart Line Multipleshadcn/ui · React
• Line Chart 08Tremor Blocks · React
• Chart Line MultipleShark UI · React
• Chart Line Stepshadcn/ui · React
• Line Chart 09Tremor Blocks · React
• Chart Line StepShark UI · React
• Line Chart 10Tremor Blocks · React
• Line Chart 11Tremor Blocks · React
• Line Chart 12Tremor Blocks · React

Libraries with line chart components

• Tremor Blocks
• shadcn/ui
• Shark UI
• Spectrum UI
• beUI

Related categories

• React Line Chart Components
• Tailwind CSS Line Chart Components
• Animated Line Chart Components
• Data Display Components
• Card Components
• Chart Components
• Table Components
• Avatar Components
• List Components
• Stat Components
• Calendar Components
• Accordion Components
• Data Table Components
• Carousel Components
• Collapsible Components
• Avatar Group Components
• Stat Card Components
• Bar Chart Components
• Tree View Components