shadcn.io is not affiliated with official shadcn/ui
Mailchimp Detail Integration Block for Ark UI
An integration detail section for a signup-form tool connecting to Mailchimp: a three-step timeline, the Connect Mailchimp Shine Button, and a framed panel of real tabs (Reads, Writes, Never) listing the audience fields touched.
Installation
Overview
An integration detail section for React with Ark UI, written for Wrenlist, a fictional signup-form and embed tool, and its Mailchimp connection. A split sits behind a divider that runs from the top rule to the block's foot. At the start are the title ("Wrenlist for Mailchimp") with one sentence, a three-step timeline on a vertical rail (a visitor submits a form, Wrenlist writes the subscriber, a welcome journey starts), then the mark pair (Wrenlist's own tile and Mailchimp's neutral lettermark tile), the Connect Mailchimp Shine Button and a View docs link. At the end, one framed panel holds real tabs: Reads (audiences, merge fields, the double opt-in setting, one member by email), Writes (email address and status, names, tags, signup details, marketing permissions) and Never (send a campaign, edit journeys, delete a member, re-subscribe someone, read other audiences). Each row names the audience field in code and says why. The three panels share one height, so switching tabs never moves the page, and a note says Mailchimp has no scope list, so the Never list is Wrenlist's own promise. On a phone the parts stack in reading order. The block has no state of its own and ends on content, so no rule closes it. It's built from Guides, Tabs, Button and Shine Button, with your theme's tokens for every colour. Mailchimp is named in text only: no Mailchimp logo, colour or wordmark ships with the block. The product and its lists are example data.
FAQ
Are the field names real Mailchimp ones?
Yes. status takes pending (Mailchimp sends the double opt-in confirmation email) or subscribed; merge_fields holds merge tags such as FNAME and LNAME, the default fields a new audience starts with; tags, ip_signup, timestamp_signup and marketing_permissions are fields of a list member; and double_optin is a setting on the audience. Subscribers are written to /lists/{list_id}/members/{subscriber_hash}, where the hash is the MD5 of the lowercase email address. Edit GROUPS at the top of the file to match exactly what your integration calls.
Why does the note say Mailchimp has no scope list?
Mailchimp's OAuth 2 sign-in doesn't ask for scopes the way some services do. What an app can do follows the role of the person who connects it, and Mailchimp answers an action that role doesn't permit with a 403. So the Never tab can't be a list of scopes the app didn't request: it is your own promise about what the integration does, and the note says so.
Where should Connect Mailchimp go?
Both buttons are links (href="#"). Point Connect Mailchimp at your Mailchimp OAuth authorize address and View docs at your setup guide. Nothing connects, signs in or sends anything from the block itself. Connect Mailchimp is a Shine Button, the block's one primary action; View docs is an outline button.
Both buttons take asChild with the link inside, so it can be your router's link.
Can I show Mailchimp's logo?
The block names Mailchimp in text, the way any integration page says what it works with, and ships no Mailchimp logo, colour or wordmark. Its tile is a neutral lettermark, Mc in a muted square, in an icon slot that a code comment marks: drop in the official logo only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The pair is hidden from assistive technology because the heading already names both.
How does it work with a keyboard and a screen reader?
The tabs are real tabs with panels: arrow keys move between Reads, Writes and Never, and each panel is a list. The tab names carry their counts. The timeline is an ordered list and the mark pair is hidden because the heading names both products.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
Below lg the divider gives way to a rule and the parts stack: header, timeline, mark pair and buttons, then the tabs. Fields and API names keep their left-to-right order in a right-to-left layout while the rows flip. The header and buttons fade up once on load; with reduced motion they simply appear.