Controls
Scroll Card List
Scrollable list of icon+label cards with a center-focus depth effect — the active item scales up while outer cards fade and shrink.
Installation
Coming soon. Components will be available via the registry once checkout goes live.
Usage
<ScrollCardList />
// or with custom cards:
<ScrollCardList
cards={[
{ id: "1", image: <MyIcon />, text: "Identity verification" },
{ id: "2", image: <MyIcon2 />, text: "Bank account" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | ScrollCardItem[] | — | Array of card items. Each item needs id, image, and text. Defaults to a built-in KYC step list. |
| cards[].id* | string | — | Unique React key. |
| cards[].image* | ReactNode | — | Icon or image rendered in the 44×44 px colored badge on the left. |
| cards[].text* | string | — | Label text for the card. |
| count | number | — | Slice cards to the first N items. |
| className | string | — | Tailwind classes merged onto the root container. |
Use cases
Onboarding step picker
Show the current step large in the center while past and future steps fade out — scroll to focus on any step.
Settings menu
A scrollable list of settings categories where the active section is always prominent.
KYC / verification flow
Surface which verification steps are pending with visual focus on the current step.
Feature picker
Let users scroll through feature tiers or plan add-ons with the focused option always readable.