DEV Community

Cover image for shadcn-ui/ui codebase analysis: Mail example explained.
Ramu Narasinga
Ramu Narasinga

Posted on • Edited on

1

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

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

  1. Where is mail folder located?
  2. What is in mail folder?
  3. State management with Jotai.
  4. 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>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

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

Get free courses inspired by the best practices used in open source.

About me:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Email: ramu.narasinga@gmail.com

Learn the best practices used in open source.

References:

  1. https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/mail
  2. https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/page.tsx
  3. https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/mail.tsx
  4. https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/mail-display.tsx
  5. https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/nav.tsx#L24

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more