shadcn-ui/ui codebase analysis: Mail example explained.
Tags: javascript, opensource, nextjs, shadcnui
Published: 2024-06-11 21:03:24

In this article, we will learn about [Mail](https://ui.shadcn.com/examples/mail) example in shadcn-ui/ui. This article consists of the following sections:

![](https://media.licdn.com/dms/image/D4E12AQFZZXYgYnwFYg/article-inline_image-shrink_1500_2232/0/1718139503786?e=1723680000&v=beta&t=JPpG6JT4XdZLZIASuZ8A5K2dxAcHtHUAOeBR8gWsRjY)

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](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/mail) is located in [examples](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples) folder, which is located in [(app)](https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)), [a route group in Next.js](https://medium.com/@ramu.narasinga_61050/app-app-route-group-in-shadcn-ui-ui-098a5a594e0c).

![](https://media.licdn.com/dms/image/D4E12AQFB8oLr7vzJCw/article-inline_image-shrink_1500_2232/0/1718139501677?e=1723680000&v=beta&t=C893ilHsQEujSHtXmyU1wdpxY6qrnOku_8K8eqISYrA)

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](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/page.tsx) is loaded in place of [{children} in examples/layout.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/layout.tsx#L55).

Below is the code picked from mail/page.tsx

```js
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:

![](https://media.licdn.com/dms/image/D4E12AQEcEvuSb_a-aA/article-inline_image-shrink_1000_1488/0/1718139502402?e=1723680000&v=beta&t=MxGqa0Liq0A0I100hjsP-9rok8-M6IImo16U6-IiVHo)

We saw that [Mail](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/mail.tsx) component is used in page.tsx, mail.tsx is modular as well, it uses [MailList](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/mail-list.tsx), [MailDisplay](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/mail-display.tsx).

MailList is found to be using a state management tool named [Jotai](https://jotai.org/).

![](https://media.licdn.com/dms/image/D4E12AQFRskunQW1d2Q/article-inline_image-shrink_400_744/0/1718139502308?e=1723680000&v=beta&t=PtoIvhRdcRGKYzGD_WiDfWyVBwd4HIDzErgQu8-SIWk)

State management with Jotai.
----------------------------

[use-mail.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/use-mail.ts) 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](https://medium.com/@ramu.narasinga_61050/mail-example-in-shadcn-ui-ui-manages-state-using-jotai-a59248b4fc6b), be sure to read it.

Components used in mail example.
--------------------------------

We saw [MailList](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/mail-list.tsx), [MailDisplay](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/mail-display.tsx), [AccountSwitcher](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/account-switcher.tsx) being used.

[Nav component](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/nav.tsx#L24) is used to show the list in the left sidebar

![](https://media.licdn.com/dms/image/D4E12AQEztZkZTw_y8g/article-inline_image-shrink_1000_1488/0/1718139502754?e=1723680000&v=beta&t=KbFsPa7l6CPd7yeoCTmSSJvJGbuHO3r6cepmJwAiuoE)

![](https://media.licdn.com/dms/image/D4E12AQHNOFFRjPLyDQ/article-inline_image-shrink_400_744/0/1718139502593?e=1723680000&v=beta&t=5z8E15PaCHUYiigDoUpJv7eHQjghW7XDMxr7CjYgJk8)

> _Want to learn how to build shadcn-ui/ui from scratch? Check out_ [_build-from-scratch_](https://github.com/Ramu-Narasinga/build-from-scratch) _and give it a star if you like it._ [_Solve challenges_](https://tthroo.com/) _to build shadcn-ui/ui from scratch. If you are stuck or need help?_ [_solution is available_](https://tthroo.com/build-from-scratch)_._

About me:
---------

Website: [https://ramunarasinga.com/](https://ramunarasinga.com/)

Linkedin: [https://www.linkedin.com/in/ramu-narasinga-189361128/](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [https://github.com/Ramu-Narasinga](https://github.com/Ramu-Narasinga)

Email: [ramu.narasinga@gmail.com](mailto:ramu.narasinga@gmail.com)

References:
-----------

1.  [https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/mail](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](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](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](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](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/mail/components/nav.tsx#L24)