shadcn-ui/ui codebase analysis: Mail example explained.

#javascript #opensource #nextjs #shadcnui

In this article, we will learn about Mail example in shadcn-ui/ui. This article consists of the following sections:

Where is mail folder located?
What is in mail folder?
State management with Jotai.
Components used in mail example.

Where is mail folder located?

Shadcn-ui/ui uses app router and mail folder is located in examples folder, which is located in (app), a route group in Next.js.

What is in mail folder?

As you can see from the above image, we have components folder, data.tsx, page.tsx, use-mail.tsx

page.tsx is loaded in place of {children} in examples/layout.tsx.

Below is the code picked from mail/page.tsx

import { cookies } from "next/headers"
import Image from "next/image"

import { Mail } from "@/app/(app)/examples/mail/components/mail"
import { accounts, mails } from "@/app/(app)/examples/mail/data"

export default function MailPage() {
  const layout = cookies().get("react-resizable-panels:layout")
  const collapsed = cookies().get("react-resizable-panels:collapsed")

  const defaultLayout = layout ? JSON.parse(layout.value) : undefined
  const defaultCollapsed = collapsed ? JSON.parse(collapsed.value) : undefined

  return (
    <>
      <div className="md:hidden">
        <Image
          src="/examples/mail-dark.png"
          width={1280}
          height={727}
          alt="Mail"
          className="hidden dark:block"
        />
        <Image
          src="/examples/mail-light.png"
          width={1280}
          height={727}
          alt="Mail"
          className="block dark:hidden"
        />
      </div>
      <div className="hidden flex-col md:flex">
        <Mail
          accounts={accounts}
          mails={mails}
          defaultLayout={defaultLayout}
          defaultCollapsed={defaultCollapsed}
          navCollapsedSize={4}
        />
      </div>
    </>
  )
}

I like the fact it is modular, page.tsx uses a component Mail, available in components folder.

Let’s take a closer look at what is inside the components folder:

We saw that Mail component is used in page.tsx, mail.tsx is modular as well, it uses MailList, MailDisplay.

MailList is found to be using a state management tool named Jotai.

State management with Jotai.

use-mail.tsx is a hook used to manage state in mail example, i.e., to switch between emails in the examples etc., I wrote a detailed article about state management with Jotai, be sure to read it.