• Summary

Design System Favorities

⇒ AI Open Source Tools

<aside> 💡

AI Open Source 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

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

→ 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

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

⇒ 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

→ **React Bits -** https://www.reactbits.dev/

</aside>

⇒ Carousel

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

→ **Embla Carousel** 💎

→ Glide.js

→ Swiper

→ Pure React Carousel

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

→ **polished (**Handle colors and CSS helpers)

→ **Mansory -** Cascading grid layout library

</aside>

⇒ Drag And Drop

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

→ React Beautiful DnD

→ DnD Kit

→ Swapy

→ React DnD

→ React Draggable

</aside>

⇒ Icons

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

→ lucide-react

→ phosphor-icons/react

</aside>

⇒ Progress

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

→ ProgressBar.js

</aside>

⇒ Scroll Animations

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

→ ProgressBar.js

→ Luge (scroll and page transition)

→ Aos (scroll reveal, paralax)

→ ScrollReveal

→ Custom Scrollbars

→ ReactScroll

</aside>