Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Day-Grouped Timeline Mailchimp Integration Block for React

An integration list for a signup-form tool writing to Mailchimp: subscriber events under day headings, a segmented filter that dims the rest, and Retry sync on the one write that failed.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration list section for React with Base UI, written for Wrenlist, a fictional signup-form and embed tool, and its Mailchimp connection. A compact header names the product and the service, with the mark pair (Wrenlist's own tile and Mailchimp's neutral lettermark tile) at its end. Under a band rule, a polite status line says what stays local beside a segmented filter, All and Needs attention, each with a count worked out from the rows. Nine subscriber events sit under three day headings, rail to rail: a glyph, the event in a word (Signed up, Confirmed, Unsubscribed, Bounced, Not written), an example address, the form it came from in code and a fixed UTC time. The filter dims the rows that don't match with a solid tint and never moves the page. One write timed out, so its row has Retry sync: the button reads Writing for about a second, then Written, in the same row height. Nothing is sent to Mailchimp. Mailchimp is named in text only, with no logo, colour or wordmark; the addresses, forms and events are example data. It's built from Guides, Segment Group and Button, with CSS transitions and your theme's tokens.

FAQ

Does Retry sync write to Mailchimp?

No. Retry sync turns the row's button to Writing for about 900 ms, then to Written, and the status line says so: "Nothing was sent to Mailchimp". To make it real, call your own endpoint from retry in the block, and set the row's phase from the result. The timer is cleared if the block unmounts, so a late timeout never updates a page that has gone.

Are these Mailchimp's own words?

The words follow what Mailchimp reports. A double opt-in signup waits as pending until the person clicks the confirmation link, an unsubscribe is the person's own choice and only they can resubscribe, and Mailchimp cleans an address after a hard bounce. Because a cleaned address can't be written again, only the timed-out write has a retry. Edit START to list the events your product records.

How does the filter keep the page still?

It dims rows rather than removing them. A row that doesn't match gets a solid five-percent tint and softer text, so every row keeps its height and the list never reflows. Needs attention counts the bounced and not-written rows, and the count follows the rows: it drops by one when the retry finishes.

How are the day headings made, and can they go stale?

Each heading is a fixed ISO day spelled by one Intl.DateTimeFormat in UTC, so "Wednesday, Oct 14" reads the same on the server and in every browser. Nothing is computed from today. Times are fixed UTC strings in a time element.

Can I show Mailchimp's logo?

The block names Mailchimp in text and ships no 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 mark only if you have the rights to use it under the owner's brand guidelines, and never redraw it.

How does it fit on a phone, in right-to-left layouts and with reduced motion?

On a phone each row stacks: the glyph, the event and address, then the form and time on a second line, with Retry sync at the row's end. In a right-to-left layout the columns flip while addresses, form names and times keep their own direction. The entrance is a CSS transition that is dropped under reduced motion.

  • Pro

    An integration setup for a signup-form tool connecting to Mailchimp: three steps (audience, consent, tags) beside the JSON request one signup would send, which changes as you choose.

  • Pro

    An integration stats section for a signup-form tool writing to Mailchimp: a bridge of floating bars from the opening audience through signups, resubscribes, unsubscribes and cleaned addresses to the closing figure.

  • Pro

    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.

  • Pro

    Mailchimp Grid Integration

    Cards and previews

    An integration grid section for a signup-form tool writing to Mailchimp: six welcome-journey cards apart on overshoot corners, each with a Switch and a drawn three-node flow (trigger, wait, email), and a derived tally of journeys on.

  • Pro

    An integration list for a meeting-notes tool writing to Notion: four pages edited in both places, each with its two values side by side and a segmented Keep choice, a derived count and a Resolve all button.

  • Pro

    Integration Log Changelog

    APIs and integrations

    Five connector changes as rows that run rail to rail and end the block, each with a neutral lettermark plate, a state badge, a day and a scopes popover listing what the connector reads and writes.