“Mail” example in shadcn-ui/ui manages state using Jotai.
Tags: javascript, jotai, opensource, nextjs
Published: 2024-05-31 21:31:17

Since I am building shadcn-ui/ui from scratch and also documenting how to do so alongside, I am aware that it will take quite some time to understand the code and write it from scratch and prepare the content. I am not rushing the process by directly copying and pasting, instead I am trying to understand the concepts, code, patterns and strategies that can be applied in other projects. This is how I picked up that [“mail” example](https://ui.shadcn.com/examples/mail) in shadcn-ui/ui uses [Jotai](https://jotai.org/) for state management.

In this article, you will learn the below concepts:

1.  What is Jotai?
2.  Jotai usage example.
3.  Jotai configuration in Next.js
4.  How is the Jotai configured in Shadcn-ui/ui?
5.  How is Jotai used in Shadcn-ui/ui?

What is Jotai?
--------------

[Jotai](https://jotai.org/) is a primitive and flexible state management library for React and is written by [Daishi Kato](https://x.com/dai_shi), also the maintainer of [zustand](https://github.com/pmndrs/zustand). Jotai takes an atomic approach, meaning you will create primitive and derived atoms to build state.

> [_Build shadcn-ui/ui from scratch._](https://tthroo.com/)

Jotai usage example.
--------------------

### Primitive atoms:

```
import { atom } from 'jotai'

const countAtom = atom(0)

const countryAtom = atom('Japan')

const citiesAtom = atom(\['Tokyo', 'Kyoto', 'Osaka'\])

const animeAtom = atom(\[
  {
    title: 'Ghost in the Shell',
    year: 1995,
    watched: true
  },
  {
    title: 'Serial Experiments Lain',
    year: 1998,
    watched: false
  }
\])
```

### Derived atoms:

```
const progressAtom = atom((get) => {
  const anime = get(animeAtom)
  return anime.filter((item) => item.watched).length / anime.length
})
```

Jotai configuration in Next.js
------------------------------

### Next.js (app directory)

Create the provider in a separate client component. Then import the provider into the root layout.js server component.

```
// ./components/providers.js
'use client'

import { Provider } from 'jotai'

export const Providers = ({ children }) => {
  return (
    <Provider>
      {children}
    </Provider>
  )
}


// ./app/layout.js
import { Providers } from '../components/providers'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )
}
```

How is the Jotai configured in Shadcn-ui/ui?
--------------------------------------------

[apps/www/components/providers.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/providers.tsx#L10) in shadcn-ui has the Jotai and the theme provider configuration as shown below:

![](https://media.licdn.com/dms/image/D4E12AQEE4D8V9scyLw/article-inline_image-shrink_1500_2232/0/1717190416112?e=1722470400&v=beta&t=cCNVRv9mFUyEopG5CPff5uCtXg4gZqlLsdsuRs9Jtqk)

How is Jotai used in Shadcn-ui/ui?
----------------------------------

[apps/www/app/(app)/examples/mail/use-mail.ts](https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/use-mail.ts#L2) defines a useMail hook that is found to be later in components such as

1.  [mail-list.tsx](https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/components/mail-list.tsx)
2.  [mail.tsx](https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/components/mail.tsx)

This is one of the use cases to implement state management using Jotai in Next.s

![](https://media.licdn.com/dms/image/D4E12AQEYoFFl3iLd3w/article-inline_image-shrink_1000_1488/0/1717190417316?e=1722470400&v=beta&t=abr2NJyL5x_q2nipPWI74wflRbrlAeEkgZrXT4N9ctE)

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)

Reference:
----------

1.  [https://ui.shadcn.com/examples/mail](https://ui.shadcn.com/examples/mail)
2.  [https://jotai.org/](https://jotai.org/)
3.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/app/layout.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/layout.tsx)
4.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/components/providers.tsx#L10](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/providers.tsx#L10)
5.  [https://github.com/search?q=repo%3Ashadcn-ui%2Fui%20atom&type=code](https://github.com/search?q=repo%3Ashadcn-ui%2Fui%20atom&type=code)
6.  [https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/use-mail.ts#L8](https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/use-mail.ts#L8)
7.  [https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/components/mail.tsx](https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/components/mail.tsx)
8.  [https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/components/mail-list.tsx](https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/app/(app)/examples/mail/components/mail-list.tsx)
9.  [https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/hooks/use-config.ts#L11](https://github.com/shadcn-ui/ui/blob/13d9693808badd4b92811abac5e18dc1cddf2384/apps/www/hooks/use-config.ts#L11)