Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Select Industries Served Block for React

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.

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

An industries block for React with Base UI, written for Sectorly, a fictional field-service app for crews on the road. A split under a shared top rule: the start column holds the title, an Industry Select of six trades and a live count of the businesses in the one chosen; the end column, behind a split divider, is a single panel with that industry's three use cases and the businesses featured in it, as plain text. All six panels sit in one grid cell, the chosen one visible and the rest unseen, so choosing an industry never moves the page. It is built from Select and Guides. Businesses and figures are example data.

FAQ

How does choosing an industry work?

The Select holds the chosen id in state. The count and its sentence follow it, and the panel for that id becomes visible while the others stay unseen in the same grid cell.

Why does the page not move when I change industry?

All six panels share one grid cell, so the cell is always as tall as the tallest panel. The ones not showing are invisible and inert, so they can't be reached or read.

Is the change announced?

Yes. The count and its sentence are a polite status region, so a screen reader reads the new industry's figure when you choose it.

Does it behave the same on every base?

The Select is each base's own, so the popup, its keyboard handling and the value it reports differ underneath, and the block adapts to each. What you see and what the keyboard does is the same: open it, move with the arrows and choose with Enter.

Are the featured businesses real?

No. They are invented names shown as plain text, never as logos, and the counts are example data.

What does it do on a phone?

The columns stack: title, Select and count first, then the panel under a rule.

  • 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

    Share Bar Customer Segments

    Customers

    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.

  • 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

    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.

  • Pro

    Client Results Table About

    Customers

    A framed table across five shop clients for an A/B testing tool: what was tested, before and after, and the improvement computed as a chip with an arrow and a sign, with a ringed row on hover and focus.

  • Pro

    Topic Select FAQ

    Topics and filters

    A short FAQ for a bike-share with a topic Select at the end of its header: choose a topic and its questions fill the rows below, or choose All topics for all twelve.

All 150 about blocks