Email Viewer
retab-ui/email-viewerFreeComponent
Render recursive MIME messages with headers, CID inline resources, nested messages, and File Viewer leaves.
Install it
npx shadcn@latest add https://ui.retab.com/r/email-viewer.jsonSource
1"use client";23import * as React from "react";4import { FileText, Layers3, Mail, Paperclip } from "lucide-react";56import { cn } from "@/lib/utils";78import { useEmailInlineResourceUrls } from "./email-viewer-inline-resources";9import {10 buildMimeTree,11 deriveEmailInlineResourceScope,12 deriveEmailViewerModel,13 findMimeNodeByPath,14 getDefaultMimeSelectionPath,15} from "./email-viewer-model";16import type {17 EmailAddress,18 EmailContentModel,19 EmailHeaderModel,20 EmailSidebarItem,21 EmailSidebarModel,22 EmailViewerMessage,23 EmailViewerModel,24 EmailViewerProps,25 EmailViewerProviderProps,26 MimePartNode,27 MimePartPath,28} from "./email-viewer-types";29import { FileThumbnail } from "./file-thumbnail";30import { FileViewerPreview } from "./file-viewer";31import {32 ViewerBody,33 ViewerHeader,34 ViewerRoot,35 ViewerSidebar,36 ViewerSidebarTrigger,37 ViewerSurface,38} from "./viewer";39import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect";40import { joinEffectKey } from "@/lib/effect-key";4142export type {43 EmailAddress,44 EmailAttachmentSidebarItem,45 EmailBodySelectionPolicy,46 EmailBodySidebarItem,47 EmailContentEmpty,48 EmailContentEmptyReason,49 EmailContentFile,50 EmailContentModel,51 EmailContentNestedMessage,52 EmailFilePayload,53 EmailHeaderModel,54 EmailInlineResource,55 EmailInlineResourceKey,56 EmailInlineResourceScope,57 EmailSidebarItemBase,58 EmailSidebarItem,59 EmailSidebarModel,60 EmailSidebarSection,61 EmailSidebarThumbnailModel,62 EmailViewerMessage,63 EmailViewerModel,64 EmailViewerProviderProps,65 EmailViewerProps,66 MimeHeader,67 MimeMessage,68 MimeMessageScope,69 MimePart,70 MimePartDisposition,71 MimePartFacts,72 MimePartKind,73 MimePartNode,74 MimePartPath,75 MimePreviewPolicy,76} from "./email-viewer-types";7778export {79 EmailResourceContent,80 type EmailResourceContentProps,81} from "./email-viewer-content";8283export { parseEmlMessage, type ParseEmlOptions } from "./email-viewer-eml";8485export {86 buildMimeTree,87 categoryForMimeNode,88 createMimeMessageScope,89 DEFAULT_EMAIL_BODY_SELECTION_POLICY,90 deriveEmailContentModel,91 deriveEmailHeaderModel,92 deriveEmailInlineResourceScope,93 deriveEmailSidebarModel,94 deriveEmailViewerModel,95 findMimeNodeByPath,96 getDefaultMimeSelectionPath,97 getInlineResourceScope,98 inlineResourceKeyToString,99 isAttachmentNode,100 isInlineResourceNode,101 isMessageNode,102 isMultipartNode,103 isRenderableNode,104 normalizeContentId,105 normalizeContentLocation,106 pathsEqual,107 replaceCidUrls,108// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from retab-ui
All 130 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Alertalert | retab-ui | Components | Free | 1 dep | |
| Alert Dialogalert-dialog | retab-ui | Components | Free | 1 dep | |
| Aspect Ratioaspect-ratio | retab-ui | Components | Free | no deps | |
| Attachment Sidebarattachment-sidebar | retab-ui | Components | Free | 1 dep | |
| Autocompleteautocomplete | retab-ui | Components | Free | 2 deps | |
| Calendarcalendar | retab-ui | Components | Free | 2 deps | |
| Code Viewercode-viewer | retab-ui | Components | Free | 2 deps · 32 files | |
| Commandcommand | retab-ui | Components | Free | 2 deps |
