• Summary

Design System Favorities

⇒ Next.js Libs

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

| Libs for Next.js

</aside>

⇒ [Extra] CSS for pure components

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

→ UI Verse 💜 - https://uiverse.io

→ **UI Buttons -** https://github.com/ui-buttons/core

</aside>

⇒ NextJS APP Router Libs 💎

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️ → **Next-Safe-Action (Server Actions - TypeSafe in Client (good for Hook Form))**

</aside>

⇒ Auth

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️ Authentication

→ NextAuth v5

→ **WorkOS → server/API for many auth features such, login, MFA, Magic Auth, enterprise auth, …**

→ **AuthKit by WorkOS → hosted UI or custom UI integrated with Radix powered by WorkOS**

→ **Clerk → host alternative**

⚛️ Permissions

• → CASL - Isomorphic Authorization </aside>

⇒ Desktop Native APP

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

→ Microsoft react-native-windows

→ Socketsupply

→ Tauri.app

→ **Electron.js**

</aside>

⇒ Layout

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

→ React Pro Sidebar

</aside>

⇒ API’s

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

| Payments - Financial

| API’s - Messaging Libs

| Public APIs

| AI APIs

</aside>

⇒ Monitoring/Logs

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

| Monitoring/Logs - Libs

</aside>

→ Listeners for React Events

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> → Why Did You Render?

→ useWhyDidYouRender?

</aside>

→ End-to-end TypeSafe API

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> → tRPC

→ Zodios

</aside>

→ State Management

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> State Machines/Managers

→ Jotai

→ MobX

→ Zustand

→ Valtio

</aside>

→ JSON Alternatives

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> State Machines/Managers

→ FlatBuffers

</aside>

<aside> 💡

There are a lot of mentions related to Styled Components. But in the new versions of Next.js, styled-components isn’t recommended due to its SSR limitations. My strong alternative recommendation: PandaCSS

</aside>

⇒ Animations Libs

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

| Animations Libs

</aside>

⇒ [Extra] CSS for pure components

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

→ UI Verse 💜 - https://uiverse.io

→ **UI Buttons -** https://github.com/ui-buttons/core

</aside>

⇒ Styling/Visual Libraries

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️ Design System, color handler, theme

| Design System and CSS Frameworks

| Built-In Components and Features

• → polished

→ **Mansory - Cascading grid layout library**

</aside>

⇒ Icons

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

→ lucide-react

→ phosphor-icons/react

</aside>

⇒ Custom

<aside> <img src="/icons/archive_blue.svg" alt="/icons/archive_blue.svg" width="40px" /> | My Custom Components

→ MyCustomHooks

→ **MyCustomHelpers-ts (functions)**

→ **MyCustomHOCs (functions)**

</aside>

⇒ Community Custom Hooks

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

→ useHooks-ts

→ react-recipes

→ useHooks

→ **react hanger -** Hooks for state strict types like useBoolean, useInt, etc…

→ useIsOverflow

</aside>