Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when a shelf of cards is searchable: a labelled search field that filters the cards as you type, a polite "3 results" message, an empty state with a clear button and a carousel that starts again at the first match.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for shelves of 10 to 50 cards (templates, integrations, people) where finding one by name is faster than paging.
Do not use it for large catalogues; search belongs on a server with ranking, filters and pagination.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
cards | SearchCard[] | - | Each has an id, title, description and an icon or picture node. |
label | string | - | Accessible name of the carousel (the field is "Search <label>"). |
The pattern ships with a Testing Library test (searchable-cards-carousel.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.