---
title: "UI Surfaces"
description: "The \"UI Surfaces\" within the Comp AI project primarily refer to the email templates and reusable components designed for transactional communications. These surfaces are built using React for Email..."
last_updated: "2026-05-06T07:29:41.65948+00:00"
canonical_url: "https://www.doc0.dev/docs/49c89830-117b-4def-8edc-b5bcc50766e0/technical/section-6/ui-surfaces"
---

<details>
<summary>Relevant source files</summary>

The following files were used as context for generating this wiki page:

- [README.md](https://github.com/blade47/comp/blob/main/README.md)
- [apps/api/src/email/components/footer.tsx](https://github.com/blade47/comp/blob/main/apps/api/src/email/components/footer.tsx)
- [apps/api/src/email/components/logo.tsx](https://github.com/blade47/comp/blob/main/apps/api/src/email/components/logo.tsx)
- [apps/api/src/email/templates/access-granted.tsx](https://github.com/blade47/comp/blob/main/apps/api/src/email/templates/access-granted.tsx)
- [apps/api/src/email/templates/task-item-assigned.tsx](https://github.com/blade47/comp/blob/main/apps/api/src/email/templates/task-item-assigned.tsx)
</details>

The "UI Surfaces" within the Comp AI project primarily refer to the email templates and reusable components designed for transactional communications. These surfaces are built using React for Email (`@react-email/components`) and styled with Tailwind CSS, enabling a consistent and branded user experience across various automated email notifications. They are located within the `apps/api/src/email` directory, indicating their role in the API application's communication layer.

These UI surfaces serve to inform users about critical events, such as granting access to compliance documentation or assigning tasks. By leveraging a component-based approach, the system ensures maintainability, reusability, and a standardized look and feel for all outgoing emails.

## Email Components

The email UI surfaces utilize a set of foundational React components to construct the email layouts. These components encapsulate common visual elements and styling, promoting consistency across different email templates.

### Logo Component

The `Logo` component is a simple, reusable element responsible for displaying the Comp AI brand logo at the top of email communications. It uses an `Img` tag from `@react-email/components` to embed the logo image.

```tsx
import { Img, Section } from '@react-email/components';

export function Logo() {
  return (
    <Section className="mt-[32px]">
      <Img
        src={'https://assets.trycomp.ai/logo.png'}
        width="45"
        height="45"
        alt="Comp AI"
        className="mx-auto my-0 block"
      />
    </Section>
  );
}
```
Sources: [apps/api/src/email/components/logo.tsx:1-14](https://github.com/blade47/comp/blob/main/apps/api/src/email/components/logo.tsx#L1-L14)

### Footer Component

The `Footer` component provides standard legal and branding information at the bottom of email templates. It includes a link to the Comp AI website and the company's physical address.

```tsx
import { Hr, Link, Section, Text } from '@react-email/components';

export function Footer() {
  return (
    <Section className="w-full">
      <Hr />

      <Text className="font-regular text-[14px]">
        AI that handles compliance for you -{' '}
        <Link href="https://trycomp.ai?utm_source=email&utm_medium=footer">Comp AI</Link>.
      </Text>

      <Text className="text-xs text-[#B8B8B8]">
        Comp AI | 2261 Market Street, San Francisco, CA 94114
      </Text>
    </Section>
  );
}
```
Sources: [apps/api/src/email/components/footer.tsx:1-18](https://github.com/blade47/comp/blob/main/apps/api/src/email/components/footer.tsx#L1-L18)

## Email Templates

The project includes specific email templates for different transactional purposes, each designed to convey particular information to the recipient. These templates integrate the reusable `Logo` and `Footer` components.

### Access Granted Email

The `AccessGrantedEmail` template is used to notify a user that they have been granted access to an organization's policy documentation. It provides details about the access, including the organization name, expiration date, and a direct link to view the documents.

#### Props

The `AccessGrantedEmail` component expects the following properties:

| Prop Name        | Type     | Description                                     |
| :--------------- | :------- | :---------------------------------------------- |
| `toName`         | `string` | The name of the recipient.                      |
| `organizationName` | `string` | The name of the organization.                   |
| `expiresAt`      | `Date`   | The date when the access will expire.           |
| `portalUrl`      | `string` | The URL to the portal where documents can be viewed. |

Sources: [apps/api/src/email/templates/access-granted.tsx:13-18](https://github.com/blade47/comp/blob/main/apps/api/src/email/templates/access-granted.tsx#L13-L18)

### Task Item Assigned Email

The `TaskItemAssignedEmail` template is sent to a user when they are assigned a new task within an organization. It includes information about the task, who assigned it, and a direct link to the task. It also provides an option for the user to manage their email preferences.

#### Props

The `TaskItemAssignedEmail` component expects the following properties:

| Prop Name        | Type     | Description                                     |
| :--------------- | :------- | :---------------------------------------------- |
| `toName`         | `string` | The name of the recipient.                      |
| `toEmail`        | `string` | The email address of the recipient, used for unsubscribe links. |
| `taskTitle`      | `string` | The title of the assigned task.                 |
| `assignedByName` | `string` | The name of the user who assigned the task.     |
| `organizationName` | `string` | The name of the organization where the task was assigned. |
| `taskUrl`        | `string` | The URL to view the assigned task.              |

The template also utilizes the `getUnsubscribeUrl` function from the `@trycompai/email` package to generate a dynamic unsubscribe link.
Sources: [apps/api/src/email/templates/task-item-assigned.tsx:17-24](https://github.com/blade47/comp/blob/main/apps/api/src/email/templates/task-item-assigned.tsx#L17-L24), [apps/api/src/email/templates/task-item-assigned.tsx:26](https://github.com/blade47/comp/blob/main/apps/api/src/email/templates/task-item-assigned.tsx#L26)

## Architecture and Design

The email UI surfaces are built upon a modern web development stack tailored for email rendering:

*   **@react-email/components**: This library allows developers to write email templates using React, providing a familiar component-based approach and abstracting away the complexities of cross-client email compatibility.
*   **Tailwind CSS**: Integrated via the `Tailwind` component from `@react-email/components`, it enables utility-first styling directly within the React components, ensuring responsive and consistent designs.
*   **Custom Fonts**: The `Geist` font is specified for use in the emails, with `Helvetica` as a fallback, to maintain brand aesthetics.
*   **Monorepo Structure**: The email components and templates are part of the `apps/api` application, suggesting they are rendered server-side as part of API-triggered workflows.

### Email Template Composition

The following diagram illustrates how the email templates are composed from shared components.


Sources: [apps/api/src/email/templates/access-granted.tsx:1-18](https://github.com/blade47/comp/blob/main/apps/api/src/email/templates/access-granted.tsx#L1-L18), [apps/api/src/email/templates/task-item-assigned.tsx:1-24](https://github.com/blade47/comp/blob/main/apps/api/src/email/templates/task-item-assigned.tsx#L1-L24), [apps/api/src/email/components/logo.tsx:1-14](https://github.com/blade47/comp/blob/main/apps/api/src/email/components/logo.tsx#L1-L14), [apps/api/src/email/components/footer.tsx:1-18](https://github.com/blade47/comp/blob/main/apps/api/src/email/components/footer.tsx#L1-L18)

### Email Rendering Flow

The general flow for rendering and preparing an email for dispatch involves several steps, from data provision to final HTML generation.


Sources: [apps/api/src/email/templates/access-granted.tsx](https://github.com/blade47/comp/blob/main/apps/api/src/email/templates/access-granted.tsx), [apps/api/src/email/templates/task-item-assigned.tsx](https://github.com/blade47/comp/blob/main/apps/api/src/email/templates/task-item-assigned.tsx)

<Callout title="Email Package" variant="info">
The `TaskItemAssignedEmail` template imports `getUnsubscribeUrl` from `@trycompai/email`. This indicates the presence of a dedicated package for email-related utilities, which likely handles common email functionalities beyond just rendering, such as generating unsubscribe links.
</Callout>
Sources: [apps/api/src/email/templates/task-item-assigned.tsx:10](https://github.com/blade47/comp/blob/main/apps/api/src/email/templates/task-item-assigned.tsx#L10)

## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/49c89830-117b-4def-8edc-b5bcc50766e0/llms.txt) for all pages in this wiki.