Vela UI Docs
venizia.ai

Mail

A three-pane email client on the app shell: folder sidebar, a searchable and filterable message list, and a reading pane with attachments, reply and forward. Sample mailbox from the Appia frame.

Mail

@velaui/mail
@velaui/mailOpen Open
pnpm dlx velaui add @velaui/mail

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
  3. ButtonDisplays a button or a component that looks like a button.
  4. CheckboxA control that allows the user to toggle between checked and not checked.
  5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  6. SegmentedA set of mutually exclusive options inside a single inline container.
  7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  8. 28 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import Mail from "@/components/blocks/mail/mail";

export default function Page() {
  return <Mail />;
}

Mail Client

@velaui/mail-client
@velaui/mail-clientOpen Open
pnpm dlx velaui add @velaui/mail-client

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
  3. ButtonDisplays a button or a component that looks like a button.
  4. CheckboxA control that allows the user to toggle between checked and not checked.
  5. DialogA modal overlay for confirmations, decisions, and short flows.
  6. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  7. SegmentedA set of mutually exclusive options inside a single inline container.
  8. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  9. 50 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import MailClient from "@/components/blocks/mail-client/mail-client";

export default function Page() {
  return <MailClient />;
}

Mail Selected

@velaui/mail-selected
@velaui/mail-selectedOpen Open
pnpm dlx velaui add @velaui/mail-selected

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BreadcrumbDisplays the path to the current resource using a hierarchy of links.
  3. ButtonDisplays a button or a component that looks like a button.
  4. CheckboxA control that allows the user to toggle between checked and not checked.
  5. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  6. SegmentedA set of mutually exclusive options inside a single inline container.
  7. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  8. 40 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import MailSelected from "@/components/blocks/mail-selected/mail-selected";

export default function Page() {
  return <MailSelected />;
}