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

Blog

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.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

Insights from Open Source projects

Best practices used in open-source are explained, compared among multiple projects.

Study the codebase architecture and level up your skills.