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.

Components used in mail example.

We saw MailList, MailDisplay, AccountSwitcher being used.

Nav component is used to show the list in the left sidebar

Want to learn how to build shadcn-ui/ui from scratch? Check out build-from-scratch and give it a star if you like it. Solve challenges to build shadcn-ui/ui from scratch. If you are stuck or need help? solution is available.