Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Number Picker Integration Grid Block for Svelte

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 Svelte with Ark 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.

All 100 integration blocks