Email Composer
NewCustomize
Card delay350ms
Max file size25MB
Undo window5s
Installation
npx shadcn@latest add https://uibrik.com/r/email-composer.jsonInstall the packages
npm install @tabler/icons-react motion react-use-measureAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/email-composer/email-composer.tsx"use client"; import { useEffect, useId, useRef, useState, useSyncExternalStore, type DragEvent, type KeyboardEvent, type ReactNode, } from "react"; import { createPortal } from "react-dom"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { IconArrowBackUp, IconCheck, IconChevronDown, IconClock, IconCopy, IconFile, IconFileTypePdf, IconPaperclip, IconPhoto,
Adds the files to
components/uibrik/email-composer and installs @tabler/icons-react, motion and react-use-measure. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/email-composer.Usage
import { EmailComposer } from "@/components/uibrik/email-composer/email-composer";const defaultBody = "Hi both,\n\nAttached is the plan for the Q3 launch. Could you look through the timeline before Thursday? Happy to walk through it on a call.\n\nThanks!";const defaultAttachments = [{ name: "Q3 launch plan.pdf", size: 2_480_000, type: "application/pdf" }];<EmailComposer schedule hoverDelay={350} maxFileMB={25} undoSeconds={5} from="you@company.com" defaultTo={["elena@lumen.studio", "omar@northwind.io"]} defaultSubject="Q3 launch plan" defaultBody={defaultBody} defaultAttachments={defaultAttachments} onSend={(draft) => {}} // contacts={[{}]}/>Props
EmailComposer- schedule
- Type boolean
- true
- Arrow on the send button with presets and a custom time.
- hoverDelay
- Type number
- 350
- How long a pointer rests on a chip before its card opens.
- maxFileMB
- Type number
- 25
- Largest file that attaches.
- undoSeconds
- Type number
- 5
- How long Undo stays after sending.
- from
- Type string
- "you@company.com"
- Sender shown in the From row.
- contacts
- Type { name, email, avatar?, title?, company?, timeZone? }[]
- SAMPLE_CONTACTS
- People suggested while typing and shown on chip cards. `timeZone` (IANA) shows their local time.
- defaultTo
- Type string[]
- –
- Addresses in To on mount.
- defaultSubject
- Type string
- –
- Subject on mount.
- defaultBody
- Type string
- –
- Message on mount.
- defaultAttachments
- Type { name: string; size: number; type: string }[]
- –
- Files already attached on mount.
- onSend
- Type (draft: { to, cc, bcc, subject, body, attachments, scheduledAt: Date | null }) => void
- –
- Called when the message is sent or scheduled.
- className
- Type string
- –
- Classes for the outer shell. It's as wide as its parent, up to 42rem.
