Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Share Bar Customer Segments Block for React

A framed 100% bar of a customer base in three segments, with one column per segment saying who they are, how big they are and what they use.

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 customer-segments block for React with Base UI, written for Plumeline, a fictional lifecycle-email service for online businesses. Under a compact header, a framed bar shows how 4,800 senders divide into Solo shops, Growing teams and Large lists. Each share is a whole number worked out by the largest-remainder method, so the three always add to 100. Below the bar, the three segments are columns in the bar's own order, each headed by the bar's label and described by a short list: who they are, how big they are and what they use. From lg the columns are cells whose lines overshoot their corners; below it they are bands ruled from rail to rail. A quiet line and a link close the block. It is static, built from Guides, and every figure is example data.

FAQ

How are the shares worked out?

Each segment's count is divided by the total and its share rounded down. The points left over then go, one each, to the segments with the largest remainders, so the whole numbers add to exactly 100. Change the counts in SEGMENTS and the bar, its label and the columns all follow.

How does a screen reader get the bar?

The bar is a single image with a name that lists every segment and its share, and the same numbers are text in each column. Nothing is only in the colour: segments differ in weight, and each column starts with its own name.

Can I use two or four segments?

Yes. The bar sizes each part from its share, and the columns come from the same array. The grid is written for three columns on wide screens, so for another count change lg:grid-cols-3 to match.

What happens on a phone?

The bar stays whole and readable, then the columns stack as bands, each ruled from rail to rail, in the same order as the bar.

Does it work in a right-to-left layout?

The columns and text mirror. The bar keeps its own direction, because it is a chart, and the percentages and counts stay in reading order.

Are the numbers real?

No. Plumeline and its customers are fictional and the figures are example data for the layout.

  • Pro

    Select Industries Served

    Customers

    A Select of six industries that drives one panel: the count of businesses, three use cases and the featured names, with the page holding its height.

  • Pro

    Hover Card Customer Logos

    Customers

    Twelve drawn customer wordmarks for a parcel-logistics company in cells that share their hairlines, each opening a hover card with the shop's trade, how long it has been a customer and what it sends.

  • Pro

    Drawn Bento Use Cases

    Customers

    A bento of four use cases in shared hairlines, each with a small greyscale drawing of its screen, a badge, a title, one line and a metric.

  • Pro

    Mention Tally Customer Love

    Customers

    What customers mention most for a review-monitoring tool: six themes ranked with a bar to scale and a count, each opening two word-for-word snippets, with the tally derived from the typed reviews.

  • Pro

    Two Panel Split Logos

    Customers

    Customers of a billing product in two equal panels behind a split divider: Startups and Enterprises, each with a count, a sentence about how it uses the product and a three-by-three wall of drawn wordmarks.

  • Pro

    Snap Row Case Study Cards

    Customers

    A scroll-snap row of five case-study covers, each with a drawn wordmark, a giant result figure, two tags and a link, and a wider first card.

All 150 about blocks