• Summary

Design System Favorities

| 𝑯𝑻𝑴𝑳/𝑪𝑺𝑺 - 𝑩𝒐𝒂𝒔 𝑷𝒓𝒂𝒕𝒊𝒄𝒂𝒔

⇒ AI Open Source Tools

<aside> 💡

AI Tools ❤️‍🔥

</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) → MDNEXT**

</aside>

⇒ Auth & Permissions

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

→ **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

→ Stack Auth

→ **NextAuth v5 (don’t like it…)**

⚛️ 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

| Dev Users - AI APIs

</aside>

⇒ Monitoring/Logs

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

| Monitoring/Logs - Libs

</aside>

→ React Performance Debug

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

→ React Scan

→ **Million.dev (full analyses inside IDE)**

→ 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

→ Zustand

→ Jotai

→ MobX

→ 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>

⇒ UI/UX - CSS Elements

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

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

→ **CSS-Loaders -** https://css-loaders.com/

→ **UI Ball - Loaders -** https://uiball.com/ldrs/

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

→ Copy and Paste Friendly - Re-usable components

→ | 𝑼𝑿/𝑼𝑰

</aside>

⇒ Carousel

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

</aside>

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

| Design System and CSS Frameworks

</aside>