0
Sponsor

Timelines

Timeline components for changelogs, payment history, and event sequences.

Cards Timeline

Installation

$ pnpm dlx shadcn@latest add @emailcn/cards-timeline

Usage

import { CardsTimeline } from "@/components/emails/marketing/timelines/cards-timeline";
<CardsTimeline {...CardsTimeline.PreviewProps} />

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeEmail theme styling

Changelog Boxed

Installation

$ pnpm dlx shadcn@latest add @emailcn/changelog-boxed

Usage

import { ChangelogBoxed } from "@/components/emails/marketing/timelines/changelog-boxed";
<ChangelogBoxed {...ChangelogBoxed.PreviewProps} />

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeEmail theme styling

Changelog

Installation

$ pnpm dlx shadcn@latest add @emailcn/changelog

Usage

import { Changelog } from "@/components/emails/marketing/timelines/changelog";
<Changelog {...Changelog.PreviewProps} />

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeEmail theme styling

Payment Timeline

Installation

$ pnpm dlx shadcn@latest add @emailcn/payment-timeline

Usage

import { PaymentTimeline } from "@/components/emails/marketing/timelines/payment-timeline";
<PaymentTimeline {...PaymentTimeline.PreviewProps} />

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeEmail theme styling

Split Cards

Installation

$ pnpm dlx shadcn@latest add @emailcn/split-cards

Usage

import { SplitCards } from "@/components/emails/marketing/timelines/split-cards";
<SplitCards {...SplitCards.PreviewProps} />

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeEmail theme styling

Stacked Boxed Timeline

Installation

$ pnpm dlx shadcn@latest add @emailcn/stacked-boxed-timeline

Usage

import { StackedBoxedTimeline } from "@/components/emails/marketing/timelines/stacked-boxed-timeline";
<StackedBoxedTimeline {...StackedBoxedTimeline.PreviewProps} />

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeEmail theme styling

Stacked Timeline

Installation

$ pnpm dlx shadcn@latest add @emailcn/stacked-timeline

Usage

import { StackedTimeline } from "@/components/emails/marketing/timelines/stacked-timeline";
<StackedTimeline {...StackedTimeline.PreviewProps} />

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeEmail theme styling