shadcn.io is not affiliated with official shadcn/ui
Split Searchable Integration Grid CTA Block for React
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 Base 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.
Related
- Pro
Centered Category Tile Grid CTA
With a closing bandA centred statement CTA for a template gallery between solid rails: a headline, a sentence with the total and the Shine Button, then a closing band of eight category tiles on shared hairlines, each with its own SVG wireframe, a name and a template count.
- Pro
Split Attribution Window CTA
Pickers and togglesA reverse split call to action for a partner program: a slider tool in a hairline frame that shows whether a referral still counts on the day a visitor buys, beside the pitch, four benefits and a Shine Button.
- Pro
Split Before and After List CTA
Lists and stepsA split call to action for a code reviewer: the pitch with a Shine Button and an outline button, beside a panel flush to the rail that sets the old way beside the new one in three ruled rows.
- Pro
Centered Integration Grid Hero
Logos and social proofA centered showcase hero for a workflow tool: an announcement link, two calls to action and the integration directory as a framed panel of twelve tiles that share their hairlines.
- Pro
Split Integration Flow Hero
Diagrams and mapsA split hero for a metrics pipeline: the headline and a Shine Button beside a divider and a flow diagram in a hairline frame, with a closing band of three proof cells.
- Pro
Centered Tech Icon Row Hero
Logos and social proofA showcase centered hero for an integrations story, with a headline, a sentence, a Shine Button and six tool tiles below on shared hairlines, each with what the product does with the tool.