shadcn.io is not affiliated with official shadcn/ui
Intercom Rules Grid Integration Block for Vue
An integration grid for a conversation-routing tool and Intercom: six if-then rule cards on shared hairlines, each with a switch, an IF row, an arrow and a THEN row of tags, teams and notes.
Installation
Overview
An integration grid for Vue with Ark UI, written for Inboxlane, a fictional tool that tags and routes conversations, and the six rules it can apply in Intercom. A compact header, then a band under its own rule with a polite tally ("4 of 6 rules on") and the mark pair, then six cells on shared hairlines. Each cell is one rule: its name with a switch, an IF row (what a message or a contact has to match, with the words in code) joined by a short arrow to a THEN row of what it applies, each action a chip with an icon and a word (Tag, Assign, Note). Turning a rule off draws its chips with dashed outlines and says Off in words. The switches change local state only: nothing is sent to Intercom, and the status line says so from the start. There is no stepper and no sequence of steps: a rule is one condition and its actions. On a phone the cells stack in one column. The block ends on its last row of cells. Intercom is named in text only: no logo, colour or wordmark ships. The rules are example data.
FAQ
How do I change the rules?
Edit RULES at the top of the file. Each has a name, a when phrase, optional terms (shown in code, left to right in any layout) and actions, built with the tag, assign and note helpers, and start says whether it begins on. The tally counts the switches that are on, so it follows whatever you list. Keep the actions to what your integration can really do in Intercom: tag a conversation, assign it to a team, add a note.
What does turning a rule off do?
It changes local state only. The switch's label reads "Rule on: Refund requests" for assistive technology, the word On or Off beside it is for sighted users, the chips go dashed, and the tally above updates in a polite status line. Wire toggle to your own endpoint to save the choice.
Does anything reach Intercom?
No. The status line says "Nothing is sent to Intercom from this demo". The block is a picker: it holds which rules are on and nothing else.
How do I use it for another service or product?
The product is PRODUCT and the service is SERVICE, a name and a two-letter mark for its lettermark tile, typed rather than worked out from the name. MarkTile carries a comment where your own logo goes; never redraw a brand's logo. Then rewrite the rules in your service's terms.
How does it fit a phone, right-to-left layouts and reduced motion?
The grid is three columns from lg, two from sm and one on a phone, in shared hairlines with no card edges. In a right-to-left layout the cells and their order flip while the code terms keep their direction, and the arrow points down so it does not mirror. The header fades up once on load, and not at all with reduced motion.