shadcn.io is not affiliated with official shadcn/ui
Email Templates Carousel Block for React
Six drawn email templates in a rail with their sends and open rates beside a one-up stage that draws the same six large, with a Use template button that marks one as selected and sends nothing.
Installation
Overview
Let people pick a starting point by looking at it, with this email templates carousel for React with Base UI. Mailloom, an email composer, offers six templates (Welcome, Receipt, Password reset, Weekly digest, Invitation and Announcement), each drawn as a small layout with a masthead, a hero or a list, body lines and a button. A rail at the start lists them with the number sent and the open rate; a one-up stage at the end draws the same six large. A press on the rail goes to its template, a swipe or an arrow on the stage moves the ring, and the rail marks the one you chose with a Selected Badge. "Use template" is the block's one primary, a Shine Button: it selects the template and says so in the status line, "Welcome is selected in this demo, nothing was sent." On a phone the rail is a row above the stage. The ruled bands come from Guides. It's built from Carousel, Shine Button, Badge, Button and Guides, with CSS transitions only. The product, the counts and the drawings are made up for the example.
FAQ
How do I add my own templates?
Edit TEMPLATES. Each has an id, a name, a one-line purpose, a kind that picks its drawing, and typed sent and opened counts; the rail shows the sends to one decimal ("12.5K") and the open rate is opened over sent, computed by one helper. To add a layout, add a kind and a function beside welcomeOf; they return paths in a 100 by 120 box. To show real previews, put an img or an iframe where Letter is drawn.
What does Use template do?
It marks the template on the stage as selected: the rail row gets a Selected badge and the status line says which one. Nothing is created or sent, and choosing another template moves the badge. The status line shows the counter ("Receipt, template 2 of 6.") whenever the template on the stage is not the selected one.
How does it work with a keyboard?
Tab reaches the rail, then Previous, Next and Use template. With focus in the stage, the arrow keys move the templates (mirrored in a right-to-left layout) and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled. Templates out of view are hidden from the tab order and from screen readers, and the rail marks the one on the stage with the current state.