Tailwind CSS - freeCodeCamp.org

How to Build an Admin Dashboard Sidebar with shadcn/ui and Base UI

Vaibhav Gupta — Tue, 14 Apr 2026 16:25:08 +0000

Admin dashboards are one of the most common real-world UI components you will build as a React developer. At the heart of nearly every dashboard is a sidebar, a persistent navigation panel that organizes pages, tools, and features into a clean, scannable structure.

Building a sidebar from scratch involves much more than an

element. You need collapsible submenus, active state tracking across parent and child items, accessible keyboard navigation, a scroll area for long nav lists, and a consistent design system that holds together across screen sizes.

In this tutorial, you'll learn how to build a fully functional, accessible admin dashboard sidebar using shadcn/ui, a collection of beautifully designed, accessible React components, and a pre-built community block from Shadcn Space, which extends shadcn/ui with ready-to-use dashboard UI patterns.

By the end of this tutorial, you'll have a working sidebar that includes:

Grouped navigation sections with uppercase labels
Collapsible parent menu items with child links
Active state tracking across both parent and child items
A floating sidebar with an independent scroll area
A promotional card pinned inside the sidebar footer

Prerequisites
What You Will Build
Why shadcn/ui?
What is Shadcn Space?
How to Install the Sidebar Block
How to Understand the Folder Structure
How to Build the Page Layout
How to Build the AppSidebar Component
How to Define the Navigation Data
How to Build the NavMain Component
How to Handle Active States and Collapsible Menus
How to Style the Sidebar
Live Preview
Summary

Prerequisites

Before you start, make sure you have the following:

Node.js 18+ installed on your machine
Basic knowledge of React and TypeScript
Familiarity with Tailwind CSS utility classes
A package manager installed (npm, pnpm, yarn, or bun)

You don't need prior experience with shadcn/ui, but it helps to have read through the official docs at least once.

What You Will Build

In this article, you'll build a fully functional admin dashboard sidebar with the following features:

Floating sidebar shell: a card-style sidebar with rounded corners, a drop shadow, and a configurable width
Grouped navigation: navigation items organized under section labels like Dashboards, Pages, Apps, and Form Elements
Collapsible submenus: parent items like Blogs and Shadcn Forms that expand on click to reveal child links
Active state tracking: visual highlighting of the selected parent and child item at all times
Sidebar toggle: a trigger button in the page header that opens and closes the sidebar
Promotional card: a "Get Premium" card at the bottom of the sidebar scroll area

Why shadcn/ui?

shadcn/ui is a collection of beautifully designed, accessible React components built on top of Radix UI and styled with Tailwind CSS.

Instead of installing a traditional component library as a dependency, you copy components directly into your project using a CLI. This gives you full ownership of the code structure and styling. You can read every line, change anything, and the components never break because of a library update you didn't control.

Some key benefits of shadcn/ui include:

Accessible by default, built on Radix and Base UI primitives
Fully styled with Tailwind CSS utility classes
Zero lock-in: the code lives in your project, not inside node_modules
Works with Next.js, React, Astro, Vite, and other frameworks
A growing ecosystem of community-built blocks and registries

The Sidebar, Collapsible, ScrollArea, Card, and Button Components you'll use in this tutorial all come from shadcn/ui.

What is Shadcn Space?

Shadcn Space is an open-source library of pre-built UI blocks built on top of shadcn/ui. It provides ready-to-use dashboard layouts, sidebars, tables, cards, and other common admin UI patterns so you don't have to assemble them from individual primitives every time.

Each block in Shadcn Space is installable directly into your project using the shadcn CLI. Once installed, the code is yours: you can read it, extend it, and adapt it to your design system without any runtime dependency on Shadcn Space itself.

For this tutorial, you'll use the sidebar-06 block (it’s free to use), which is a floating admin sidebar with grouped navigation, collapsible submenus, and an integrated scroll area.

Shadcn Space also provides a companion Figma UI Kit that matches the design system used in the blocks, which is useful if you do design work alongside development.

You can explore the full block library and the getting-started documentation in the official Shadcn Space docs.

How to Set Up the Project

Start by creating a new Next.js project if you don't already have one:

npx shadcn@latest init --preset b0 --base base --template next

This command:

Creates a Next.js project
Configures Tailwind CSS
Sets up Base UI as the component foundation
Uses Nova style preset
Configures Lucide icons
Uses Inter font
Applies neutral theme tokens

Follow the prompts to configure your base color, CSS variables, and component output directory. This sets up the components/ui directory and the required Tailwind configuration that all shadcn/ui components depend on.

Once the initialization is complete, your components.json project will be created at the root of your project. This file tells the shadcn CLI where to place components, what path aliases you're using, and which styling configuration to follow.

Add this in components.json:

{
  "registries": {
    "@shadcn-space": {
      "url": "https://shadcnspace.com/r/{name}.json",
    }
  }
}

With shadcn/ui initialized, you can now pull in the sidebar-06 block from Shadcn Space. While Shadcn Space provides components for both Radix UI and Base UI, this tutorial uses the Base UI version. Run one of the following commands depending on your package manager:

npm:

npx shadcn@latest add @shadcn-space/sidebar-06

pnpm:

pnpm dlx shadcn@latest add @shadcn-space/sidebar-06

yarn:

yarn dlx shadcn@latest add @shadcn-space/sidebar-06

bun:

bunx --bun shadcn@latest add @shadcn-space/sidebar-06

This command fetches the block from the Shadcn Space registry and scaffolds all the required component files into your project automatically. It also installs any shadcn/ui primitives the block depends on (such as Sidebar, ScrollArea, Card, Button, and Collapsible) if they aren't already present in your components/ui directory.

You can preview the live block and find the installation command on their shadcn sidebar page.

How to Understand the Folder Structure

After installation, your project will contain the following new files:

app/
  sidebar-06/
    page.tsx                  ← Route entry point
assets/
  logo/
    logo.tsx                  ← Logo component
components/
  shadcn-space/
    blocks/
      sidebar-06/
        app-sidebar.tsx       ← Main sidebar shell
        nav-main.tsx          ← Navigation logic and rendering

Each file has a clearly defined responsibility:

app/sidebar-06/page.tsx: the route entry point that wires the sidebar into a page layout using SidebarProvider
assets/logo/logo.tsx: the logo component rendered in the sidebar header
components/shadcn-space/blocks/sidebar-06/app-sidebar.tsx: the main sidebar shell, including the header, scroll area, nav data, and promotional card
components/shadcn-space/blocks/sidebar-06/nav-main.tsx: all navigation rendering logic, including section labels, leaf items, collapsible parents, and active state management

You'll work through each of these files in detail in the sections below.

How to Build the Page Layout

Open app/sidebar-06/page.tsx. This file is the entry point for your dashboard page. It uses SidebarProvider to establish sidebar context across the page, and SidebarTrigger to render a toggle button inside the header.

import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/shadcn-space/blocks/sidebar-06/app-sidebar";

const Page = () => {
  return (
    
      

      {/* Main content area */}
      
        
          
        
        
      
    
  );
};

export default Page;

Let's break down the key parts of this layout:

SidebarProvider wraps everything on the page. It manages the sidebar's open/closed state and passes it down to child components via React context. Any component that needs to read or change the sidebar state, including SidebarTrigger and AppSidebar, must be a descendant of SidebarProvider.

The --sidebar-width CSS custom property controls the rendered width of the sidebar. It's set inline using a type assertion (as React.CSSProperties) because TypeScript doesn't know about this custom property by default. Setting it here rather than in a CSS file keeps the width configurable on a per-page basis.

SidebarTrigger is a toggle button component that reads the sidebar open/closed state from the nearest SidebarProvider context and flips it on click. It renders in the header so users always have access to the toggle regardless of scroll position.

bg-muted on SidebarProvider creates the light gray outer background that makes the floating sidebar card visually stand out from the page.

How to Build the AppSidebar Component

Open components/shadcn-space/blocks/sidebar-06/app-sidebar.tsx. This component is the main sidebar shell. It composes shadcn/ui's Sidebar, SidebarHeader, and SidebarContent layout primitives and wraps the scrollable navigation area in a ScrollArea component to handle overflow independently.

"use client";

import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Logo from "@/assets/logo/logo";
import { NavItem, NavMain } from "@/components/shadcn-space/blocks/sidebar-06/nav-main";
import {
  AlignStartVertical,
  PieChart,
  CircleUserRound,
  ClipboardList,
  Notebook,
  NotepadText,
  Table,
  Languages,
  Ticket,
} from "lucide-react";

The "use client" directive at the top is required because this component uses React state (through NavMain) and event handlers, both of which require the component to run in the browser rather than being server-rendered by Next.js.

Inside app-sidebar.tsxthe navigation structure is defined as a flat array of NavItem objects. Each item belongs to one of three categories:

A section label marked with isSection: true and a label string. Renders as an uppercase group heading.
A leaf item has a title, icon, and href, but no children. Renders as a direct navigation link.
A parent item has a title, icon, and a children array of sub-items. Renders as a collapsible trigger.


export const navData: NavItem[] = [
  // Dashboards Section
  { label: "Dashboards", isSection: true },
  { title: "Analytics", icon: PieChart, href: "#" },
  { title: "CRM Dashboard", icon: ClipboardList, href: "#" },

  // Pages Section
  { label: "Pages", isSection: true },
  { title: "Tables", icon: Table, href: "#" },
  { title: "Forms", icon: ClipboardList, href: "#" },
  { title: "User Profile", icon: CircleUserRound, href: "#" },

  // Apps Section
  { label: "Apps", isSection: true },
  { title: "Notes", icon: Notebook, href: "#" },
  { title: "Tickets", icon: Ticket, href: "#" },
  {
    title: "Blogs",
    icon: Languages,
    children: [
      { title: "Blog Post", href: "#" },
      { title: "Blog Detail", href: "#" },
      { title: "Blog Edit", href: "#" },
      { title: "Blog Create", href: "#" },
      { title: "Manage Blogs", href: "#" },
    ],
  },

  // Form Elements Section
  { label: "Form Elements", isSection: true },
  {
    title: "Shadcn Forms",
    icon: NotepadText,
    children: [
      { title: "Button", href: "#" },
      { title: "Input", href: "#" },
      { title: "Select", href: "#" },
      { title: "Checkbox", href: "#" },
      { title: "Radio", href: "#" },
    ],
  },
  {
    title: "Form layouts",
    icon: AlignStartVertical,
    children: [
      { title: "Forms Horizontal", href: "#" },
      { title: "Forms Vertical", href: "#" },
      { title: "Forms Validation", href: "#" },
      { title: "Forms Examples", href: "#" },
      { title: "Forms Wizard", href: "#" },
    ],
  },
];

This flat array approach is intentionally simple to maintain. You don't need a nested tree structure because the NavMain component handles the rendering logic for each item type by inspecting each item's shape. Adding a new section, item, or submenu is as straightforward as appending a new object to the array.

How to Build the NavMain Component

Open components/shadcn-space/blocks/sidebar-06/nav-main.tsx. This file contains all the navigation rendering logic. Start with the type definition and the top-level NavMain function:

"use client";

import * as React from "react";
import { ChevronRight, LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui/collapsible";
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
} from "@/components/ui/sidebar";

export type NavItem = {
  label?: string;
  isSection?: boolean;
  title?: string;
  icon?: LucideIcon;
  href?: string;
  children?: NavItem[];
};

export function NavMain({ items }: { items: NavItem[] }) {
  const [activeParent, setActiveParent] = React.useState(
    items.find((i) => !i.isSection)?.title || null
  );
  const [activeChild, setActiveChild] = React.useState(null);

  return (
    <>
      {items.map((item, index) => (
        
      ))}
    
  );
}

activeParent tracks which top-level nav item is currently selected. It initializes to the title of the first non-section item, so the sidebar always has a selection on first render, and you never show the sidebar with nothing highlighted. activeChild tracks which sub-item inside a collapsible menu is selected.

Both state values are passed down as props to each NavMainItem, so every item in the list can read the current selection and trigger updates to it.

How to Handle Active States and Collapsible Menus

The NavMainItem function branches into one of three rendering paths based on the shape of the incoming item.

How to Render Section Labels

if (item.isSection && item.label) {
  return (
    
      
        {item.label}
      
    
  );
}

Section labels use first:pt-0 to remove the top padding from the very first section, so the nav starts flush with the header.

How to Render Collapsible Parent Items

if (hasChildren && item.title) {
  return (
    
      
        
          
             setActiveParent(item.title!)}
                  className={cn(
                    "rounded-md text-sm font-medium px-3 py-2 h-9 transition-colors cursor-pointer",
                    isParentActive ? "bg-primary! text-primary-foreground!" : ""
                  )}
                >
                  {item.icon && }
                  {item.title}
                  
                
              }
            />
            
              
                {item.children!.map((child, index) => (
                  
                ))}
              
            
          
        
      
    
  );
}

A useEffect inside NavMainItem syncs the local isOpen state with activeParent so that when a different parent is activated, the previously open collapsible stays open until the user explicitly closes it:

React.useEffect(() => {
  if (isParentActive) {
    setIsOpen(true);
  }
}, [isParentActive]);

The ChevronRight icon rotates 90 degrees when the submenu is open, using a Tailwind transition class:

How to Render Leaf Items

if (item.title) {
  return (
    
      
        
           {
              setActiveParent(item.title!);
              setActiveChild(null);
            }}
            className={cn(
              "rounded-md text-sm font-medium px-3 py-2 h-9 transition-colors cursor-pointer",
              isParentActive ? "bg-primary! text-primary-foreground!" : ""
            )}
            render={}
          >
            {item.icon && }
            {item.title}
          
        
      
    
  );
}

The render prop on SidebarMenuButton replaces the default button element with an tag. This preserves correct anchor link semantics and accessibility while keeping the button's visual styling. When a leaf item is clicked, activeChild is reset to null since there is no child to track.

How to Render Child Items in a Submenu

The NavMainSubItem function handles sub-items inside a collapsible. When a child is clicked, it sets both activeChild to itself and activeParent to its parent's title so the parent item remains visually highlighted:

if (item.title) {
  return (
    
       {
          setActiveParent(parentTitle || "");
          setActiveChild(item.title!);
        }}
        render={{item.title}}
      />
    
  );
}

The child uses a different active style (bg-muted with text-foreground) compared to the parent (bg-primary with text-primary-foreground). This visual distinction makes it easy to see both which section you are in and which specific page is currently active.

Sub-items also support nesting. If a child item itself has a children array, NavMainSubItem renders another Collapsible with a nested SidebarMenuSub, allowing you to build multi-level navigation trees without any changes to the data structure.

The full AppSidebar render function puts all of the pieces together:

export function AppSidebar() {
  return (
    
      

        {/* Header with Logo */}
        
          
            
              
                
              
            
          
        

        {/* Scrollable Navigation Content */}
        
          
            
              
            

            {/* Promotional Card */}
            
              
                
                  
                  
                    
                      
                        Grab Pro Now
                      
                      
                        Customize your admin
                      
                    
                    
                  
                
              
            
          
        

      
    
  );
}

Let's walk through the key styling decisions:

variant="floating" gives the sidebar a card-like appearance with rounded corners and a subtle drop shadow. It visually lifts the sidebar off the background rather than making it flush with the page edge like a standard sidebar would.

[&_[data-slot=sidebar-inner]]:h-full is an arbitrary Tailwind variant selector that targets shadcn/ui's internal sidebar slot element. Without this, the sidebar inner container doesn't fill the full available height, which breaks the layout. The data-slot attribute is how shadcn/ui identifies internal sub-elements of compound components.

h-[calc(100vh-100px)] on ScrollArea makes the navigation list independently scrollable. The 100px offset accounts for the sidebar header and padding, so the scroll area doesn't overflow the viewport. The rest of the page layout remains static while the nav scrolls.

The bg-secondary card at the bottom of the scroll area is a common admin dashboard pattern, a soft prompt for an upgrade or onboarding action that lives passively in the sidebar without blocking navigation.

For more details on the Sidebar component's API, variants, and configuration options, refer to the official shadcn/ui sidebar docs.

Live Preview

Summary

Congratulations! You have now built a complete, production-ready admin dashboard sidebar using shadcn/ui and a community block from Shadcn Space.

Here is a recap of everything you covered:

Setting up a Next.js project with shadcn/ui initialized and a pre-built sidebar block installed from Shadcn Space
Using SidebarProvider and SidebarTrigger to manage the sidebar open/closed state across a page layout through React context
Defining navigation data as a flat array of typed NavItem objects covering section labels, leaf items, and collapsible parent items
Rendering all three item types from a single navData source in the NavMain and NavMainItem components
Tracking activeParent and activeChild state in a single location and passing them as props so every item can read and update the shared selection state
Using Collapsible with a useEffect sync to keep parent items open when they are active, and animate the chevron icon on expand and collapse
Applying the floating variant, an arbitrary Tailwind slot selector, and ScrollArea with a calculated height to produce a polished, production-appropriate sidebar layout

This pattern scales well beyond what you built here. You can extend NavItem with additional fields like badge counts, permission flags, or external link indicators. You can swap in real href values and connect activeParent and activeChild to your router so the selection always reflects the current URL. You can also add more sections to navData without touching any rendering logic.

For a quick checkout, we have used the Shadcn Space free Shadcn dashboard block in this dashboard shell.

If you want to explore more pre-built admin UI blocks, components, and templates built on top of shadcn/ui, you can browse the full library at Shadcn Space.

Resources

How Atomic CSS and Functional Programming Are Related

Ramazan Maksyutov — Thu, 19 Mar 2026 17:38:23 +0000

Hello, friends!

My name is Ramazan, and I'm a front-end developer and enthusiast who loves looking at familiar things in web development from new perspectives.

You might have heard of functional programming (FP). It's a paradigm characterised by the use of pure functions and the preservation of data immutability. There are even languages in which FP principles prevail, like Haskell, OCaml, and Elixir. Other languages like JavaScript, Python, and C++ also support this approach, although they're not limited to it.

But an attentive reader will look at the title and ask: "Functional programming is fine. But what does Atomic CSS have to do with it?" I'll answer that now!

The thing is, back when the atomic approach first appeared, it had another name: Functional CSS. Some people still use it quite often today to avoid confusion with other terms with the same name. But why is this approach to writing CSS called functional?

That's the question I'll try to answer in this article. First, I'll describe the basic principles of FP. Then, I'll talk about the basics of Atomic CSS (which I'll refer to here as ACSS), drawing analogies with functional programming. I'll also try to use simple examples to show what problems you can solve by applying Atomic CSS to styling.

When preparing the materials for this article, I relied a lot on this tutorial on FP and this one on Functional CSS.

Well, let's get started!

Prerequisites

To follow along with this article, all you need is a basic understanding of HTML, CSS, and JavaScript. There are also some examples where we'll use the Atomic CSS framework mlut, but you don't have to know its syntax because I've provided the text with the equivalent CSS styles.

What We'll Cover:

The Basic Principles of Functional Programming
How the Principles of FP Meet Their Incarnation in Atomic CSS
Conclusion

The Basic Principles of Functional Programming

Functional programming is a broad field that has been the subject of numerous complex articles and an entire scientific journal. So in my article, I'll focus on exploring only the basic principles of FP and drawing analogies with them in Atomic CSS.

This approach is based on the idea that all the actions we need to perform in a program should be done by calling certain functions and their compositions.

Let me outline the main concepts I'll use to explain the core idea of this approach:

Pure functions
Immutability
Function composition

Pure Functions

A function is called pure if it:

returns the same value for the same input parameters;
has no side effects (changes to external values or entities).

Here are a couple of examples to illustrate this:

let c = 10;
let s = 0;

// Pure function
function pureSum(a,b) {
  return a + b
}

// Impure function
function notPureSum (a) {
  s = a + c
  return s
}

The first function is pure because if we enter the same arguments, we'll get the same result. Also, this function doesn't change any global variables and doesn't mutate objects.

The second function doesn't meet the concept of purity on both points. It changes the external variable s and uses another external variable c for calculations, which can change.

Pure functions allow you to write more predictable code. An application can grow and a function with an implicit parameter that can change over time can lead to great difficulties in debugging and maintaining the codebase.

Immutability

Immutability is a principle which states that data objects shouldn't change after they're created. To make changes to data, you need to create a new instance of it and then work with that new copy.

At first glance, it may seem that this approach limits flexibility in the development process and reduces the speed of the program. But in reality, if the language or runtime has optimisations for immutable data, adhering to this principle helps you avoid many errors and use parallel calculations.

Here's a fairly simple example: let's take a React component that renders a task in a to-do list. The state of the task is described by an object. And in order for React to correctly redraw the state of the task component when the user changes something in it, it's necessary to pass as the new state not the mutated old object, but a new instance of the object with the current state. Here is the example where an immutable object is used for the state of the to-do:

import { useState } from "react";

function TodoItem() {
  const [todo, setTodo] = useState({
    text: "Write article",
    done: false
  });

  const toggleDone = () => {
    setTodo({
      ...todo,
      done: !todo.done
    });
  };

  return (
    
      
        {todo.text} — {todo.done ? "✅" : "❌"}
      
      
    
  );
}

export default TodoItem;

Here we'll see that clicking on the button will lead to changes in the state of the to-do and will cause re-rendering of the component. But we could define the function toggleDone() in a different way using mutations of the object:

const toggleDone = () => {
  todo.done = !todo.done;
  setTodo(todo);
};

With such an event handler, the effect will not work because the link to the object is still the same, even though the object itself was mutated.

Function Composition

Function composition involves using the result of one function as an argument for another function. Here's an example of a program that capitalises the first letter of each word:

function compose(f1, f2) {
  return function (str) {
    return f1(f2(str));
  }
}

function makeFirstCapital(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function upperEveryFirst(str) {
  return str.split(' ').map(makeFirstCapital).join(' ');
}

function lower(str) {
  return str.toLowerCase();
}

const capitalize = compose(upperEveryFirst, lower);
const string = 'this sTring should be Capitalized'

console.log(capitalize(string)) // 'This String Should Be Capitalized'

Here, we have defined the function compose(f1, f2), which returns the composition of the functions passed to it in arguments. Next, we use this function to create the function capitalise(), which will capitalise only the first letters of words by composing the functions lower() and upperEveryFirst(). The first one is executed first and returns a string with all lowercase letters to the second function as an argument. The second function capitalises the first letter of each word.

In large projects and when complex calculations are required, such compositions can be larger, and the logic in them can be much richer. In such cases, this approach to calculations helps break down very large transformations into a series of relatively simple and compact functions that are applied one after the other. This makes it easier to develop, refactor, and debug code.

How the Principles of FP Meet Their Incarnation in Atomic CSS

Now that we know a little about functional programming, let's try to answer the question: ‘What does Atomic CSS have to do with it?’ Let's draw an analogy between these approaches at the level of the principles described above.

What is Atomic CSS?

But first, let's take a moment to explain what Atomic CSS is. It's a methodology of styling layouts in which we use small Atomic CSS rules, each of which performs a single action. These classes are called utilities. They usually apply one CSS property, but not necessarily just one.

For example, in the mlut framework, the Bgc-red utility corresponds to the background-colour: red property, and the -Sz50p utility corresponds to two properties at once: width: 50% and height: 50%.

Modern Atomic CSS frameworks, such as mlut and Tailwind, use a so-called JIT engine. This is a component that generates CSS based only on the utilities you used in your markup.

Purity

Purity in CSS is determined by which selectors, or more specifically, classes, are used to style elements. In clean CSS, the behaviour of an element should be determined solely by the classes that are attached to it in the class attribute. This means that, ideally, a stylesheet should not contain selectors such as section or div > ul.

Firstly, they set too general rules, which are likely to be broken or supplemented in one part of the project or another. So when we style specific elements, we'll have to constantly keep these styles in mind in order to understand how to achieve the necessary styling without spoiling anything.

Secondly, the purity of CSS for each specific element is violated. Let's say we have the following markup:

With the CSS styles below:

.wrapper > .greeting {
  background-color: green;
}
.greeting {
  background-color: red;
}

As a result, we get that the first button is red, and the nested one is green. It seems pretty harmless in this simple case, but it will cause inconvenience when the project structure grows significantly.

Here we see that the result of the .greeting class's custom styles depends on where the corresponding element is located. This is similar to a function that produces different results for the same input data depending on where it's called.

Atomic CSS allows you to avoid this effect. In this approach, in most cases, styles are applied only to those elements for which the corresponding classes are specified. If you need to make several identical elements, the same utility is specified in the class attribute of each such element.

A similar example can be rewritten in mlut like this:

And JIT-engine will generate the following styles:

.Bgc-red {
  background-color: red;
}

.Bgc-green {
  background-color: green;
}

Here we can see that the styles of elements in this approach will depend only on the classes assigned to them.

It's worth noting here that the mlut syntax allows you to do things that deviate from the strict concept of CSS purity. Sometimes this is necessary to create relatively more complex effects.

Let's say we want to implement a card that changes the background colour of the button inside it when hovered. Then we would need to write the following in mlut:

CSS:

.-Ctx:hover .\^\:h_Bgc-red {
  background-color: red;
}

Immutability in ACSS

By CSS immutability, I mean that element styles are not rewritten. Immutability in ACSS means that utilities do not typically mutate each other.

For example, in BEM (Block Element Modifier), the main styles are set by a block or element, and a modifier mutates these styles. In other approaches that use combined selectors, such mutations occur more often and less explicitly.

Let me give you a simple example. Suppose we have a product card that can be in its default state or in a highlighted state. In BEM it would look like this:

Card 1
Card 2
Card 3

.product-card {
  background-color: red;
  padding: 5px;
}

.product-card--selected {
  background-color: green;
}

In this example, we see that the product-card class sets the default background colour of the card to red. And in order to somehow mark the selected card with a different background colour we have to add a modifier class that changes the colour from red to green. It does this by rewriting the background-color property, that is by mutating the block styles.

In the Atomic CSS approach, this problem is solved because utilities allow you to set CSS properties independently of each other and apply modifications without resorting to mutation.

Here's what this example would look like if you used mlut:

Card 1
Card 2
Card 3

.P5 {
  padding: 5px;
}

.Bgc-red {
  background-color: red;
}

.Bgc-green {
  background-color: green;
}

Composition

Functional programming makes extensive use of function composition. In Atomic CSS, function composition is analogous to utility composition when styling elements. Just as in FP we obtain complex behaviour through the sequential application of a set of simple functions, so in ACSS we can obtain non-trivial styling through a set of simple utilities.

As an example, I'll show a simple smiley face made using only Atomic CSS:

.-Sz150 {
  width: 150px;
  height: 150px;
}

.Bgc-yellow {
  background-color: yellow;
}

.Bdrd100p {
  border-radius: 100%;
}

.M-a {
  margin: auto;
}

.Ps {
  position: relative;
}

.-Sz20p {
  width: 20%;
  height: 20%;
}

.Bgc-gray {
  background-color: gray;
}

.Ps-a {
  position: absolute;
}

.T30p {
  top: 30%;
}

.L20p {
  left: 20%;
}

.R20p {
  right: 20%;
}

.W50p {
  width: 50%;
}

.H40p {
  height: 40%;
}

.Bdb5;s;gray {
  border-bottom: 5px solid gray;
}

.T40p {
  top: 40%;
}

.L25p {
  left: 25%;
}

This is how our result will look:

Thus, by applying the utilities one after another, we even made some small CSS art.

Conclusion

To sum up, I will say that Atomic CSS truly embodies the basic principles of functional programming. Of course, not literally – but in the sense that is relevant for front-end developers and layout designers.

I would be happy to hear your additions and objections – it'll be interesting to read and think about them.

Finally, I would like to say: look at familiar things with a fresh perspective. And, as usual, I wish you success on your exciting journey of front-end development!

How to Use Flex in Tailwind CSS and Justify Flex Items

Ajay Patel — Wed, 11 Mar 2026 16:24:59 +0000

Hey there! If you're building modern web interfaces, chances are you've already fallen in love with Tailwind CSS for its speed and flexibility.

One of the most powerful tools in Tailwind's arsenal is its set of Flexbox utilities. Flexbox lets you create dynamic, responsive layouts without writing custom CSS, and Tailwind makes it incredibly intuitive with simple class names.

In this tutorial, we'll walk through everything you need to know about using Flexbox in Tailwind, from the basics to advanced patterns. Whether you're a beginner or looking to level up your layouts, by the end, you'll feel confident building anything from card grids to complex dashboards.

Prerequisites
What is Flexbox?
How Tailwind CSS Makes Flexbox Easy to Use
How to use flex in Tailwind
Flex Item Sizing: Basis, Grow & Shrink
Controlling Flex Direction
Fine-Tuning Flexbox Layout
How to Justify and Align Flex Items in Tailwind
Practice Flexbox with Interactive Games
Conclusion:

Prerequisites

Before diving into Flexbox with Tailwind CSS, it helps to have a few basics in place so you can follow along comfortably.

Basic Knowledge:

A foundational understanding of HTML (how elements and containers work).
Basic familiarity with CSS (especially properties like display, width, and height).
A general idea of how responsive design works (helpful but not required).

You do not need to be a Flexbox expert, as we’ll cover the important concepts as we go.

Tools You’ll Need:

A code editor like VS Code (or any editor you prefer)
A browser for testing layouts
A project with Tailwind CSS installed

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model designed to make it easier to design flexible, responsive layouts without using floats or complicated positioning tricks.

Before Flexbox, aligning elements vertically, spacing items evenly, or making layouts adapt to different screen sizes was often frustrating and required hacks. Flexbox solves these problems by providing a simple and predictable way to control alignment, spacing, and ordering of elements inside a container.

The main concept is simple:

You have a flex container
Inside it are flex items
The container controls how its items are laid out

Once an element is set to display: flex, its children automatically become flex items.

.container {
  display: flex;
}

How Tailwind CSS Makes Flexbox Easy to Use

Flexbox is powerful, but writing custom CSS for every layout can become repetitive and time-consuming. Tailwind CSS simplifies this by providing utility classes that map directly to Flexbox properties, allowing developers to build layouts quickly without writing custom CSS.

Instead of switching between HTML and CSS files, Tailwind lets you apply Flexbox behavior directly in your markup, making layouts more readable and faster to develop. It turns Flexbox's sometimes verbose properties into short, memorable utilities. No more remembering justify-content: space-between; just write justify-between.

Benefits:

Responsive by default (add md:, lg:, and so on)
Composable (combine classes freely).
No custom CSS needed for most cases.

How to Use Flex in Tailwind

Flexbox is one of the most powerful layout systems in modern CSS, and Tailwind CSS makes it extremely approachable by exposing Flexbox behavior through simple utility classes. Instead of writing custom CSS, you compose layouts directly in your HTML using predefined classes.

flex: The flex Class is the foundation of Flexbox in Tailwind.
flex-1: Allows the element to grow and shrink and forces it to take up the remaining available space.
flex-auto: It makes an item flexible while respecting its content size – that is, it only grows and shrinks as needed.
flex-none: Disables growing and shrinking for an item.

Here is a basic example that shows where to place these classes:



  
  Item 1
  Item 2
  Item 3

Flex Item Sizing: Basis, Grow, & Shrink

Three fundamental properties control how elements size themselves inside a flex container:

flex-basis
flex-grow
flex-shrink

Rather than thinking in fixed widths and heights, Flexbox uses a dynamic space-distribution model. Each flex item starts with an initial size, then grows or shrinks depending on the available space and the rules defined by these three properties.

flex-basis

flex-basis controls the initial size of a flex item before flex-grow or flex-shrink kick in. Think of it as the item’s starting width or height (depending on flex direction).


	01
  02

Here's what this makes:

flex-basis's most used utility classes are:

basis-auto: This means the item’s initial size is based on its content size or any explicitly defined width/height. It doesn't force a specific starting size. Instead, it respects intrinsic sizing.
basis-0: This makes the item start at 0 width (or height in column layouts) before space is distributed. It’s commonly used with grow to evenly distribute space regardless of content size.
basis-full: The item initially takes up the entire width (or height) of the container before shrinking or wrapping.
basis-xs/md/lg/xl..: Built-in values.
basis-: Giving a value with a dynamic such as 1/2, 4/5, and so on.
basis-: Uses Tailwind’s spacing scale (in rem units).
basis-[]: Syntax to set the basis based on a completely custom value.

flex-grow

flex-grow controls how much a flex item expands to fill extra space in the flex container. It determines how leftover space is distributed among flex items after their initial sizes.


	01
  02
  03

Here's what this creates:

flex-grow's most used utility classes are:

grow: The item will grow to take up available extra space. If multiple items use grow, they share space equally (unless different grow values are specified)..
grow-0: The item will not expand beyond its initial size, even if extra space is available.
grow-: If one item has grow-2 and another has grow-1, the first item gets twice as much extra space as the second.
grow-[]: Allows a custom grow value (e.g. grow-[3]).

flex-shrink

flex-shrink controls how much a flex item shrinks when there isn’t enough space in the flex container. It determines how items reduce their size relative to each other when the container overflows.


	01
  02
  03

Here's what this creates:

flex-shrink's most used utility classes are:

shrink: The item is allowed to shrink when necessary to prevent overflow.
shrink-0: The item will not shrink, even if space becomes limited. This may cause overflow if other items cannot compensate.
shrink-: Sets proportional shrinking behavior. An item with shrink-2 will shrink twice as much as one with shrink-1.
shrink-[]: Syntax to set a completely custom shrink value.

Controlling Flex Direction

In Tailwind CSS, the direction in which flex items are laid out is controlled using flex-direction utilities. These utilities define whether items are placed horizontally or vertically, and in which order.

flex-row

flex-row is the default flex direction in both CSS Flexbox and Tailwind. When it is applied, flex items are laid out horizontally along the main axis, starting from left to right (in left-to-right languages).


  01
  02
  03

This outputs:

Use case: Navigation bars, horizontal button groups, toolbars.

flex-row-reverse

The flex-row-reverse utility lays out flex items horizontally, but in the opposite direction from right to left. While the visual order of items is reversed, the HTML source order remains unchanged, which is important for accessibility and screen readers.


  01
  02
  03

Output:

Use case: Forms, cards, sidebars, vertical menus.

flex-col

The flex-col utility changes the flex direction to vertical, stacking items from top to bottom. In this case, the main axis runs vertically.


  01
  02
  03

Output:

Use case: Forms, cards, sidebars, vertical menus.

flex-col-reverse

In flex-col-reverse, items are stacked vertically, but in reverse order, starting from bottom to top (that is, vertically reverse order).


  01
  02
  03

Here's the output:

Use case: Chat messages, timelines, or when newer content should appear at the bottom.

Now you know a bit about managing flex-directions using tailwind utility classes. You can mange the stack depending on your needs.

Responsive Control

Tailwind also allows you to change flex direction at different breakpoints so you’ll get a clean layout across different devices.


	.....

This stacks items vertically on small screens and switches to a horizontal layout on medium screens and above.

Fine-Tuning Flexbox Layout

Once a container is set to use Flexbox, the real power comes from controlling how flex items behave inside it. This is where properties like wrap, order, and gap become essential. These features determine how items flow, how they're visually arranged, and how much space exists between them.

In real-world layouts such as card grids, navigation menus, and dashboards, elements rarely fit perfectly in a single row or follow a fixed order across all screen sizes. Flexbox provides solutions to these challenges, and Tailwind CSS exposes them through simple, intuitive utility classes.

Wrap helps manage what happens when items exceed the available space
Order allows you to rearrange elements visually without changing the HTML structure
Gap controls spacing between items in a clean and predictable way

Let’s dive into the depths of these fine-tuning flexbox properties.

flex-wrap

By default, Flexbox tries to fit all items into one line. If there isn’t enough space, items will shrink to squeeze in. flex-wrap allows flex-items to move onto the next line instead of shrinking.


	01
	02
	03

Utility classes:

flex-nowrap: (default) All items stay on one line.
flex-wrap: Items wrap onto multiple lines.
flex-wrap-reverse: Items wrap, but in reverse order.

flex-order

flex-order controls the visual order of the stack/flex-items without changing the HTML structure. Each item has an order value. Items with lower order values appear first.


	01
	02
	03

Utility classes:

order-1 to order-12: Sets order value.
order-first: Moves item to the start.
order-last: Moves item to the end.
order-none: Default order (0).

gap

gap controls the space between flex items, both rows and columns, without using margins. You can also apply for axis, which will help in giving space in both horizontal and vertical directions.

Here's an example of using it with a horizontal layout:


	01
	02
	03

And here's an example showing a vertical layout:


	01
	02
	03

Utility classes:

gap-: Applies space (x-axis by default) between items according to the number, as shown in the example.
gap-[]: You can apply a custom gap inside square brackets, such as gap-[10px].
gap-x-: Provides horizontal spacing only.
gap-y-: Provides vertical spacing only.

Responsive Design

You can prefix the gap, column-gap, and row-gap utilities with a breakpoint variant, like lg: to only apply the utility at larger screen sizes and above. Here's an example:

How to Justify and Align Flex Items in Tailwind

If you're building interactive components like dropdowns, menus, or toolbars using Flexbox, alignment becomes even more important when handling keyboard navigation.

For example, when using arrow keys to navigate horizontally aligned items (justify-between, justify-center, and so on), proper spacing ensures a better user experience. You can explore how Tailwind CSS keyboard navigation works with arrow keys in FlyonUI.

FlyonUI provides accessible Tailwind components that integrate smoothly with Tailwind CSS, especially helpful when building flex-based navigation layouts.

Tailwind CSS offers a wide range of utility classes for aligning and justifying flex items, which can sometimes be confusing to differentiate. Below is a concise overview of these classes, along with practical examples.

justify-content

justify-content is a flexbox property that controls how flex items are aligned along the main axis of a flex container. It decides how items are spaced inside a flex container. It is applied along with class flex.

Here's an example:


	01
	02
	03

Utility classes:

justify-start: Aligns items at the start of the container.
justify-center: Centers items along the main axis.
justify-end: Aligns items at the end of the container.
justify-between: Adds space between items, pushing first and last items to the edges.
justify-around: Adds equal space around each item.
justify-evenly: Distributes items with equal spacing everywhere, including edges.

Align Items

align-items is a flexbox property that controls how flex items are aligned along the cross-axis of a flex container.

In a row-based flex container (flex-row, which is the default direction), the cross axis is vertical. That means align-items controls vertical alignment.

In a column-based container (flex-col), the cross axis becomes horizontal, so align-items controls horizontal alignment instead.

This property is applied alongside the flex class and is commonly used to align items consistently inside navigation bars, toolbars, cards, and forms.


	01
	02
	03

Utility classes:

items-start: Aligns items to the start of the cross-axis (top in a row).
items-center: Centers items vertically along the cross-axis.
items-end: Aligns items to the end of the cross axis (bottom in a row).
items-baseline: Aligns items based on their text baseline.
items-stretch: Stretches items to fill the container (default behavior).

Practice Flexbox with Interactive Games

Reading documentation is important, but Flexbox really clicks when you practice it visually. One of the best ways to build strong Flexbox intuition is through interactive games that let you experiment with alignment, spacing, and direction in real time.

Here are two excellent games that will strengthen your Flexbox fundamentals and make Tailwind’s flex utilities feel second nature:

Flexbox Froggy

🔗 https://flexboxfroggy.com/

Flexbox Froggy is a fun and beginner-friendly game where you help frogs reach their lily pads using Flexbox properties. Each level introduces a new concept, like justify-content, align-items, flex-direction, and flex-wrap.

Why it’s great:

Perfect for beginners
Visual feedback makes concepts easy to grasp
Covers core Flexbox properties step by step

If you’re new to Flexbox, this is one of the best places to start.

Flexbox Adventure (Coding Fantasy)

🔗 https://codingfantasy.com/games/flexboxadventure

Flexbox Adventure turns Flexbox learning into a role-playing game where you move your character by writing Flexbox rules. It focuses more on real-world layout thinking and helps reinforce how different properties work together.

Why it’s great:

More challenging than Flexbox Froggy
Helps solidify intermediate concepts
Encourages problem-solving with Flexbox logic

This is a great follow-up once you’re comfortable with the basics.

Conclusion

Flexbox is a core part of modern CSS layouts, and Tailwind CSS makes it even more powerful by turning Flexbox properties into simple, readable utility classes. By understanding utilities for direction, sizing, wrapping, spacing, ordering, and alignment, you can build responsive and flexible layouts without writing custom CSS.

And by understanding how properties like flex, grow, shrink, basis, justify-*, items-*, gap, when responsive variants work together, you can build layouts that are not only flexible and responsive but also maintainable and scalable.

Instead of wrestling with custom CSS, Tailwind allows you to express layout intent directly in your markup, keeping your workflow fast and predictable.

With these Flexbox fundamentals in your toolkit, you’re well-equipped to design clean, responsive interfaces using Tailwind CSS with confidence. 🚀

How to Use the tailwind-sidebar NPM Package in Your React and Next.js Apps

Hitesh Chauhan — Wed, 14 Jan 2026 17:53:43 +0000

These days, developers are increasingly preferring utility-first CSS frameworks like Tailwind CSS to help them build fast, scalable, and highly customizable user interfaces.

In this article, you’ll learn what the tailwind-sidebar NPM package is, how it works internally, and how to install and configure it in a real project. We’ll walk through setting up a responsive sidebar using Tailwind CSS, explore its key features with practical examples, and see how you can customize and control the sidebar behavior to fit different layouts and screen sizes.

If you’re building a React or Next.js application and want a lightweight yet powerful sidebar solution, tailwind-sidebar is an excellent choice.

Prerequisites
Introduction to the tailwind-sidebar NPM Package
Why Choose Tailwind Sidebar?
How to Get Started with Tailwind Sidebar
Features of Tailwind Sidebar:
Wrapping Up

Prerequisites

Basic knowledge of JavaScript (ES6+)
Familiarity with React fundamentals (components, props, JSX)
Basic understanding of Next.js project structure and routing
Experience using npm or yarn for package installation
Working knowledge of Tailwind CSS

The tailwind-sidebar NPM package is a modern, developer-friendly sidebar component that’s built entirely with Tailwind CSS. It’s designed to help developers create responsive, customizable, and accessible sidebars without the overhead of heavy UI frameworks.

tailwind-sidebar is a lightweight utility package designed to simplify building responsive sidebars using Tailwind CSS. Instead of manually handling sidebar state, transitions, and responsive behavior, the package provides a small JavaScript layer that works alongside Tailwind’s utility classes.

At its core, the package toggles Tailwind classes to control whether the sidebar is open or closed. This makes it framework-agnostic - it works with plain HTML, as well as frameworks like React, Vue, or Next.js, as long as Tailwind CSS is available.

Because it relies on Tailwind utilities rather than custom CSS, the sidebar stays easy to customize, extend, and maintain.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that lets you build modern, responsive user interfaces directly in your markup. Instead of predefined components, Tailwind provides low-level utility classes that give you full design control without leaving your HTML.

Tailwind Sidebar is built on top of Tailwind CSS, offering a clean, flexible, and highly customizable sidebar solution for modern web applications.

Optimized Performance

Tailwind Sidebar relies on utility classes instead of heavy JavaScript logic. This means that it delivers fast load times and smooth interactions, and is ideal for performance-critical applications.

Developer-Friendly

It doesn’t have any complex configuration or component APIs. If you know Tailwind CSS, you already know how to customize the sidebar.

Easy Maintenance

With a simple and predictable structure, updates and custom changes are straightforward, making it suitable for both small projects and large-scale applications.

Growing Tailwind Community

Tailwind CSS has a massive and active community. This means better tooling, regular updates, and a wealth of learning resources to support your development workflow.

This section will walk you through installing and setting up tailwind-sidebar in a React and Next.js application. You’ll learn how to add a sidebar, create menus, add a logo, and customize navigation.

To begin, you’ll need to install tailwind Sidebar into your React and Next.js project. You can do this using either npm or yarn.

Using npm:

npm i tailwind-sidebar

Using yarn:

yarn add tailwind-sidebar

This will add tailwind-sidebar and its dependencies to your project.

Once the package is installed, you can import the necessary components from tailwind-sidebar into your project. These components will allow you to customize the sidebar with menus, submenus, and even a logo.

import {

  AMSidebar,

  AMMenuItem,

  AMMenu,

  AMSubmenu,

  AMLogo,

} from "tailwind-sidebar";

To use the default styles of tailwind-sidebar, you need to import its CSS file at the top of your project:

import "tailwind-sidebar/styles.css";

Step 3: Routing Setup for React and Next.Js

To enable navigation inside tailwind-sidebar components like AMMenuItem or AMLogo, you need to pass a link component from either react-router or next/link using the component prop inside the corresponding component, like what’s shown in the below example:

If you're using React:

import { Link } from "react-router-dom";

<AMSidebar width={"270px"}>

     <AMLogo img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
        component={Link}
        href="/"
      >
        Adminmart

      AMLogo>
      <AMMenu subHeading="HOME">
        <AMMenuItem
         icon={<Home />}
          link="/"  // Passing link to component for routing
          badge={true}
          badgeType="default"
          badgeColor={"bg-secondary"}
          isSelected={true}
        >
          {/* text for your link */}
          Link Text
        AMMenuItem>
      AMMenu>
   AMSidebar>

And if you're using Next.js:

import  Link  from "next/link";<AMSidebar width={"270px"}>
  <AMLogo img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
        component={Link} // Passing link to component for routing
        href="/"
      >
        Adminmart
      AMLogo>
        AdminMart
      Logo>
      <AMMenu subHeading="HOME">
         <AMMenuItem
          icon={<Home />}
          link="/tes"
          component={Link}
          isSelected={true}
        >
           Link Text {/* text for your link */}
        AMMenuItem>
      AMMenu>

Now we’ll set up the AMSidebar component in your application. You can set the width of the sidebar using the width prop. Here’s a simple example:

"270px"}> // pass the width you want your sidebar to have

{/* Sidebar Content Goes Here */}

This initializes the sidebar with a width of 270px. You can adjust this width based on your design requirements.

You can add a logo inside the sidebar by using the AMLogo component. To do so, you can provide an img prop to link to a CDN logo image. You can also make the logo clickable by passing a navigation link using the component and href props. Here’s how you can include a logo:

"270px"}>

<AMLogo img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
component={Link}
href="/" 
>        
Adminmart
AMLogo>

In this example, we’ve added a logo from a CDN using the img prop, used the component prop to pass the Link, and set the navigation path to (/) homepage using the href prop and set the text “AdminMart” as the name of the application.

Now let’s create a menu inside the sidebar using the AMMenu component. You can specify a submenu heading using the subHeading prop. Inside the AMMenu, you can add AMMenuItem components for each item.

You can also provide a link prop along with the component prop to the AMMenuItem to turn the item into a clickable link.

Here’s how you can structure the menu:

"270px"}>
  <AMMenu subHeading="HOME">
  <AMMenuItem  component={Link}  link="/"  badge=”true”  isSelected={true} >
      Modern
    AMMenuItem>
    <AMMenuItem>eCommerceAMMenuItem>
    <AMMenuItem>AnalyticalAMMenuItem>
  AMMenu>

In this example:

We’ve added a AMMenu with the heading “HOME”.
The first AMMenuItem has a link prop, so clicking it will navigate to the homepage (/).
The second and third AMMenuItem components are simple text items without links.

You can use the badge="true" prop to indicate a badge or notification on the AMMenuItem. The isSelected={true} prop marks this menu item as currently selected or active (though you can customize this feature according to your needs).

Step 7: Adding Submenus (Optional)

To add submenus inside the main menu, use the AMSubmenu component. The AMSubmenu can be nested inside the AMMenu component and contains its own set of AMMenuItem. Use the title prop to set the submenu heading

Here’s an example of adding a submenu:

"270px"}>
    <AMMenu subHeading="SERVICES">
      <AMMenuItem  component={Link}   link="/web-development">Web DevelopmentAMMenuItem>
      <AMMenuItem component={Link}  link="/seo-services">SEO ServicesAMMenuItem>
      <AMSubmenu title="Marketing">
            <AMMenuItem component={Link}  link="/digital-marketing">Digital MarketingAMMenuItem>
           <AMMenuItem component={Link}  link="/content-marketing">Content MarketingAMMenuItem>
      AMSubmenu>
  AMMenu>

In this example:

A submenu under the "Marketing" heading is added inside the "SERVICES" menu.
The submenu contains two AMMenuItem with links to different service pages.

Utility-First & Lightweight

Tailwind Sidebar is built entirely using Tailwind CSS utility classes. This means there’s no heavy JavaScript logic or extra styling framework, keeping your bundle size small and performance fast.

Code Example:

"260px" className="bg-gray-900 text-white">
     <AMMenu>
           <AMMenuItem>DashboardAMMenuItem>
      AMMenu>

What’s going on here:

bg-gray-900 text-white: Applies a dark background and white text directly via Tailwind classes (no separate CSS file).
width="260px": The component prop sets the sidebar width. Here, it shows how Tailwind utilities combine with props to control layout.

Because all spacing and colors are from Tailwind classes, you don’t need additional custom styles.

Fully Responsive Design

The sidebar adapts seamlessly to different screen sizes. Whether you’re building for desktop, tablet, or mobile, Tailwind Sidebar ensures a smooth and consistent navigation experience.

Example usage:

"260px" className="hidden md:block">
  <AMMenu>
           <AMMenuItem>HomeAMMenuItem>
      AMMenu>

What’s going on here:

hidden md:block: Uses Tailwind responsive utility classes to hide the component (hidden) on mobile screens and show it starting at the md breakpoint (md:block).

This pattern is Tailwind’s common way of controlling visibility across breakpoints without media queries.

Highly Customizable

Tailwind Sidebar allows full customization of colors, hover states, spacing, and typography directly through Tailwind classes. You can customize layout and animations – all without touching custom CSS files.

Example usage:

 "hover:bg-blue-600 rounded-lg px-4 py-2”>
      Analytics

What’s going on here:

hover:bg-blue-600: When you hover the menu item, the background changes to blue, purely via Tailwind.
rounded-lg: Adds rounded corners.
px-4 py-2: Controls horizontal (px) and vertical (py) padding to adjust spacing.

Together, these utilities show how Tailwind gives control of design details directly at the HTML/JSX level.

Integration with React & Next.Js:

Tailwind Sidebar seamlessly integrates with both React & Next.js, offering a familiar and efficient development experience.

The sidebar works natively with both React Router and Next.js routing by passing the Link component.

React Example
{
  /* if you are using react then import link from  */
}

import { Link } from "react-router-dom";
<AMMenuItem component={Link} link="/dashboard">
            Dashboard 
AMMenuItem>

Next.js Example
{
  /* if you are using nextjs then import link from  */
}

import Link from "next/link";

<AMMenuItem component={Link} link="/dashboard">
         Dashboard
AMMenuItem>

What’s going on here:

component={Link} link="/dashboard": Shows how you pass your framework’s routing component into AMMenuItem, turning it into a real navigational link.

This means Tailwind Sidebar adapts to both React Router and Next.js routing without boilerplate.

Organize your navigation with:

Main menu items
Nested submenus

This makes it easy to manage complex navigation structures while keeping the UI clean and intuitive.

Example usage:

"MANAGEMENT">
             <AMMenuItem>UsersAMMenuItem>
                <AMSubmenu title="Reports">
                   <AMMenuItem>SalesAMMenuItem>
                      <AMMenuItem>RevenueAMMenuItem>
                    AMSubmenu>

What’s going on here:

subHeading="SERVICES": Adds a labeled grouping for menu items.
The nested demonstrates how nested navigation is rendered and structured in JSX.

This example clearly shows hierarchical menus without additional CSS – structure and Tailwind classes handle layout.

Icon Support

The sidebar comes with built-in support for icons, allowing developers to enhance the visual appeal and usability of their application. Developers can use any icon library and provide the icon component.

Example using lucide-react:

import { Home } from "lucide-react";

<AMMenuItem icon={<Home size={18} />}>
     Home
AMMenuItem>

What’s going on here:

icon={}: Here, an icon component is passed as a prop.
You control the size directly via the icon library (Lucide here) and Tailwind handles spacing/placement next to text.

This illustrates how icons and text combine in the sidebar component.

Smooth Transitions

Tailwind Sidebar provides built-in animation support through the animation prop. When enabled, menu items and submenus animate smoothly, improving the overall user experience without requiring custom CSS or JavaScript.

Example Usage:

"270px" animation={true}>
           <AMMenu subHeading="SETTINGS">
                  <AMMenuItem>ProfileAMMenuItem>
                  <AMMenuItem>SecurityAMMenuItem>
             AMMenu>

What’s going on here:

animation={true}: Enables built-in animation support.

The example shows how adding this prop triggers smooth transitions defined by the component itself (still relying on Tailwind utilities internally). You don’t have to write CSS keyframes or transition utilities manually.

Wrapping Up

You have now successfully integrated a fully functional sidebar in your React and Next.js application using tailwind-sidebar. You can further customize the sidebar by:

Modifying the width and design.
Adding more submenus, menu items, or icons.
Using links to navigate between pages.

This setup provides a flexible, responsive, and easy-to-use sidebar, which is perfect for most web applications.

If you want to see how this kind of sidebar fits into a real dashboard layout, you can explore an open-source Tailwind CSS admin template at https://tailwind-admin.com/.

Try It Out:

You can view the working demo of the tailwind-sidebar here: View Demo.

Note: in this tutorial, we utilized lucide-react to construct this sidebar. Feel free to choose an alternative library or use different icons based on your specific requirements.

You can also try Next.js Tailwind Sidebar – a simple and responsive sidebar built for Next.js, and React Tailwind Sidebar – a lightweight Tailwind-based sidebar for React applications.

How to Integrate Tailwind with Electron – With Code Examples

Abhijeet Dave — Wed, 13 Aug 2025 17:22:22 +0000

In this article, you’ll learn how to integrate Tailwind CSS with Electron to build stylish, responsive desktop applications.

You’ll set up Tailwind in an Electron project, configure your project, style the components, and optimize the development workflow. This is perfect for developers who are looking to combine Tailwind's utility-first CSS framework with Electron's cross-platform capabilities.

Table of Content

A Quick Overview of Electron
What is Tailwind CSS?
Why Electron and Tailwind Work So Well Together
What We’ll Build?
Prerequisites
How to Initialize an Electron Project
How to Integrate Tailwind CSS with Electron?
How to Use a Tailwind Component Library – a Practical Example
Let’s Test FlyonUI JS Components
Conclusion

A Quick Overview of Electron

Electron is a framework that lets developers create desktop applications for Windows, macOS, and Linux using familiar web technologies like HTML, CSS, and JavaScript, along with Node.js for backend features.

It's open-source, MIT-licensed, and completely free to use – whether you're building personal projects or commercial apps.

In this guide, we’ll look at why so many developers and companies choose Electron for building modern desktop apps.

What is Tailwind CSS?

Tailwind CSS is essentially a utility-first framework for styling web interfaces. Unlike frameworks that provide full-blown, pre-designed UI components, Tailwind offers a comprehensive set of single-purpose utility classes. You apply these classes directly to your HTML elements, which means you can rapidly build out custom layouts and designs without diving into separate CSS files.

The big advantage? Precision and flexibility – you can assemble unique, responsive interfaces by combining these classes however you see fit, all while keeping you markup lean and maintainable.

Why Electron and Tailwind Work So Well Together

Electron uses HTML, CSS, and JavaScript to build desktop applications. Essentially, it runs a web app in a desktop shell. This makes it easy to integrate modern frontend tools like Tailwind CSS.

Tailwind's utility-first approach allows you to style interfaces directly in you HTML, which can speed up UI development. Instead of writing custom styles or managing large CSS files, you apply predefined classes directly to elements. This aligns well with Electron's structure, where layout and styles are tightly connected within the same HTML environment.

Tailwind also provides sensible defaults and a consistent design system out of the box. This helps you prototype and build visually consistent desktop apps faster. While some familiarity with CSS is still helpful, Tailwind's approach can reduce the overhead of setting up and managing styles, especially in smaller or design-light projects.

Together, Electron and Tailwind offer a straightforward path to building desktop apps.

What We’ll Build?

In this tutorial, we will create a basic Electron desktop app styled with Tailwind CSS and improved with FlyonUI components. You don’t need any prior experience with Electron or Tailwind.

By the end of the guide, you'll have:

A working desktop window (Electron)
Styled UI with Tailwind CSS
A reusable button component
A fully functional modal dialog powered by FlyonUI

This will provide a solid base for building more complex apps in the future.

Prerequisites

Before we dive in, make sure you have the following:

Basic knowledge of HTML, CSS, and JavaScript. You don’t need to be an expert, but understanding how to structure HTML and use basic JavaScript will help you follow along.
Familiarity with Node.js and npm. We'll use npm (Node Package Manager) to install dependencies and run build commands.
Node.js installed on your machine. You can download it from nodejs.org .
A code editor. I recommend Visual Studio Code.
Terminal / Command Line Access. You’ll need to run commands in the terminal to set things up.

How to Initialize an Electron Project

Let’s set up a basic Electron app from scratch. This will launch a simple desktop window that loads an HTML file, serving as the foundation for your UI.

1. Create Your Project Folder

First, open your terminal and create a new project folder:

mkdir my-electron-app
cd my-electron-app

This creates a new folder called my-electron-app and changes the directory to it. This folder will be your project workspace.

2. Install Electron

Next, install Electron as a development dependency:

npm install electron --save-dev

This will add Electron to your project’s node_modules and update your package.json file.

This command installs Electron as a development dependency. Electron allows you to build desktop apps across different platforms using web technologies like HTML, CSS, and JavaScript.

3. Configure `package.json`

Update your package.json to point to a file named main.js, and add a script for easily starting the app.

Edit your package.json like this:

"main": "main.js",
"scripts": {
  "start": "electron ."
}

"main" defines the entry point of your Electron app (the main process).
"start" is a shortcut to launch the app using npm start.

4. Create `main.js`

Create a file named main.js in your root folder and add the following code:

const { app, BrowserWindow } = require("electron/main");

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile("index.html");
};

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

This is your main process. It creates and manages the app window while loading your HTML file.

5. Create `index.html` (Renderer Process)

html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
    <title>Hello from Electron renderer!title>
  head>
  <body>
    <h1>Hello from Electron renderer!h1>
    <p>p>
    <p id="info">p>
    <script src="./renderer.js">script>
  body>
html>

This is the frontend (renderer) of your Electron app. You can use standard HTML, CSS, and JavaScript here, just like in a browser.

Optional: Create a renderer.js file if you want to add JavaScript interactivity.

6. Run the Electron App

Now, create a file called main.js in the root of your project. This is the main process that starts your Electron app:

npm start

This command runs the app using the script you set up in package.json. A desktop window should open, displaying your HTML content.

How to Integrate Tailwind CSS with Electron?

For this guide, we’ll be using the Tailwind CLI approach.

The Tailwind CLI is a command-line tool that allows you to generate and compile Tailwind utility classes directly into a CSS file. You don’t need complex build tools like Webpack or PostCSS. This makes it perfect for simple projects like Electron apps, where you’d want minimal setup and quick styling. The CLI also has a --watch mode that automatically rebuilds CSS when files change. This feature helps you stay productive.

1. Install Tailwind CSS

First, install Tailwind CSS. Make sure Node.js is installed as well, then run:

npm install tailwindcss @tailwindcss/cli

This command installs Tailwind and its CLI tool as a development dependency in your project. We’ll use the CLI to build and monitor our Tailwind styles.

2. Set Up Tailwind CSS

Create a input.css file with the following content to set up Tailwind:

@import "tailwindcss";

This line instructs Tailwind to generate all its utility classes into one output file, which we’ll compile next.

3. Add a Build Script

Then update your package.json to include a build script:

"scripts": {  
 "watch:css":"npx @tailwindcss/cli -i ./input.css -o ./output.css --watch",
}

This command watches your input.css file and continuously builds a compiled CSS file (output.css) whenever it detects changes. You’ll include this file in your HTML.

4. Link `output.css` in `index.html`

Open your index.html file and add this inside the

<link href="./output.css" rel="stylesheet">

Then compile Tailwind CSS with this command:

npm run watch:css

This step includes the compiled Tailwind styles in your Electron app UI.

5. Compile Tailwind CSS

Run this script to start watching for changes and generate your CSS:

npm run watch:css

Keep this process running in a terminal window. It updates output.css live as you work.

6. Update the UI with Tailwind Classes

Replace your content with this example layout:

<body class="flex items-center justify-center h-screen bg-gray-100">
  <button type="button"
    class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-purple-600 text-white hover:bg-purple-700 focus:outline-hidden cursor-pointer focus:bg-purple-700 disabled:opacity-50 disabled:pointer-events-none">
    Hello Tailwindcss
  button>
body>

7. Run the Electron App

Run the electron server with this command:

npm start

Your Electron window should now open with a well-styled button in the center, thanks to Tailwind CSS.

How to Use a Tailwind Component Library – a Practical Example

We are going to use FlyonUI, an open source Tailwind component library. It includes a mix of utility classes in addition to JavaScript plugins. FlyonUI draws ideas from daisyUI but also from Preline, and combines flexibility and simplicity. It also helps you build interfaces that respond well and appear consistent.

1. Install FlyonUI

You can install FlyonUI with the command below. Make sure Node.js is installed, then run:

npm install -D flyonui@latest

Installs FlyonUI into your project as a development dependency, making its CSS and JS functionality available for integration.

2. Add FlyonUI as plugin in the `input.css`:

@import "tailwindcss";
@plugin "flyonui";
@import "./node_modules/flyonui/variants.css"; /* Needed for JS components */
@source "./node_modules/flyonui/dist/index.js"; /* Needed for JS components */

@plugin "flyonui" injects FlyonUI’s semantic classes into your build.
The @import includes custom variants created for the JS Components.
The @source line is required for the classes used in the js gets generated.

3. Include FlyonUI JavaScript for Interactivity

Right before closing the tag in your HTML, include:

<script src="../node_modules/flyonui/flyonui.js">script>

This script enables the interactive behaviors for FlyonUI components, such as overlays, modals, and dropdowns.

4. Use a FlyonUI Component

For example, update your UI with:

<body class="flex items-center justify-center h-screen bg-gray-100">
  <button type="button" class="btn btn-primary">
    Hello FlyonUI
  button>
body>

The .btn and .btn-primary classes come from FlyonUI—giving you styled, semantic components without crafting custom CSS.

Why It Matters

Cleaner Code: FlyonUI’s semantic classes make your templates more readable and maintainable compared to verbose utility classes.
Interactive Without the Overhead: Easily add dynamic features like modals or accordions through FlyonUI’s JS plugins—no need to code them from scratch.
Effortless Styling: FlyonUI builds on Tailwind’s utility approach, so you can customize components with familiar classes instantly.

Let’s Test FlyonUI JS Components

To show how FlyonUI works, we’ll test one of its JavaScript-powered UI components, the Modal. Modals are common UI elements that grab user attention for alerts, confirmations, or extra information without moving away from the current page.

Testing the modal helps you:

Check that FlyonUI’s JavaScript components load and work properly within your Electron and Tailwind setup.
See how simple it is to add interactive features using FlyonUI’s built-in classes and data attributes.
Understand how the modal responds to different screen sizes and how the UI reacts to user actions like opening and closing dialogs.

Copy the following example code into your index.html file. This button will open a modal dialog with some placeholder content:

We’ll use this Modal example for testing. Copy the following code in your index.html:

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="basic-modal" data-overlay="#basic-modal">Open modalbutton>

<div id="basic-modal" class="overlay modal overlay-open:opacity-100 hidden overlay-open:duration-300" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Dialog Titleh3>
        <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#basic-modal">
          <span class="icon-[tabler--x] size-4">span>
        button>
      div>
      <div class="modal-body">
        This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the
        modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and
        demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling
        will move the modal as needed.
      div>
      <div class="modal-footer">
        <button type="button" class="btn btn-soft btn-secondary" data-overlay="#basic-modal">Closebutton>
        <button type="button" class="btn btn-primary">Save changesbutton>
      div>
    div>
  div>
div>

After updating the file, restart your Electron app:

npm start

Here’s the result:

Conclusion

You can use Tailwind CSS and Electron to build desktop applications that look good and operate well on different devices. This adds to Electron's many functions and Tailwind's good styling system, letting you stay productive and utilize clean design methods.

The full code and more details are in the repository here: ts-electron-tailwindcss.

I have written this tutorial with the help of Pruthvi Prajapati, an experienced Tailwind CSS developer.

How to Build a Telehealth App Using Stream Video and Chat SDK in React

Okoro Emmanuel Nzube — Fri, 18 Jul 2025 22:53:24 +0000

Remember when the COVID-19 pandemic moved everything online – doctor’s visits included – and staying home became the safest option?

That moment kicked off a massive shift in how healthcare gets delivered.

Telehealth became more than a workaround. It’s now a core part of modern care. As demand grows, developers are stepping up to build secure, real-time platforms that connect patients and providers from anywhere.

In this article, you’ll learn how to build a telehealth application with Stream’s React Video and Chat SDKs. You’ll set up authentication, create video calls, enable messaging, and design a functional user interface that mimics real-world telehealth workflows.

Let’s dive in.

Prerequisites

Before you start this tutorial, make sure you have:

A basic understanding of React.
Node.js and npm/yarn installed on your computer
A free account with Stream
Familiarity with Stream SDKs
A basic understanding of Tailwind CSS for styling
Experience with VS Code and Postman (for testing APIs)

App Structure

Before diving into the code, it’s helpful to understand how the app is structured.

# App Flow Structure

- Landing Page  
  - Navigation  
    - Home  
    - About  
    - Sign Up  
      - Verify Account  
        - Log In  
          - Dashboard  
            - Stream Chat  
            - Stream Video  
            - Log Out

Project Setup

Before getting started, create two folders: “Frontend” to handle the client-side code and “Backend” for the server-side logic. This separation allows you to manage both parts of your application efficiently.

Set Up React for the Frontend

Once the folders are created, you can set up the React application in the Frontend folder.

First, navigate to the Frontend directory using the command cd Frontend.

Now you can initialize your React project. You’ll use Vite, a fast build tool for React applications.

To create your React project, run the following command:

npm create vite@latest [project name] -- --template react

Next, navigate to your new project folder, using the command:

cd [project name]

Once there, install the required dependencies by running:

npm install

This command installs both the node_modules folder (which contains all your project's packages) and the package-lock.json file (which records exact versions of installed packages).

Next, you’ll need to install Tailwind CSS for styling. Follow the Tailwind Docs for step-by-step instructions.

Then, it’s time to set up the website. Using React, you’ll create the home sign-in/log-in pages. Both will be nested together using React-router-dom.

Here’s what the home page looks like:

Now, the user has a place to land whenever they visit the website.

Let’s set up the backend.

Backend Setup

Installing Required Packages

Before setting up your project's backend, it's important to define what your project needs to offer. This will help you install all the necessary packages in one go.

Start by moving into the backend folder using the command: cd Backend

Inside the Backend directory, initialize your Node.js project using npm install

This will create a package.json file, which stores metadata and dependencies for your project.

Next, install all the dependencies needed to build your backend. Run the following command:

npm i bcryptjs cookie-parser cors dotenv express jsonwebtoken mongoose nodemailer validator nodemon

Here’s a brief overview of what each package does:

bcryptjs: Encrypts user passwords for secure storage.
Cookie-parser: Handles cookies in your application.
CORS: Middleware that enables cross-origin requests – essential for frontend-backend communication.
dotenv: Loads environment variables from a .env file into process.env.
Express: The core framework for building your server and API routes.
jsonwebtoken: Generates and verifies JWT tokens for authentication.
Mongoose: Connects your app to a MongoDB database.
nodemailer: Handles sending emails from your application.
Validator: Validates user inputs like email, strings, and so on.
nodemon: Automatically restarts your server when changes are made to files.

Once your packages are installed, create two key files in the backend directory: App.js, which contains your app logic, middleware, and route handlers, and server.js, responsible for initializing and configuring your server.

Next, you have to update your package.json start script. Head to the package.json file in your backend directory and replace the default script:

"scripts": {
    "test": "echo\”Error: no test specified\" && exit 1”
  }

with this:

"scripts": {
    "start": "nodemon server.js"
  }

This setup allows you to run your server using nodemon, automatically reloading it when changes are made. This helps boost productivity during development.

To check if your backend setup is correct, open the server.js file and add a test log: console.log (“Any of your Log Message”). Then, head to your terminal in the backend directory, and run npm start. You should see the log message in the terminal, confirming that your backend is running.

`App.js` Setup

In the App.js file, start by importing the packages you initially installed.

const express = require("express");

const cors = require("cors");

const cookieParser = require("cookie-parser");

const app = express();


app.use(

  cors({

origin: [

   "http://localhost:5173",

],

credentials: true,

  })

);

app.use(express.json({ limit: "10kb" }));

app.use(cookieParser());

module.exports = app;

Here’s what the code above does:

The require statements import express, cors, and cookie-parser, which are essential for creating your backend server, handling cross-origin requests, and parsing cookies.

The const app = express(); command sets up a new instance of an Express application.

app.use(cors({ origin: ["http://localhost:5173"], credentials: true })); grants permission or allows requests from your frontend and enables cookie sharing between the frontend and backend of your application. This is important for authentication.

The app.use(express.json({ limit: "10kb" })); command is a middleware function that ensures the server can process incoming JSON payloads and protects against overly large requests, which could be used in DoS attacks.

The app.use(cookieParser()); command makes cookies available via req.cookies.

Last, the module.exports = app; command allows the app to be imported in other files, especially in server.js, which is where the app will be started.

`Server.js` Setup

Once App.js is set up, the next step is to create and configure your server in a new file called server.js.

Before doing that, ensure you have a MongoDB database set up. If you don’t have one yet, you can follow this video tutorial to set up a MongoDB database.

After setting up MongoDB, you will receive a username and password. Copy the password, head to your backend directory, and create a .env file to store it.

After you have stored the password, head back to complete your database setup.

Next, click on the “Create Database User” button, then click on the choose connection method option. Since we are using Node.js for this project, choose the “Drivers” option. This gives you the database connection string (you should see it at No. 3).

Then head to your .env and paste it there, and add auth immediately after you have “.net/”.

Here’s what it looks like:

mongodb+srv://:@cluster0.qrrtmhs.mongodb.net/auth?retryWrites=true&w=majority&appName=Cluster0

Lastly, whitelist your IP address. This ensures your backend can connect to MongoDB from your local machine or any environment during development.

To allow your application to connect to the database:

Go to the "Network Access" section in the Security sidebar of your MongoDB dashboard.
Click on “ADD IP ADDRESS.”
Choose “Allow Access from Anywhere”, then click on Confirm.

At this point, you can set up your server.js

//server.js
require("dotenv").config();
const mongoose = require("mongoose");
const dotenv = require("dotenv"); //to Manage our environment variable

dotenv.config({ path: "./config.env" });
// console.log(process.env.NODE_ENV);

const app = require("./app");

const db = process.env.DB;
//connect the application to database using MongoDB

mongoose
  .connect(db)
  .then(() => {
    console.log("DB connection Successful");
  })
  .catch((err) => {
    console.log(err);
  });

const port = process.env.PORT || 3000;
// console.log(process.env.PORT)

app.listen(port, () => {
  console.log(`App running on port ${port}`);
});

The server.js file is responsible for handling all server-related functions and logic. From the code above, the server.js file loads the environment variables using dotenv, connects your backend to MongoDB using mongoose, and starts the Express server. It gets the database URL and port from the config.env file, connects to the database, then runs your application on the specified port (8000).

If the specified port is not found, it falls back to port 3000 and a confirmation message is printed to the console indicating that the server is up and running on the specified port.

Connect the Database to MongoDB Compass

First, download the MongoDB Compass app. (Go here to download and install: https://www.mongodb.com/try/download/compass). The MongoDB Compass app makes it easy for us to manage our data.

Once the installation is complete, open the app and click on Click to add new connection. Go to your .env file, copy the connection string you initially got when setting up MongoDB, paste it in the URL section, and then click on “connect.” This setup helps you manage your data when you create and delete users.

Set up an Advanced Error Handling Method

You’ll now create an advanced error-handling mechanism. To do so, create a utils folder in your backend, a catchAsync.js file in the utils folder, and add this code:

//catchAsync.js
module.exports = (fn) => {
  return (req, res, next) => {
    fn(req, res, next).catch(next);
  };
};

Next, create an appError.js file still in your utils folder. In the appError.js file, add the following command:

class AppError extends Error {
  constructor(message, statusCode) {
    super(message);

    this.statusCode = statusCode;
    this.status = `${statusCode}`.startsWith("4") ? "fail" : "error";
    this.isOperational = true;

    Error.captureStackTrace(this, this.constructor);
  }
}

module.exports = AppError;

The code above is helpful in tracking and tracing errors. It also provides you with the URL and file location where your error might be occurring, which helps with cleaner error handling and debugging.

Next, let’s create a global error handler. Start by creating a new folder in the backend directory, and name it “controller”. In the controller folder, create your global error handling file. You can name it anything you like. In this example, it’s called globalErrorHandler.js.

Your globalErrorHandler file will define several functions that handle specific error types, such as database issues, validation failures, or even JWT problems and return a nicely formatted error response for users. For the globalErrorHandler to work properly, you have to create a controller function.

So, next, create an errorController.js file (still inside the controller folder). The errorController.js file responds to the user whenever an error is caught, sending the error in JSON format.

globalErrorHandler.js:

// globalErrorHandler.js
const AppError = require("../utils/appError");

const handleCastErrorDB = (err) => {
  const message = `Invalid ${err.path}: ${err.value}.`;
  return new AppError(message, 400);
};

const handleDuplicateFieldsDB = (err) => {
  const value = err.keyValue ? JSON.stringify(err.keyValue) : "duplicate field";
  const message = `Duplicate field value: ${value}. Please use another value!`;
  return new AppError(message, 400);
};

const handleValidationErrorDB = (err) => {
  const errors = Object.values(err.errors).map((el) => el.message);
  const message = `Invalid input: ${errors.join(". ")}`;
  return new AppError(message, 400);
};

const handleJWTError = () =>
  new AppError("Invalid token. Please log in again!", 401);
const handleJWTExpiredError = () =>
  new AppError("Your token has expired! Please log in again.", 401);

module.exports = {
  handleCastErrorDB,
  handleDuplicateFieldsDB,
  handleValidationErrorDB,
  handleJWTError,
  handleJWTExpiredError,
};

Here’s what the code above does:

The const handleCastErrorDB = (err) =>.. section handles MongoDB CastError which usually happens when an invalid ID is passed, and returns a 400 Bad Request error response using your AppError class.

The const handleDuplicateFieldsDB = (err) =>... checks and handles MongoDB duplicate key errors, such as trying to register an email or username that’s already taken and returns a 400 Bad Request error.

The const handleValidationErrorDB = (err) =>... handles Mongoose validation errors (like required fields missing or wrong data types). It gathers all the individual validation error messages and combines them into one.

The const handleJWTError = () => and const handleJWTExpiredError = () => handle errors which might occur as a result of invalid, tampered, or expired JWT tokens and return a 401 Unauthorized error response.

The module.exports = {……}; section exports all the individual error handlers so they can be used in the errorController.js file.

errorController.js:

//errorController.js
const errorHandlers = require("./globalErrorHandler");

const {
  handleCastErrorDB,
  handleDuplicateFieldsDB,
  handleValidationErrorDB,
  handleJWTError,
  handleJWTExpiredError,
} = errorHandlers;

module.exports = (err, req, res, next) => {
  err.statusCode = err.statusCode || 500;
  err.status = err.status || "error";

  let error = { ...err, message: err.message };

  if (err.name === "CastError") error = handleCastErrorDB(err);
  if (err.code === 11000) error = handleDuplicateFieldsDB(err);
  if (err.name === "ValidationError") error = handleValidationErrorDB(err);
  if (err.name === "JsonWebTokenError") error = handleJWTError();
  if (err.name === "TokenExpiredError") error = handleJWTExpiredError();

  res.status(error.statusCode).json({
    status: error.status,
    message: error.message,
    ...(process.env.NODE_ENV === "production" && { error, stack: err.stack }),
  });
};

To ensure your error-handling function works properly, head to your App.js and add the command:

//import command
const globalErrorHandler = require("./controller/errorController");
const AppError = require("./utils/appError");

//Catch unknown routes
app.all("/{*any}", (req, res, next) => {
  next(new AppError(`Can't find ${req.originalUrl} on this server!`, 404)); });

app.use(globalErrorHandler);

This ensures that all errors are properly handled and sends the error response to the user.

Create User Model

To build a user model, create a new folder in the backend directory and name it “model.” Inside the model folder, create a new file named userModel.js.

The userModel.js file is built essentially for user authentication and security. It provides a validation-rich schema for managing users using Mongoose, which maps how user data is structured in the MongoDB database. It includes validations, password hashing, and methods to compare user passwords securely.

//userModel.js
const mongoose = require("mongoose");
const validator = require("validator");
const bcrypt = require("bcryptjs");

const userSchema = new mongoose.Schema(
  {
    username: {type: String, required: [true, "Please provide username"], trim: true, minlength: 3, maxlength: 30, index: true,},
    email: {type: String, required: [true, "Please Provide an email"], unique: true, lowercase: true, validate: [validator.isEmail, "Please provide a valid email"],},
    password: {type: String, required: [true, "Please provide a Password"], minlength: 8, select: false,},
    passwordConfirm: {type: String, required: [true, "Please confirm your Password"],
     validate: {validator: function (el) {return el === this.password;},
        message: "Passwords do not match",
      },
    },
    isVerified: {type: Boolean, default: false,}, otp: String,
    otpExpires: Date,
     resetPasswordOTP: String,
      resetPasswordOTPExpires: Date,
    createdAt: {type: Date, default: Date.now,},}, { timestamps: true });

// Hash password before saving
userSchema.pre("save", async function (next) {
  if (!this.isModified("password")) return next();

  this.password = await bcrypt.hash(this.password, 12);
  this.passwordConfirm = undefined; // Remove passwordConfirm before saving
  next();
});

const User = mongoose.model("User", userSchema);
module.exports = User;

Auth Controller

Now, you can create logic that regulates your user's authentication process. This authentication logic consists of the sign-up, sign-in (log-in), OTP, and so on.

To do so, first head to your controller folder and create a new file. Call it authController.js because it handles the authentication flow of your project.

After you’ve created the file, you’ll create your sign-up function.

//import
const User = require("../model/userModel");
const AppError = require("../utils/appError");
const catchAsync = require("../utils/catchAsync");
const generateOtp = require("../utils/generateOtp");
const jwt = require("jsonwebtoken");
const sendEmail = require("../utils/email")

exports.signup = catchAsync(async (req, res, next) => {
  const { email, password, passwordConfirm, username } = req.body;

  const existingUser = await User.findOne({ email });

  if (existingUser) return next(new AppError("Email already registered", 400));

  const otp = generateOtp();

  const otpExpires = Date.now() + 24 60 60 * 1000; //when thhe otp will expire (1 day)

  const newUser = await User.create({
    username,
    email,
    password,
    passwordConfirm,
    otp,
    otpExpires,
  });

  //configure email sending functionality
  try {
    await sendEmail({
      email: newUser.email,
      subject: "OTP for email Verification",
      html: `Your OTP is : ${otp}
`,
    });

    createSendToken(newUser, 200, res, "Registration successful");
  } catch (error) {
    console.error("Email send error:", error);
    await User.findByIdAndDelete(newUser.id);
    return next(
      new AppError("There is an error sending the email. Try again", 500)
    );
  }
});

const { email, password, passwordConfirm, username } = req.body; extracts the necessary registration details from the incoming request: email, password, password confirmation, and username during user sign-up.

const existingUser = await User.findOne({ email }); checks the database to see if a user already exists with the given email. If yes, it sends an error response using your AppError utility.

const otp = generateOtp(); generates the OTP, and const otpExpires = Date.now()….. is used to set the OTP to expire at a specified time or day.

With const newUser = await User.create({…});, the new user is saved in MongoDB with their credentials and the OTP info, with the password automatically hashed.

await sendEmail({…}); sends an email to the user. This email contains their sign-in OTP. If the email is sent successfully, createSendToken(newUser, 200, res, "Registration successful"); (which is a utility function) generates a JWT token and sends it in the response with a success message.

If the email fails to send or something goes wrong, await User.findByIdAndDelete(newUser.id); deletes the user from the database to keep things clean, and an error message of There is an error sending the email. Try again", 500 is returned.

Generate OTP

To ensure that your users' OTP is successfully sent to them, in the utils folder, create a new file and name it generateOtp.js. Then add the code:

module.exports = () => {
  return Math.floor(1000 + Math.random() * 9000).toString();
};

The code above is a function that generates a user's random 4-digit OTP and returns it as a string.

After completing the code above, go to your authController.js and ensure you import the generateOtp.js in the import section.

Create User Token

Next, the user sign-in token will be created, and it will be assigned to the user upon sign-in.

const signToken = (userId) => {
  return jwt.sign({ id: userId }, process.env.JWT_SECRET, {
    expiresIn: process.env.JWT_EXPIRES_IN || "90d",
  });
};

//function to create the token
const createSendToken = (user, statusCode, res, message) => {
  const token = signToken(user._id);

  //function to generate the cookie
  const cookieOptions = {
    expires: new Date(
      Date.now() + process.env.JWT_COOKIE_EXPIRES_IN 24 60 60 1000
    ),

    httponly: true,
    secure: process.env.NODE_ENV === "production", //only secure in production
    sameSite: process.env.NODE_ENV === "production" ? "none" : "Lax",
  };

  res.cookie("token", token, cookieOptions);

  user.password = undefined;
  user.passwordConfirm = undefined;
  user.otp = undefined;

Before the code above can work perfectly, create a JWT in your .env file.

//.env
JWT_SECRET = kaklsdolrnnhjfsnlsoijfbwhjsioennbandksd;
JWT_EXPIRES_IN = 90d
JWT_COOKIE_EXPIRES_IN = 90

The code above is how the .env file should look. Your JWT_SECRET can be anything, just as you can see in the code.

Note: The user token creation logic should run before the sign-in logic. So in that case, the signToken and createSendToken logic should be placed at the top before the signup logic.

Send Email

Next, you need to configure your email sending functionality so you can automatically send the user's OTP to their email whenever they sign in. To configure the email, head to the utils folder, create a new file, and give it a name. In this example, the name is email.js.

In email.js, we will send emails using the nodemailer package and Gmail as a provider.

//email.js
const nodemailer = require('nodemailer');

const sendEmail = async (options) => {
  const transporter = nodemailer.createTransport({
    service: 'Gmail',
    auth: {
      user: process.env.HOST_EMAIL,
      pass: process.env.EMAIL_PASS
    }
  })

  //defining email option and structure

  const mailOptions = {
    from: `"{HOST Name}" <{HOST Email} >`,
    to: options.email,
    subject: options.subject,
    html: options.html,
  };
  await transporter.sendMail(mailOptions);
};

module.exports = sendEmail;

From the code above, the const nodemailer = require('nodemailer'); command imports the nodemailer package. This is a popular Node.js library for sending emails.

The const transporter = nodemailer.createTransport({…..}) is an email transporter. Since we will be using the Gmail service provider, service will be assigned to Gmail and auth pulls your Gmail address and password from the .env file where it’s stored.

Note: The password is not your actual Gmail password but rather your Gmail app password. You can see how you can get your Gmail password here.

Once you’ve successfully gotten your Gmail app password, store it in your .env file.

Route Creation

At this point, you have finished setting up your project's signup function. Next, you need to test whether your signup works properly using Postman. But before that, let’s set up and define a route where the signup function will be executed.

To set up your route, create a new folder in your backend directory named "routes" and a file named userRouter.js.

const express = require("express");
const {signup} = require(“../controller/authController”);

const router = express.Router();
router.post("/signup", signup);

module.exports = router;

Next, go to your App.js file and add the router to it.

const userRouter = require("./routes/userRouters"); //Route import statement
app.use("/api/v1/users", userRouter) //common route for all auth, i.e sign up, log in, forget password, etc.

After setting up your routes, you can test your signup to see if it works. This is a post request, and the route URL will be http://localhost:8000/api/v1/users/signup.

The image above shows that the signup function works perfectly with a statusCode of 200 and an OTP code being sent to the user’s email.

Congratulations on reaching this point! You can check your MongoDB database to see if the user is displayed there.

From the image above, you can see that the user details are obtained and the password is in an encrypted form, which ensures the user credentials are safe.

Create a Verify Account Controller Function

In this section, you’ll create a Verify Account controller function. This function verifies a user’s account using the OTP code sent to their email address.

First, go to your authController.js file and add:

exports.verifyAccount = catchAsync(async (req, res, next) => {
  const { email, otp } = req.body;

  if (!email || !otp) {
    return next(new AppError("Email and OTP are required", 400));
  }

  const user = await User.findOne({ email });

  if (!user) {
    return next(new AppError("No user found with this email", 404));
  }

  if (user.otp !== otp) {
    return next(new AppError("Invalid OTP", 400));
  }

  if (Date.now() > user.otpExpires) {
    return next(
      new AppError("OTP has expired. Please request a new OTP.", 400)
    );
  }

  user.isVerified = true;
  user.otp = undefined;
  user.otpExpires = undefined;

  await user.save({ validateBeforeSave: false });

  // ✅ Optionally return a response without logging in
  res.status(200).json({
    status: "success",
    message: "Email has been verified",
  });
});

Next, create a middleware function to authenticate the currently logged-in user.

In your backend directory, create a new folder called middlewares. Inside the middlewares folder, create a file named isAuthenticated.js.

Add the following code:

//isAuthenticated.js
const jwt = require("jsonwebtoken");
const catchAsync = require("../utils/catchAsync");
const AppError = require("../utils/appError");
const User = require("../model/userModel");

const isAuthenticated = catchAsync(async (req, res, next) => {
  let token;

  // 1. Retrieve token from cookies or Authorization header
  if (req.cookies?.token) {
    token = req.cookies.token;
  } else if (req.headers.authorization?.startsWith("Bearer")) {
    token = req.headers.authorization.split(" ")[1];
  }

  if (!token) {
    return next(
      new AppError(
        "You are not logged in. Please log in to access this resource.",
        401
      )
    );
  }

  // 2. Verify token
  let decoded;
  try {
    decoded = jwt.verify(token, process.env.JWT_SECRET);
  } catch (err) {
    return next(
      new AppError("Invalid or expired token. Please log in again.", 401)
    );
  }

// 3. Confirm user still exists in database
  const currentUser = await User.findById(decoded._id);
  if (!currentUser) {
    return next(
      new AppError("User linked to this token no longer exists.", 401)
    );
  }

  // 4. Attach user info to request
  req.user = currentUser;
  req.user = {
    id: currentUser.id,
    name: currentUser.name,
  };

  next();
});

module.exports = isAuthenticated;
```
Now, go to your `userRouter.js` file and add the route for the verify account function:
```
const { verifyAccount} = require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");
router.post("/verify", isAuthenticated, verifyAccount);

Here is what these two sets of code are doing:

When a user sends a request to the /verify route, the isAuthenticated middleware runs first. It checks whether a valid token exists in the cookie or authorization header. If no token is found, it throws an error: You are not logged in. Please log in to access this resource.

If a token is found, it verifies the token and checks if the associated user still exists. If not, another error is thrown: "User linked to this token no longer exists."

If the user exists and the token is valid, their details are attached to the request (req.user). The request then proceeds to the verifyAccount controller, which handles OTP verification.

You can test this endpoint using Postman with a POST request to: http://localhost:8000/api/v1/users/verify

The image above shows that the verify token function is working well, and a status code of 200 is displayed.

If you’ve reached this point, you’ve successfully signed up and verified a user’s account.

Now it’s time to create the login function, which allows a verified user to access their account. Here’s how you can do that:

Go to your authController.js file and create your login function by adding the following:

exports.login = catchAsync(async (req, res, next) => {
  const { email, password } = req.body;

  // 1. Validate email & password presence
  if (!email || !password) {
    return next(new AppError("Please provide email and password", 400));
  }

  // 2. Check if user exists and include password
  const user = await User.findOne({ email }).select("+password");
  if (!user || !(await user.correctPassword(password, user.password))) {
    return next(new AppError("Incorrect email or password", 401));
  }

  // 3. Create JWT token
  const token = signToken(user._id);

  // 4. Configure cookie options
  const cookieOptions = {
    expires: new Date(
      Date.now() +
        (parseInt(process.env.JWT_COOKIE_EXPIRES_IN, 10) || 90) 24 60 60 1000
    ),
    httpOnly: true,
    // secure: process.env.NODE_ENV === "production",
    // sameSite: process.env.NODE_ENV === "production" ?
    //  "None" : "Lax",

    //set to false during or for local HTTP and cross-origin
    secure: false,
    sameSite: "Lax",
  };

  // 5. Send cookie
  res.cookie("token", token, cookieOptions);

});

if (!email || !password) {…} checks if the user actually provided both an email and a password. If not, it returns the error: Please provide email and password", 400.

const user = await User.findOne({ email }).select("+password"); searches the database for a user with the provided email and explicitly includes the password field, since it’s normally hidden by default in the schema.

if (!user || !(await user.correctPassword(…))) {…} checks if the user exists and if the password entered matches the one stored in the database (after hashing comparison). If either is wrong, it throws: Incorrect email or password.

The line signToken(user._id) generates a JWT using the user's unique ID. The cookieOptions object configures how the cookie behaves – it sets the cookie to expire after a specific number of days defined in the .env file, marks it as httpOnly to prevent JavaScript access for security, sets secure to false since the app is currently in development, and uses sameSite: "Lax" to allow cross-origin requests during local testing.

Finally, res.cookie(...) sends the token as a cookie attached to the HTTP response, enabling the client to store the token for authentication purposes.

From the code above, you may have noticed that the password stored in the database is hashed for security reasons. This means it looks completely different from the user's password when logging in. So, even if a user types in the correct password, it won't match the stored hash directly through a simple comparison.

To fix this, you need to compare the entered password with the hashed one using the bcryptjs package.

Head over to your userModel.js file and create a method that handles password comparison. This method will take the plain text password provided by the user and compare it to the hashed password stored in the database.

//userModel.js
//create a method responsible for comparing the password stored in the database

userSchema.methods.correctPassword = async function (password, userPassword) {
  return await bcrypt.compare(password, userPassword);
};

This correctPassword method uses bcrypt.compare(), which internally hashes the plain password and checks if it matches the stored hashed version. This ensures that login validation works correctly and securely, even though the actual password is not stored in plain text.

Next, add the Login functionality to the userRouter.js file.

const {login} = require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");

router.post("/login", login);

You can test this endpoint using Postman with a POST request to: http://localhost:8000/api/v1/users/login

Logout Function

At this point, you can implement the logout function to end a user's session securely. To do this, navigate to your authController.js file and add the following function:

//creating a log out function
exports.logout = catchAsync(async (req, res, next) => {
  res.cookie("token", "loggedout", {
    expires: new Date(0),
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
  });

  res.status(200).json({
    status: "success",
    message: "Logged out successfully",
  });
});

This function works by overwriting the authentication cookie named token with the value "loggedout" and setting its expiration time to the past using new Date(0). This effectively invalidates the cookie and removes it from the browser.

The httpOnly: true flag ensures that the cookie cannot be accessed via JavaScript, which protects it from XSS attacks, while the secure flag ensures that the cookie is only sent over HTTPS in a production environment. Once the cookie is cleared, a success response is returned with the message "Logged out successfully" to confirm the action.

Next, add the logout functionality to your route:

const {logout} = require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");

router.post("/logout", logout);

Then, head to Postman to test your logout function and see if it works.

Frontend Setup

Now that your backend is up and running, you can integrate it into your frontend application.

First, navigate to the frontend directory using the command cd Frontend.

Create a new folder in the src folder where your authentication-related files will live. Depending on your preference or app structure, you can name it something like auth or pages. Then, create a new file called NewUser. js. This file will handle user signup functionality.

import axios from 'axios';
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Loader } from 'lucide-react';
import { useDispatch } from 'react-redux';
import { setAuthUser, setPendingEmail } from '../../../../store/authSlice';

const API_URL = import.meta.env.VITE_API_URL;

function NewUser() {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const [loading, setLoading] = useState(false);

  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
    passwordConfirm: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const submitHandler = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const response = await axios.post(`${API_URL}/users/signup`, formData, {
        withCredentials: true,
      });
      const user = response.data.data.user;
      dispatch(setAuthUser(user));
      dispatch(setPendingEmail(formData.email)); // Save email for OTP
      navigate('/verifyAcct'); // Navigate to OTP verification page
    } catch (error) {
      alert(error.response?.data?.message || 'Signup failed');
    } finally {
      setLoading(false);
    }
  };

  return (
<div>
// visit the frontend Github repository to see the remaining code for the OTP Verification

https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/pages/Auth/Join/NewUser.jsx
    div>
  );
}

export default NewUser;

The code above renders a signup form with fields for username, email, password and passwordConfirm. When the user submits the form, the frontend sends a POST request to the backend’s /users/signup endpoint using Axios. The withCredentials: true option ensures cookies like the auth token are properly set by the backend.

If the signup is successful, the user data is dispatched into Redux using setAuthUser(), and their email is saved with setPendingEmail() so it can be used during OTP verification. Then, the user is redirected to the /verifyAcct route, where they can enter their OTP.

OTP Verification Page

The OTP verification page is the next step in the user authentication process. Once a user signs up, they are redirected to enter the 4-digit OTP sent to their email. This verifies their account before allowing login access.

import React, { useState, useRef, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate, Link } from 'react-router-dom';
import axios from 'axios';
import { clearPendingEmail } from '../../../../store/authSlice';

const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api'; // adjust as needed

function VerifyAcct() {
  const [code, setCode] = useState(['', '', '', '']);
  const [loading, setLoading] = useState(false);
  const [resendLoading, setResendLoading] = useState(false);
  const [timer, setTimer] = useState(60);

  const inputsRef = useRef([]);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const email = useSelector((state) => state.auth.pendingEmail);

  useEffect(() => {
    let interval;
    if (timer > 0) {
      interval = setInterval(() => setTimer((prev) => prev - 1), 1000);
    }
    return () => clearInterval(interval);
  }, [timer]);

  const handleChange = (value, index) => {
    if (!/^\d*$/.test(value)) return;
    const newCode = [...code];
// visit the frontend Github repository to see the remaining code for the OTP Verification
https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/pages/Auth/login/VerifyAcct.jsx
}
export default VerifyAcct;

Here’s what the code does:

The OTP is stored as an array of 4 characters ([‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘]). Each box only accepts digits, and focus automatically moves to the next input as the user types in the digit. The focus returns to the previous input box if the user presses the backspace button on an empty box.

When the OTP has been added and the form is submitted, the 4-digit code is joined into a string and an HTTP POST request is made to the backend /user/verify/ endpoint along with the stored email and OTP. If the verification is successful, the user is alerted and redirected to the login page, and if not, an error is shown.

Log In

Now you can create the login interface for your application. First, create a Login.jsx file and input the code:

//Login.Jsx

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';

const API_URL = import.meta.env.VITE_API_URL || 'https://telehealth-backend-2m1f.onrender.com/api/v1';

function Join() {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    try {
      const res = await axios.post(`${API_URL}/users/login`, formData, {
        withCredentials: true,
      });

      if (res.data.status === 'success') {
        const { token, user, streamToken } = res.data;

        // Save to localStorage
        localStorage.setItem('authToken', token);
        localStorage.setItem('user', JSON.stringify(user));
        localStorage.setItem('streamToken', streamToken);

        navigate('/dashboard');
      }
    } catch (err) {
      console.error(err);
      setError(
        err.response?.data?.message || 'Something went wrong. Please try again.'
      );
    } finally {
      setLoading(false);
    }
  };

  return (
<div>
{// visit the frontend Github repository to see the remaining code for the OTP Verification
https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/pages/Auth/login/Login.jsx
 div>
);
}

The Export default Join; component allows a registered and verified user to log into your application using their email and password. It handles form submission, talks to the backend, and securely stores user data if login is successful.

handleChange() updates the email or password field as the user types.

handleLogin() is triggered when the login form is submitted. When the login button is triggered, it sends a Post request to /users/login with the form data, which includes {withCredentials: true} to enable cookie handling.

If login is successful, it extracts the JWT token, user data, and Stream Chat token from the response and stores them in the localStorage so the user stays logged in across sessions. Then it redirects the user to the dashboard page using navigate(‘/dashboard’).

Set Up the Frontend Route

Just as you set up the backend route, you have to do the same for the frontend.

Head to App.jsx. Before adding the route, make sure you have installed the react-router-dom package. If not, run this command in the frontend terminal:

npm install react-router-dom

Then, add the command to your App.jsx file:

import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import HomeIndex from './pages/Home/HomeIndex';
import Hero from './pages/Home/Hero';

//Authentication Section
import NewUser from './pages/Auth/Join/NewUser';
import Login from './pages/Auth/login/Login'
import VerifyAcct from './pages/Auth/login/VerifyAcct';

// Dashboard
import Dashboard from './pages/Dashboard/Dashboard';
import VideoStream from './components/VideoStream';

const router = createBrowserRouter([
  {
    path: '/',
    element: <HomeIndex />,
    children: [
      { index: true, element: <Hero /> }
    ],
  },

  {
    path: 'signup',
    element: <NewUser />,
    children: [
      { index: true, element: <NewUser /> }
    ],
  },

  {
    path: 'login',
    element: <Login />,
    children: [
      {index:true, element:<Login />}
    ]
  },

]);
{// visit the frontend Github repository to see the remaining code for the OTP Verification
https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/App.jsx}

function App() {
  return (
    <div className='border border-red-700 w-full min-w-[100vw] min-h-[100vh]'>
      <RouterProvider router={router} />
    div>
  );
}

export default App;

Stream Chat and Video Integration

Before proceeding to the dashboard, let’s integrate the Stream Chat and Video functionality into the project.

First, create a free Stream account, start a new project in your dashboard, and get your APP KEY and API_SECRET.

STREAM_API_KEY=your_app_key
STREAM_API_SECRET=your_api_secret

Watch the Stream Chat React Quick Start Guide to see how you can set it up.

Next, store your Stream APP KEY and API_SECRET in your .env.

Install Stream Packages (Frontend)

Now, install the Stream Chat and Video packages in your terminal.

npm install stream-chat stream-chat-react
npm install @stream-io/video-react-sdk
npm install @stream-io/stream-chat-css

Stream Token Handler

First, create a new file in your frontend Src directory and name it. In this example, it’s StreamContext.jsx. This file sets up a context to fetch and manage the Stream Chat token on login and includes logout functionality.

import React, { createContext, useContext, useEffect, useState } from "react";
import axios from "axios";

const API_URL = import.meta.env.VITE_API_URL || 'https://telehealth-backend-2m1f.onrender.com/api/v1';

// 1. Create the context
const StreamContext = createContext();

// 2. Provider component
export const StreamProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(null);

  useEffect(() => {
    const fetchToken = async () => {
      try {
        const res = await axios.get(`${API_URL}/stream/get-token`, {
          withCredentials: true,
        });

        if (res.data?.user && res.data?.token) {
          setUser(res.data.user);
          setToken(res.data.token);
          console.log("Stream user/token:", res.data);
        } else {
          console.error("Token or user missing in response:", res.data);
        }
      } catch (error) {
        console.error("Error fetching Stream token:", error);
      }
    };

    fetchToken();
  }, []);

  //Log out Functionality
  const logout = async () => {
    try {
      await axios.post(`${API_URL}/users/logout`, {},
        {
          withCredentials: true
        });

      // Clear localStorage
      localStorage.removeItem('authToken');
      localStorage.removeItem('user');
      localStorage.removeItem('streamToken');

      // Clear context
      setUser(null);
      setToken(null);
    } catch (error) {
      console.error("Logout failed", error);
    }
  };

  // Expose Logout with capital L
  return (
    <StreamContext.Provider value={{ user, token, Logout:logout }}>
      {children}
    StreamContext.Provider>
  );
};

// 3. Custom hook for easy access
export const useStream = () => useContext(StreamContext);

The code above creates a StreamContext using React’s Context API. In the useEffect section, it makes a GET request to /stream/get-token to fetch the authenticated user and their Stream token. Then it stores them in user and token states. It also provides the user/token through the context so that any component that needs it can make use of it.

Finally, it adds a Logout method that hits the logout endpoint and clears all stored auth data from localStorage.

Next, open your main.jsx and wrap your entire application with the StreamProvider so all child components can access the Stream context.

// main.jsx
import { createRoot } from 'react-dom/client';
import { StrictMode } from 'react';
import App from './App';
import { StreamProvider } from './components/StreamContext';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <StreamProvider>
      <App />
    StreamProvider>
  StrictMode>
);

Set Up Stream API

After successfully creating the streamContent, the next step is to set up the Stream API. This will be the endpoint from which the user ID and user Stream token can be generated and fetched during login.

To set it up, navigate to your backend directory by running cd Backend in your terminal. Then install the Stream package using the command:

npm install getstream
npm install stream-chat stream-chat-react

Open your .env file and add your Stream API KEY and API_SECRET:

STREAM_API_KEY=your_app_key
STREAM_API_SECRET=your_api_secret

Next, open your authController.js and create your Stream Chat logic:

//Initialize the Stream Client
const {StreamChat} = require("stream-chat");
const streamClient = StreamChat.getInstance(
  process.env.STREAM_API_KEY,
  process.env.STREAM_API_SECRET
);

// Modifies the `createSendToken to include `streamToken`
const createSendToken = (user, statusCode, res, message) => {
……
const streamToken = streamClient.createToken(user._id.toString());

  //structure of the cookie response when sent to the user
  res.status(statusCode).json({
    status: "success",
    message,
    token,
    streamToken,
    data: {
      user: {
        id: user._id.toString(),
        name: user.username,
      },
    },
  });
};

//login functionality
exports.login = catchAsync(async (req, res, next) => {
 {…………………..}

// Generate Stream token
  await streamClient.upsertUser({
    id: user._id.toString(),
    name: user.username,
  });
  const streamToken = streamClient.createToken(user._id.toString());

user.password = undefined;

  res.status(200).json({
    status: "success",
    message: "Login successful",
    token,
    user: {
      id: user._id.toString(),
      name: user.username,
    },
    streamToken,
  });

`streamRoutes` Endpoint

Next, create an endpoint from which the Stream token can be called. To do this, go to your routes folder and create a new file called streamRoutes.js. In streamRoutes.js, add the command:

const express = require("express");
const { StreamChat } = require("stream-chat");

const protect = require("../middlewares/protect");

const router = express.Router();

const apiKey = process.env.STREAM_API_KEY;
const apiSecret = process.env.STREAM_API_SECRET;

if (!apiKey || !apiSecret) {
  throw new Error(
    "Missing Stream credentials. Check your environment variables."
  );
}

const streamClient = StreamChat.getInstance(apiKey, apiSecret);

router.get("/get-token", protect, async (req, res) => {
  try {
    const { id, username } = req.user || {};
    console.log(req.user.id, "User");
    // TRY LOGGING THE ID AND NAME FROM YOUR REQUEST FIRST

    if (!id || !username) {
      return res.status(400).json({ error: "Invalid user data" });
    }

    // const userId = _id.toString();
    const user = { id, username };

    // Ensure user exists in Stream backend
    await streamClient.upsertUser(user);

    // Add user to my_general_chat channel
    const channel = streamClient.channel("messaging", "my_general_chat");
    await channel.addMembers([id]);


    // Generate token
    const token = streamClient.createToken(id);
    res.status(200).json({ token, user });
  } catch (error) {
    console.error("Stream token generation error:", error);
    res.status(500).json({ error: "Failed to generate Stream token" });
  }
});

/**
 * @route   POST /api/stream/token
 * @desc    Generate a Stream token for any userId from request body (no auth)
 * @access  Public
 */
router.post("/token", async (req, res) => {
  try {
    const { userId, name } = req.body;

    if (!userId) {
      return res.status(400).json({ error: "userId is required" });
    }

    const userName = name || "Anonymous";
    const user = { id: userId, name: userName };

    await streamClient.upsertUser(user);

    // Add user to my_general_chat channel
    const channel = streamClient.channel("messaging", "my_general_chat");
    await channel.addMembers([userId]);


    const token = streamClient.createToken(userId);

    res.status(200).json({
      token,
      user: {
        id: userId,
        name: name,
        role: "admin",
        image: `https://getstream.io/random_png/?name=${name}`,
      },
    });
  } catch (error) {
    console.error("Public token generation error:", error);
    res.status(500).json({ error: "Failed to generate token" });
  }
});

module.exports = router;

User Logout Endpoint

Go to your authController.js and create a functionality that handles logging out the user:

exports.logout = catchAsync(async (req, res, next) => {
  res.cookie("token", "loggedout", {
    expires: new Date(0),
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
  });

  res.status(200).json({
    status: "success",
    message: "Logged out successfully",
  });
});

Then register your logout route to your userRouters.js:

const express = require("express");
const {logout}= require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");


router.post("/logout", isAuthenticated, logout);

module.exports = router;

Chat and Video Function (Frontend)

After setting up your backend Stream API, the last task is setting up chat and video in your frontend application.

`Dashboard.jsx`

Create a new file Dashboard.jsx in your frontend directory. This is where you will set up your Stream and video function.

import React, { useState, useEffect } from "react";
import axios from "axios";
import {
  Chat,
  Channel,
  ChannelHeader,
  MessageInput,
  MessageList,
  Thread,
  Window,
  useCreateChatClient,
} from "stream-chat-react";
import "stream-chat-react/dist/css/v2/index.css";
import { useStream } from "../../components/StreamContext";
import VideoStream from "../../components/VideoStream";
import { useNavigate } from "react-router-dom";



const apiKey = import.meta.env.VITE_STREAM_API_KEY;

const API_URL = import.meta.env.VITE_API_URL || 'https://telehealth-backend-2m1f.onrender.com/api/v1';

function App() {
  const [channel, setChannel] = useState(null);
  const [clientReady, setClientReady] = useState(false);
  const navigate = useNavigate();

  // const ChatComponent = () => {
    const { user, token, Logout } = useStream();

    // Always call the hook
    const chatClient = useCreateChatClient({
      apiKey,
      tokenOrProvider: token,
      userData: user?.id ? { id: user.id } : undefined,
    });

  // Debug: See when user/token is ready
  useEffect(() => {
    console.log("Stream user:", user);
    console.log("Stream token:", token);
  }, [user, token]);

    // Connect user to Stream
    useEffect(() => {
      const connectUser = async () => {
        if (!chatClient || !user || !token || !user?.id) {
          console.warn("Missing chat setup data:", { chatClient, token, user });
          return;
        }


        try {
          await chatClient.connectUser(
            {
              id: user.id,
              name: user.name || "Anonymous",
              image:
                user.image ||
                `https://getstream.io/random_png/?name=${user.name || "user"}`,
            },
            token
          );

          const newChannel = chatClient.channel("messaging", "my_general_chat", {
            name: "General Chat",
            members: [user.id],
          });

          await newChannel.watch();
          setChannel(newChannel);
          setClientReady(true);
        } catch (err) {
          console.error("Error connecting user:", err);
        }
      };

      connectUser();
    }, [chatClient, user, token]);

    const handleVideoCallClick = () => {
      navigate("/videoCall");
  };

  const handleLogout = async () => {
    await Logout();
    navigate("/login");
  }

  if (!user || !token) {
    return <div className="text-red-600">User or token not ready.div>;
  }

  if (!clientReady || !channel) return <div>Loading chat...div>;


  return (
{ checkout the github repo}
            
            <MessageList />
            <MessageInput />
          
          <Thread />
        
      


      

    );
  }

export default App;

Video Setup

You’ll now set up the video function for your frontend. To do so, create a new file VideoStream.jsx and add the command:

import React, { useEffect, useState } from "react";
import { StreamVideoClient } from "@stream-io/video-client";
import { StreamVideo, StreamCall } from "@stream-io/video-react-sdk";
import { useNavigate } from "react-router-dom";


import { useStream } from "./StreamContext";
import { MyUILayout } from "./MyUILayout";


const apiKey = import.meta.env.VITE_STREAM_API_KEY;

function VideoStream() {

  const [client, setClient] = useState(null);
    const [call, setCall] = useState(null);
  const { user, token } = useStream();
  const navigate = useNavigate();

  useEffect(() => {

    let clientInstance;
    let callInstance;


    const setup = async () => {
      if (!apiKey || !user || !token) return;

      clientInstance = new StreamVideoClient({ apiKey, user, token });

      callInstance = clientInstance.call("default", user.id); // Use user.id as callId


      await callInstance.join({ create: true });

      setClient(clientInstance);
      setCall(callInstance);
    };

    setup();

    return () => {
      if (callInstance) callInstance.leave();
      if (clientInstance) clientInstance.disconnectUser();

    };
  }, [user, token]);

  const handleLeaveCall = async () => {
    if (call) await call.leave();
    if (client) await client.disconnectUser();

    setCall(null);
    setClient(null);

    navigate("/dashboard"); // or any other route
  };

  if (!apiKey) return <div>Missing Stream API Keydiv>;

  if (!client || !call)
    return (
  <div className="flex items-center justify-center h-screen text-xl font-semibold">
    Connecting to the video call...
  div>
    );

  return (
    <div className="relative h-screen w-full p-2 sm:p-4 bg-gray-50">
      <StreamVideo client={client}>
        <StreamCall call={call}>
          <MyUILayout />
        StreamCall>
      StreamVideo>

      <button
        onClick={handleLeaveCall}
        className="absolute top-2 right-2 sm:top-4 sm:right-4 bg-red-600 text-white text-sm sm:text-base px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg shadow hover:bg-red-700 transition"
      >
        Leave Call
      button>
    div>
    );
  }

export default VideoStream;

//MYUILayout.jsx
import React from 'react';
import {
  useCall,
  useCallStateHooks,
  CallingState,
} from '@stream-io/video-react-sdk';

export function MyUILayout() {
  const call = useCall();
  const { useCallCallingState, useParticipantCount } = useCallStateHooks();
  const callingState = useCallCallingState();
  const participantCount = useParticipantCount();

  if (callingState !== CallingState.JOINED) {
    return <div>Joining call...div>;
  }

  return (
    <div style={{ padding: '1rem', fontSize: '1.2rem' }}>
      ✅ Call "<strong>{call?.id}strong>" has <strong>{participantCount}strong> participants.
    div>
  );
}

Project Demo

Congratulations! You have successfully integrated Stream’s chat and video function into your application.

Conclusion

And that’s a wrap!

You’ve built a telehealth app with secure video, real-time chat, and user authentication – all powered by Stream’s Chat and Video SDKs.

This foundation gives you the flexibility to expand further with features like appointment scheduling, patient history, or HIPPA-compliant file sharing.

You can find the frontend and backend applications on GitHub. The frontend app is hosted using the Vercel hosting service, and the backend is hosted on Render.

Check out the repository of the application.

Happy coding! 🚀

How to Make a Dropdown Menu with shadcn/ui

Ajay Kalal — Thu, 17 Jul 2025 21:02:46 +0000

Dropdown menus are little pop-up menus that help you show more options without cluttering your screen. They’re super helpful in websites and apps.

In this guide, you’ll learn how to build a dropdown menu using shadcn/ui. It’s a tool that works well with Tailwind CSS and Radix UI to help you make nice-looking, easy-to-use menus.

What is shadcn/ui?
Why Use shadcn/ui for Dropdowns?
Let’s Build a Dropdown Step-by-Step
Real-World Use Case: Country Dropdown with Flags
Final Thoughts

💡 Prerequisites

Before we start, make sure you have:

Basic knowledge of React and JavaScript
Node.js and a package manager like npm, pnpm, or yarn are installed
Familiarity with Tailwind CSS is a bonus, but not required

We’ll walk through everything step by step, so don’t worry if you’re not an expert yet.

What is shadcn/ui?

shadcn/ui is a group of tools (called components) that help you build parts of a website, like buttons, modals, and dropdowns. It’s built with Radix UI and styled using Tailwind CSS. It’s perfect if you’re using React or Next.js.

With shadcn/ui, you don’t get just styled components, you get full control over how everything works and looks. That makes it perfect for teams that want consistency in design without giving up flexibility.

Why Use shadcn/ui for Dropdowns?

Dropdown menus are a great use case for shadcn/ui because:

It’s easy to use with keyboard and screen readers
You can create custom looks using Tailwind CSS
You control how it works and looks
It works great in real websites and apps
It integrates well with modern React workflows

Step 1: Start a New Project with shadcn/ui

You don’t need to set up React, Next.js, or Tailwind manually. Just run this command:

pnpm dlx shadcn@latest init

This will automatically create a new Next.js app with Tailwind CSS and shadcn/ui preconfigured.

Tip: You can also use npx instead of pnpm dlx if you prefer:

npx shadcn@latest init

After your project is ready, add the dropdown component using:

npx shadcn@latest add dropdown-menu

This will pull in all the necessary components to create a dropdown menu.

Step 3: Import What You Need

In your React file, import the full dropdown module so you can access all its features:

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuPortal,
} from "@/components/ui/dropdown-menu"

Here’s a basic dropdown example:

export function ProfileMenu() {
  return (
    
      
        
      
      
        My Account
        
        Profile
        Settings
        Log out
      
    
  )
}

This is just the start. You can add groups, submenus, and keyboard shortcuts for power users.

Step 5: Make It Look Better

Use Tailwind CSS to style your dropdown, and hover effects like this:


        
          
        
        
          
            My Account
          
          
          
            Profile
          
          
            Settings
          
          Step 6: Make It Work on All Screens
Want your dropdown to be responsive? Use Tailwind’s responsive classes:


You can also dynamically position the dropdown using Radix's built-in portal support.
Step 7: Add Cool Icons

Install Lucide icons:
npm install lucide-react

Then use them in your menu:
import { User, Settings, LogOut } from "lucide-react"


   Profile


Icons help users scan options quickly – a great touch for UX.
Step 8: It’s Already Accessible!
shadcn/ui (thanks to Radix UI) makes your dropdown menu:

Keyboard friendly

Screen-reader ready

Following best web practices


You don’t need to configure accessibility – it just works :)
Real-World Use Case: Country Dropdown with Flags
Looking for a more advanced dropdown? Here’s an amazing example that includes search, flag icons, and grouping:

👉 shadcn-country-dropdown.vercel.app
It’s open-source and a great place to see what’s possible with shadcn/ui.
Final Thoughts
Using shadcn/ui to create a dropdown menu is fast, simple, and powerful. You get great styling, accessibility, and full control over how things look and work. Whether you’re just starting out or building for production, this is a solid tool to use.
Dropdowns are just the beginning. shadcn/ui offers a whole library of headless components for building modern UIs.
I hope you found this article helpful! If you're building a SaaS product or any web app that involves user interaction or conversion, consider enhancing user trust with real-time notifications like modal pop-ups, sales pop up, etc.



 Learn Tailwind CSS by Building a Responsive Product Card 
Beau Carnes — Fri, 11 Oct 2024 01:33:57 +0000
 Are you looking to enhance your web design skills and create responsive websites more efficiently? Tailwind CSS, a utility-first CSS framework, has become a favorite among developers for its flexibility and speed in building modern web layouts. One of the most practical ways to master this framework is by applying it to real-world projects.
We just published a course on the freeCodeCamp.org YouTube channel that will teach you all about building a responsive product card using Tailwind CSS. This course is designed for those who already have some foundational knowledge of Tailwind but are looking to explore more intermediate concepts. By the end, you'll be able to create a fully responsive, professional-grade product card for an e-commerce site, using best practices for both desktop and mobile layouts. Rachel Johnson from Scrimba created this course.
Throughout the course, you'll dive into key Tailwind CSS features and utilities, such as:

Modifying the Tailwind config object to customize your design system.

Applying custom fonts, which allows you to bring unique typography to your project.

Controlling the maximum widths of elements for responsive layouts.

Utilizing Tailwind’s text utilities for precise control over font sizes, colors, and spacing.

Creating gradients and beautiful backgrounds using Tailwind’s gradient utilities.

Styling lists, building layouts with CSS Grid, and managing responsive designs with ease.

Adding background images, transitions, and transformations to make your design interactive and visually engaging.


Each concept is broken down and explained step-by-step, making it easy to follow even if you’re newer to Tailwind. You’ll also explore how to use arbitrary values for custom styling, giving you even more creative control over your designs. By the end of this course, you’ll not only have a completed project but also a deeper understanding of how to apply Tailwind CSS in various web development scenarios, whether for personal projects or professional work.
This course is perfect for anyone looking to sharpen their skills in Tailwind CSS while building practical, real-world projects. Watch the full course on the freeCodeCamp.org YouTube channel (1-hour watch).

Tailwind CSS - freeCodeCamp.org

How to Build an Admin Dashboard Sidebar with shadcn/ui and Base UI

How Atomic CSS and Functional Programming Are Related

Prerequisites

What We'll Cover:

The Basic Principles of Functional Programming

Pure Functions

Immutability

Function Composition

How the Principles of FP Meet Their Incarnation in Atomic CSS

What is Atomic CSS?

Purity

Immutability in ACSS

Composition

Conclusion

How to Use Flex in Tailwind CSS and Justify Flex Items

Table of Contents

Prerequisites

What is Flexbox?

How Tailwind CSS Makes Flexbox Easy to Use

How to Use Flex in Tailwind

Flex Item Sizing: Basis, Grow, & Shrink

flex-basis

flex-grow

flex-shrink

Controlling Flex Direction

flex-row

flex-row-reverse

flex-col

flex-col-reverse

Responsive Control

Fine-Tuning Flexbox Layout

flex-wrap

flex-order

gap

Responsive Design

How to Justify and Align Flex Items in Tailwind

justify-content

Align Items

Practice Flexbox with Interactive Games

Flexbox Froggy

Flexbox Adventure (Coding Fantasy)

Conclusion

How to Use the tailwind-sidebar NPM Package in Your React and Next.js Apps

Table of Contents

Prerequisites

Introduction to the tailwind-sidebar NPM Package

Understanding Tailwind Sidebar

What is Tailwind CSS?

Why Choose Tailwind Sidebar?

Optimized Performance

Developer-Friendly

Easy Maintenance

Growing Tailwind Community

How to Get Started with Tailwind Sidebar

Step 1: Install tailwind-sidebar

Using npm:

Using yarn:

Step 2: Import the Tailwind Sidebar Component

Adding Styles to Tailwind Sidebar

Step 3: Routing Setup for React and Next.Js

Step 4: Initializing the Sidebar

Step 5: Adding a Logo to the Sidebar

Step 6: Creating a Menu Inside the Sidebar

Step 7: Adding Submenus (Optional)

Features of Tailwind Sidebar:

Utility-First & Lightweight

Fully Responsive Design

Highly Customizable

Integration with React & Next.Js:

Menu & Submenu Support

Icon Support

Smooth Transitions

Wrapping Up

Try It Out:

Other Sidebar NPM Packages

How to Integrate Tailwind with Electron – With Code Examples

Table of Content

A Quick Overview of Electron

What is Tailwind CSS?

3. Configure `package.json`

4. Create `main.js`

5. Create `index.html` (Renderer Process)

4. Link `output.css` in `index.html`

2. Add FlyonUI as plugin in the `input.css`:

`App.js` Setup

`Server.js` Setup