Designly Blog

#Ui Ux

How to Create a Scroll Progress Bar in Next.js/React
1 month ago
Front End Development

How to Create a Scroll Progress Bar in Next.js/React

Enhance UX with a simple scroll progress bar for smooth, responsive navigation—minimal code, no dependencies.

React: Simple Yet Elegant Toast Notifications
2 months ago
Front End Development

React: Simple Yet Elegant Toast Notifications

Build lightweight, custom toaster notifications in React using the Context API—no dependencies needed!

Please Stop Committing UX Suicide for Sake of Revenue
9 months ago
Front End Development

Please Stop Committing UX Suicide for Sake of Revenue

Discover how to balance user experience with ad revenue using privacy-friendly strategies that keep both users engaged and advertisers happy.

Implementing a Loading Overlay with next/router Events in Next.js
1 year ago
Front End Development

Implementing a Loading Overlay with next/router Events in Next.js

Build a route change loading overlay using `next/router` events.

How to Create an Attractive File Upload Widget With React/Next.js and Tailwind CSS
1 year ago
Front End Development

How to Create an Attractive File Upload Widget With React/Next.js and Tailwind CSS

By leveraging the strengths of React, Tailwind CSS, and Daisy UI, we can create a user-friendly and aesthetically pleasing file uploader.

React and Tailwind CSS: Making a Typewriter Animation from Scratch
1 year ago
Front End Development

React and Tailwind CSS: Making a Typewriter Animation from Scratch

Learn to create a typewriter animation using React and Tailwind CSS. Step-by-step guide to add a retro touch to your web design.

Enhancing Form Usability with Framer Motion: A Guide to Animated, Chunked Form Transitions
1 year ago
Front End Development

Enhancing Form Usability with Framer Motion: A Guide to Animated, Chunked Form Transitions

Enhance form UX with Framer Motion: Break forms into chunks, animate transitions, and improve user experience for seamless interaction.

Easy Dropdown Menus With Next.js and Tailwind CSS
1 year ago
Front End Development

Easy Dropdown Menus With Next.js and Tailwind CSS

In this article, I'm going to show you how to create a very simple, yet elegant, dropdown menu using nothing but Next.js and Tailwind CSS.

How to Create a Verification Code Input Component in React / Next.js
1 year ago
Front End Development

How to Create a Verification Code Input Component in React / Next.js

In this article, I'll show you how to create a robust OTP code input component for React.js, using no other dependencies.

How to Create a React-Native App With Tailwind (Nativewind) and Google Fonts
1 year ago
Mobile App Development

How to Create a React-Native App With Tailwind (Nativewind) and Google Fonts

In this tutorial, I'm going to show you how to set up a new React-Native project using the Expo CLI tool. Then we'll install and configure Tailwind. And then as an extra-added bonus, we'll define a custom font class for a Google font.

UI/UX Best Practices for Web Forms
2 years ago
UI / UX Design

UI/UX Best Practices for Web Forms

Collecting information from prospective clients is the bread and butter of any online business. That being said, facilitating the ease and fluidity of collecting that information from the user perspective is imperative.