All Blog Posts

Fixing Dark Mode Flickering (FOUC) in React and Next.js

Flickering in React and Next.js dark mode—also known as a flash of unstyled content (FOUC)—happens when styles are not applied early enough. In this guide, we'll explore what causes it and how to fix it using Tailwind CSS, JavaScript, and libraries like Next-Themes.

reactdark-modefouctailwindnextjs

20/04/25•Read more

TanStack Router: A Modern and scalable routing library for React

TanStack Router is a fully type-safe routing solution for React applications and it will make you to fall in love with routing again 🙈. Created by Tanner Linsley (the same mind behind [React Query](https://tanstack.com/query/latest)), it aims to solve many of the pain points developers face with traditional routing libraries. in this guide, i'll show you how to do routing and see how powerful tanstack router is.

reacttanstack-routerroutingtypescript

02/04/25•Read more

shadcn/ui: The Modern Approach Component Libraries

Discover how shadcn/ui is revolutionizing the web development with its flexible, accessible, and customizable components. Learn about its key features and see practical examples.

reactshadcn-uicomponent-librarytailwind-css

28/10/24•Read more

Why you should use Virtualization for Larger Lists

Learn how React virtualization optimizes rendering large datasets, improving performance by only rendering visible items in the viewport. This article explains the concept of virtualization, why it's important, and how to implement it using libraries like react-virtualized and react-window.

reactvirtualizationperformance-optimizationlarge-data-setsreact-virtualizedreact-window

11/09/24•Read more

Building a Modal Route with React Router

In modern web applications, modals are an essential UI element for displaying content without navigating away from the current page. This article demonstrates how to create a modal route in React Router using the Outlet component, I hope you find it helpful.

reactreact-routermodaloutlet

10/08/24•Read more

How to Create a Modal Route in Next.js.

Parallel Routes can be used together with Intercepting Routes to create modals that support deep linking. In this article, we'll learn how to create a modal route in Next.js. and also we'll see the live demo example.

nextjsparallel-routesintercepting-routesmodal-routereactnextjs-modalnextjs-modal-route

02/07/24•Read more

How to use SVG as a React component

SVGs are great way to create vector graphics for the web. But how do you use it in React? Well, it's actually quite simple. So today, I'm going to show you how to use SVG as a React component in your project and we will also see how to use it in a Next.js or vite project.

reactsvgnextjsvite

01/03/24•Read more

How to setup TailwindCSS in Nextra App

TailwindCSS is a utility-first CSS framework that helps you to build modern web applications. In this article, we will see how to setup TailwindCSS in a new Nextra web app.

nextratailwindcssnextjsweb-development

15-02-2024•Read more