Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Growth Line Metric Logos Block for React

A team count with a hand-drawn growth line over eight quarters and a last-quarter chip, in an inset frame for an energy-monitoring tool, with six customer wordmarks closing the panel.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A growth metric for React with Base UI. A compact header, "More sites watch their energy every quarter", sits over a card in card: a tinted shell with + marks on its corners around a raised panel that is light on a light page and dark on a dark one. The panel splits at a hairline. At the start is the count, 4,100 teams, with a chip for the last quarter's growth. At the end is a line chart of teams over eight quarters, drawn by hand in SVG: an area under the line, faint grid lines, a dot on the last point and the quarters labelled underneath. Six customer wordmarks close the panel in cells that share their hairlines. On a phone the chart sits under the count and the wordmarks are two across. Built from Frame, Guides, Badge and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. Made for a growth story that wants a number and its curve side by side.

FAQ

How do I change the chart's data?

Edit QUARTERS at the top of the file: each entry is a label and a teams count. The line, the area, the dot, the headline number and the growth chip are all computed from that list (the last two entries are PREVIOUS and FINAL), so they always agree. Set CHART_TOP to a round figure a little above your largest count.

How is the chip's percentage worked out?

It is the last quarter's count against the one before, in whole percent, from FINAL and PREVIOUS: 4,100 against 3,100 is a rise of 32%. The sign and the number sit in a bdi element so a right-to-left layout keeps "+32%" in reading order. The chip is a neutral outline badge with a trend icon, not a green one, because growth is not a status.

How does a screen reader get the chart?

The chart is a single image named by its data: "Teams on Rushlight at the end of each quarter: Q1 220, Q2 410" and on through Q8, so every point is read out. The drawing, the grid and the labels are hidden from assistive technology, and a visible caption says what the chart shows.

What happens in a right-to-left layout?

The chart keeps its direction: time runs the same way in every language, as a time series should, so the dot always sits on the newest quarter. The count, the chip and the panel mirror as usual.

Why is the panel not dark?

The block follows your theme: the panel is light on a light page and dark on a dark one, because it uses the theme's card colour and no fixed colour. Its emphasis comes from structure instead: a tinted shell, a raised panel with a ring and a shadow, and + marks on the shell's corners.

What moves, and what happens with reduced motion?

The header and the panel fade up once when the page loads, with CSS transitions, and each wordmark's colour eases on hover. The chart does not animate. With reduced motion the transitions are off and the section simply appears.

  • Pro

    Metric Hero Strip Logos

    Metrics

    A giant static member count for a loyalty platform under a centred header with two buttons, then a band of three secondary figures and a closing strip of eight customer wordmarks.

  • Pro

    Ring Chart Metric Logos

    Metrics

    A retention ring for an expense-report tool in a framed figure beside the claim and three supporting facts, with a closing strip of six customer wordmarks.

  • Pro

    Animated Counter Logos

    Metrics

    One big count that rolls up once when it scrolls into view, for a meal-kit service that sells to employers, with a closing strip of six employer wordmarks.

  • Pro

    Statement Metric Hero Logos

    Metrics

    A count written as one display-size sentence for a referral-program tool, its two figures marked by a highlighter, with one Shine Button and a tray of six customer wordmarks.

  • Pro

    Bento Sparkline Logos

    Bentos

    A bento for a data warehouse in a card-in-card shell: four customers that each show the drop in slow queries as a figure and a falling trend line, beside one customer story set at the end.

  • Pro

    Metric Trio With Logo Strip Logos

    Metrics

    A benchmark for a streaming-analytics tool: three tiles that set the product against the industry average with a large figure and two bars each, a header row with two buttons, and a closing strip of eight wordmarks.

All 100 logos blocks