Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Number Picker Integration Grid Block for React

An integration grid section for a clinic reminder tool connecting to Twilio: six available numbers as radio cards in shared hairlines, filtered by a segment group (All, Local, Toll-free) and an area-code combobox, with a polite status line that says how many show and which one is reserved.

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 integration grid section for React with Base UI, written for Chimewell, a fictional appointment-reminder tool for clinics, and its Twilio connection. A compact header carries the title, one sentence and the mark pair at its end. Under a band rule, two filters: a segment group for the kind of number (All, Local, Toll-free, each with its count) and a combobox for the area code. Under the next rule, six available numbers are radio cards in shared hairlines whose outer lines run past the rails: the number, where it is, what it can do (SMS, Voice, MMS) and an example monthly price. A filter greys no card: the cards that do not match stay in their cell, unseen and unreachable by keyboard, so the grid never moves. Choosing a card reserves that number in this demo; a polite status line says how many numbers show and which one is reserved, and a ghost Release button gives it back. The foot says what registration a number needs before it sends business texts. It's built from Guides, SegmentGroup, Combobox, Badge and Button, with native radio inputs and your theme's tokens for every colour. Twilio is named in text only: no Twilio logo, colour or wordmark ships with the block. The numbers use the 555-01xx range reserved for examples and the prices are examples.

FAQ

How do I change the numbers?

LINES holds each number: its area code, place, kind (local or toll-free), capabilities and an example price. The filter counts, the area-code list and every card come from it, so adding a line adds a card, an area code and a count.

Does reserving a number buy it?

No. Choosing a card changes the page and the status line says "Reserved in this demo"; nothing is bought from or sent to Twilio. Wire your own handler where the choice would call your API.

What happens to the card I picked when a filter hides it?

Your choice is kept and the status line still names it, so you can release it with the ghost button. The card itself is unseen while it does not match, like every other card that is filtered out.

How do keyboard and screen reader users work it?

The cards are a group of native radios named "Number to reserve": arrow keys move between the visible ones and Space chooses. The segment group and the combobox are labelled, and the status line is a polite live region present from load that announces how many numbers show and what is reserved.

Is the combobox the same on every base?

It filters the same way and takes the same choice on every target, but each library draws its own field and list. Clearing the field shows every number again.

How does it behave on a phone and in right-to-left layouts?

On a phone the filters stack above one column of cards and the Release button sits under the status line. In a right-to-left layout the block mirrors; the phone numbers and prices keep their own direction.

  • Pro

    Reminder Composer Integration Setup

    Choose and verify

    An integration setup section for a clinic reminder tool connecting to Twilio: a reminder template with {name} and {time} tokens, a live count of characters and SMS segments, an opt-out checkbox, a test number, a drawn preview and a Finish setup button that waits for the test.

  • Pro

    Reminder Thread Integration Detail

    With a product drawing

    An integration detail section for a clinic reminder tool connecting to Twilio: a reverse split with a patient's phone drawn in outline showing a reminder, a one-letter reply and the confirmation, a connect action, what it sends, reads and never reads, and three steps.

  • Pro

    Delivery Receipts Search Integration List

    Synced tables

    An integration list section for a clinic reminder tool connecting to Twilio: a real table of eight reminders with a four-tick delivery glyph and a word for each state, a reason in words for the ones that did not arrive, and a search that marks the matching characters.

  • Pro

    Retry Schedule Cards Integration

    Cards and previews

    An integration grid section for a failed-payment recovery tool connecting to Stripe: three radio cards in shared hairlines, each drawing its retry schedule on a 14-day line, with a check and an inset rule on the chosen one.

  • Pro

    Location Cards Grid Integration

    Switch and tick grids

    An integration grid section for a stock sync tool connected to Shopify: four locations as a 2 by 2 of hairline cells, each with units on hand, a bar of stock held back, a sync switch and a slider for the reserve per variant, and a tally worked out from them.

  • Pro

    Message Layouts Grid Integration

    Cards and previews

    An integration grid section for a spend approvals tool posting to Slack: a list of six message layouts beside a framed preview that draws the chosen one as a greyscale message, with a drawn app tile, text, facts and action chips.

All 100 integration blocks