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

β‡’ 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>