shadcn.io is not affiliated with official shadcn/ui
Split Searchable Integration Grid CTA Block for Radix UI
A reverse split CTA for an automation platform: a search field over a 3 by 3 grid of integrations in cells that share hairlines, flush to the rail, beside a Shine Button. A search that finds nothing offers to request that tool.
Installation
Overview
A split call to action for a product that plugs into other tools, for React with Radix UI, drawn between solid rails. The visual comes first at the start and runs flush to the rail: a search field over a grid of nine tiles, each with a generic tool's icon and name, in cells that share one-pixel hairlines, ruled from the field by a line with + marks. Past a solid divider that meets the top rule, the headline, a line that points to the search and a Shine Button to browse every integration sit at the end; on a phone the text comes first. Typing filters the tiles as you go, matching both the names and a few related words, and the cells the search leaves empty stay as blank cells so the grid keeps its shape. A search that finds nothing turns the grid into an empty state that offers to request that exact tool. The product is Stitchwork, a made-up automation platform. For platforms, automation tools, developer products and any pitch built on how well it connects.
FAQ
How do I change the tools, and what do searches match?
Edit TOOLS at the top of the file: each tool has a lucide icon, a name and keywords, other words that should find it (searching "repo" finds Git, "inbox" finds Email). A search matches any part of the name or the keywords, ignoring case. Point each tile's href at that integration's page. The tiles are generic on purpose, so swap in your own connectors.
What happens when nothing matches?
The tiles give way to an empty state in the same space, so the block does not jump: it says nothing is called what was typed, and offers a button that reads Request followed by the search in quotes. Pressing it notes the request and shows a confirmation line under the button. A search longer than 18 characters (MAX_SHOWN) is cut with an ellipsis in the title and the button, and never in the field. Clearing or changing the search brings the tiles back.
How do I send the request somewhere?
The request function in the block only remembers the term, so the confirmation can show. Replace its body with a call to your own endpoint, such as a form handler or a feature-request board, and send the trimmed search with it. Keep the confirmation line so the visitor knows it went through.
How is the search announced to a screen reader?
The field is named Search integrations. A visually hidden status line, which stays in the page, says how many integrations match as the visitor types ("3 integrations match"), that nothing matches, and that a request was noted, so the changes are announced without moving focus. The tiles are links in a list, each named by its tool, and the empty state's button is a real button.
How does it fit a phone?
The parts stack below the lg breakpoint, with the text first and the search and the tiles under it. The grid stays three cells wide down to 320 px, with names that truncate rather than wrap, and the empty state's button truncates a long request. The area keeps the height of three full rows while you filter, so nothing below it moves.