Forem: Sandip Shrestha

ShadCN UI: The Ultimate Component Library for Modern React Apps

Sandip Shrestha — Sun, 16 Mar 2025 19:27:25 +0000

Introduction

As a React developer, you may be tired of writing custom components from scratch or dealing with rigid UI libraries like Material UI or Ant Design. Meet ShadCN UI: a sleek, minimal, and customizable component library built on Tailwind CSS and Radix UI. Whether you're building a dashboard, an e-commerce platform, or a SaaS application, ShadCN UI provides elegant, accessible, and developer-friendly components to speed up your workflow.

In this blog, we’ll explore why ShadCN UI stands out, how to integrate it, and how to make the most of its features. Let’s dive in! 🚀

About ShadCN

If you've ever struggled with UI libraries that lack flexibility or require complex overrides, ShadCN UI offers a refreshing alternative, providing flexibility and ease of customization.

ShadCN UI is not a typical component library—it's more like a collection of pre-built, customizable components that live inside your project, giving you complete control. It is built on Tailwind CSS for styling and Radix UI for accessibility and interactions, ensuring a smooth developer experience.

Unlike traditional UI libraries that impose strict design constraints, ShadCN UI is unopinionated, allowing you to style and extend components freely.

Setting up ShadCN with NextJS project

First, let's setup a NextJS project

npx create-next-app@latest

On installation, you'll see the following prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

Now, let's setup ShadCN UI by running this command:

# using npm or yarn
npx shadcn-ui@latest init

# using pnpm 
pnpm dlx shadcn@latest init

# using bun
bunx --bun shadcn@latest init

This command will set up the necessary dependencies and configurations.
Now, you can add individual components in your project.

# using npm or yarn
npx shadcn@latest add button

# using pnpm
pnpm dlx shadcn@latest add button

# using bun 
bunx --bun shadcn@latest add button

The command above will add the Button component to your project. You can then import it like this:

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Customizing ShadCN Components

Since ShadCN UI is a file based library, all components are stored in your project and you can freely customize them.

Customize the Button Component

Navigate to components/ui/button.tsx and update the styles:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

Now you have full control over the component’s styling and behavior!

Building a Simple UI with ShadCN

Let's build a login form using ShadCN components

"use client";

import React from "react";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

// define signin form schema using zod
const formSchema = z.object({
  email: z.string().email({
    message: "Invalid email address!",
  }),
  password: z.string().min(2, {
    message: "Password required!",
  }),
});

const SignIn: React.FC<SignInProps> = ({}) => {

  // Define your form
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

// Define a submit handler
 function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <div className="flex items-center justify-center w-full h-screen bg-primary bg-opacity-5">
      <Card className="w-[35%] sm:p-4 p-3 rounded-lg shadow-xl">
        <CardHeader className="mb-6">
          <CardTitle className="text-3xl font-bold text-center">
            Sign In
          </CardTitle>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem className="w-full">
                    <FormLabel className="text-lg font-medium">Email</FormLabel>
                    <FormControl>
                      <Input
                        type="email"
                        placeholder="Email"
                        className="border-gray-400 py-2 focus-visible:ring-primary text-lg"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem className="w-full">
                    <FormLabel className="text-lg font-medium">
                      Password
                    </FormLabel>
                    <FormControl>
                      <Input
                        type="password"
                        placeholder="Password"
                        className="border-gray-400 py-2 focus-visible:ring-primary text-lg"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className="w-full flex justify-center">
                <Button
                  type="submit"
                  className="bg-primary text-white py-2 px-3 mt-2 font-medium text-lg w-full"
                >
                  Sign In
                </Button>
              </div>
            </form>
          </Form>
        </CardContent>
      </Card>
    </div>
  );
};

export default SignIn;

interface SignInProps {}

This form is lightweight, fully customizable, and follows accessibility best practices!

Conclusion

ShadCN UI is a game-changer for developers who love Tailwind CSS and customizability. It provides a flexible alternative to bulky UI libraries while ensuring accessibility and modern design. If you're building a React app, give ShadCN UI a try—it might become your go-to component library!

🚀 Ready to explore more?
Check out the official ShadCN UI docs and start building stunning UIs today!
Happy coding! 🎉

Master Web Automation: Automate Browsing Tasks with Puppeteer

Sandip Shrestha — Tue, 18 Feb 2025 20:31:41 +0000

Introduction

In the world of web automation, Puppeteer has emerged as one of the most powerful tools for controlling headless browsers. With the ability to automate repetitive tasks, scrape data from websites, and even generate screenshots and PDFs, Puppeteer is a must-have tool for developers, testers, and anyone looking to interact with the web programmatically. In this blog, we’ll dive into the key features of Puppeteer and show you how to leverage it to automate web browsing tasks effectively.

About Puppeteer

As a JavaScript developer, you might find yourself wanting to do something crazy—like extracting data from a website that doesn’t offer a free API. But let’s be real—why would they give you free access to their data? That’s where Puppeteer comes in.

Maybe you're a content creator who’s too busy to post regularly on social media, and hiring someone just to do that feels like a waste. Or perhaps you need to automate a tedious web task that eats up your time. Instead of relying on others, you can let Puppeteer handle it for you.

Puppeteer is a Node.js library that provides a high-level API to control headless Chrome (or Chromium). It allows you to perform actions just like a real user—clicking buttons, filling out forms, taking screenshots, and even generating PDFs. It’s widely used for web scraping, UI testing, performance monitoring, and automating repetitive browser tasks.

Imagine being able to log in to multiple accounts automatically, extract stock market data, monitor price drops, or schedule social media posts—all without lifting a finger. That’s the power of Puppeteer!

Whether you want to scrape valuable data, automate social media posts, or streamline repetitive tasks, Puppeteer has got your back. In the next sections, we'll explore how to set it up and use it effectively.

Setting up Puppeteer with Node.Js and TypeScript

First let's create a project directory and initialize Node.Js project

# Create a new folder for the project
mkdir puppeteer-demo  

# Navigate into the folder
cd puppeteer-demo  

# Initialize a Node.js project (you can press Enter for default settings)
npm init -y

This will generate a package.json file, which will manage your project dependencies.
Install typescript and necessary dependencies.

# Install TypeScript as a dev dependency
npm install -D typescript

# Install ts-node for running TypeScript files directly
npm install -D ts-node

# Install @types/node for Node.js type definitions
npm install -D @types/node

Run this command to generate tsconfig.json

npx tsc --init

Modify your tsconfig.json for better compatibility.

{
  "compilerOptions": {
    "target": "ES6",             
    "module": "CommonJS",        
    "outDir": "./dist",          
    "rootDir": "./src",         
    "strict": true              
  }
}

Create srcfolder and index.ts file inside it.
You can manually run your development script using:

ts-node src/index.ts

Or you can modify the scripts in package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "ts-node src/index.ts"
  }

With this setup, you can run your development script using:

npm run dev

"You might be wondering why I’m using TypeScript instead of JavaScript. While you can definitely use JavaScript, TypeScript offers type safety, better autocompletion, and improved code readability—making development more efficient and less error-prone. If you're still using JavaScript, it's a great time to consider switching to TypeScript!"

Next you'll need to install puppeteer.

npm install puppeteer

It automatically downloads a compatible version of chromium. This ensures that Puppeteer works reliably without any browser compatibility issues.

However if you don't want puppeteer to download chromium and want to use a system-installed version, you can skip the download by setting the PUPPETEER_SKIP_DOWNLOAD environment variable before installation:

PUPPETEER_SKIP_DOWNLOAD=true npm install puppeteer

You can later tell Puppeteer to use your system-installed Chrome by specifying its path:

const browser = await puppeteer.launch({ executablePath: '/path/to/chrome' });

Now let's setup a basic project.

import puppeteer from 'puppeteer';

(async () => {
  // Launch a headless browser
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate to a website
  await page.goto('https://example.com');

  // Take a screenshot
  await page.screenshot({ path: 'example.png' });

  console.log('Screenshot saved as example.png');

  // Close the browser
  await browser.close();
})();

Congrats! You've just automated your first browser task with Puppeteer.

Scrape data using puppeteer

Let's scrape quotes from https://quotes.toscrape.com. Here’s the code:

import puppeteer from "puppeteer";

(async () => {
  // Headless mode is enabled by default. Set it to false to see the browser in action.

  const browser = await puppeteer.launch({ headless: false })
  const page = await browser.newPage();

  const VIEWPORT = { width: 1920, height: 1080 };
  await page.setViewport(VIEWPORT); // set viewport

  await page.goto("https://quotes.toscrape.com/", {
    waitUntil: "domcontentloaded",
  });

 // Extract all quotes from the page
 const quotes = await page.evaluate(() => {
  const quoteList = document.querySelectorAll(".quote");

  return Array.from(quoteList).map((quote) => {
    const text = quote.querySelector(".text")?.innerText || "";
    const author = quote.querySelector(".author")?.innerText || "";

    return { text, author };
   });
 });

  // Display the quotes
  console.log(quotes);

  await browser.close();
})();

You’ll see the list of quotes printed in your console.

Login to Instagram using puppeteer

Here’s how to automate Instagram login:

import puppeteer from "puppeteer";

(async () => {
  // Launch the browser
  const browser = await puppeteer.launch({ headless: false });

  // Create a new page
  const page = await browser.newPage();

  const VIEWPORT = { width: 1920, height: 1080 };
  await page.setViewport(VIEWPORT); // set viewport

  // Go to the page
  await page.goto("https://www.instagram.com/", {
    waitUntil: "networkidle2",
    timeout: 60000,
  });

  // enter username and password
  await page.type('input[name="username"]', 'username');
  await page.type('input[name="password"]', 'password');

  // click the login button
  await page.click('button[type="submit"]');

  await page.waitForNavigation();

 // take screenshot
  await page.screenshot({path: "instagram-login.png"});

  await browser.close();
})();

Now you're automating Instagram login!

Conclusion

In this blog, we've explored how Puppeteer can be a game-changer for automating tasks, from web scraping to interacting with web pages like a real user. Whether you're looking to extract valuable data, automate social media posts, or streamline repetitive web tasks, Puppeteer offers a powerful, flexible solution.

We covered the essential steps for setting up Puppeteer with Node.js and TypeScript, walked through basic examples like taking screenshots and scraping data, and even demonstrated how to automate Instagram logins. By incorporating Puppeteer into your workflow, you can save time, reduce manual effort, and create more efficient processes for various web-related tasks.

So, the next time you're faced with a tedious web task, why not automate it with Puppeteer? With its simplicity and versatility, it’s the perfect tool to level up your web automation game.

Try Puppeteer and automate your task--no more manual work!
Happy coding! 🎉

Struggling with Manual Node Switching? NVM Has Your Back

Sandip Shrestha — Sun, 09 Feb 2025 19:35:50 +0000

Node Version Manager (NVM)

You’re ready to start a new project, but the Node.js version you need isn’t the one you have installed. Or worse, you’re juggling multiple projects, each requiring a different Node.js version. You sigh, open Google, and start searching for uninstall and reinstall commands—again. Frustrating, right?

What if I told you there’s a tool that makes all of this hassle disappear? Meet Node Version Manager (NVM)—your ultimate solution for managing multiple Node.js versions effortlessly. Say goodbye to manual switching and hello to smooth, stress-free Node.js management.

Why you need NVM

Let’s dive into a real-world scenario: You’re working on multiple projects. One project requires an older Node.js version, while another uses the latest tools and frameworks that demand the newest version. You can’t use the same Node.js version for both, so what do you do?

Manually switching versions becomes a nightmare. First, you uninstall the current Node.js version on your device. Then, you search Google for the required version, install it, and start working. Once you switch to the other project, you repeat the whole process—uninstall, reinstall, and hope nothing breaks. It’s a lot of hassle, isn’t it?

That’s where NVM comes to the rescue. Whether you discovered it here or a friend told you about it, NVM will transform your workflow. With NVM installed, you can effortlessly manage multiple Node.js versions on your device. Install as many versions as you need, list them, and switch between them with a single command. However, keep in mind—NVM doesn’t let you use two different versions in separate terminals simultaneously. That’s not how it’s meant to work.

Let's get started with installation.

Installing NVM on macOS or Linux:

Open your terminal and run the following command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Restart your terminal or run:

source ~/.bashrc

If you're using Zsh, run:

source ~/.zshrc

Verify installation by running:

nvm --version

Installing NVM on Windows:

Download the nvm-setup.exe from https://github.com/coreybutler/nvm-windows/releases and run the installer.

After installation, restart your terminal and run:

nvm --version

If installed correctly, you’ll see the version number of NVM.

Key Features of NVM:

Install Specific Node.js Version:

nvm install 22.12.0

Switching Between Versions:

nvm use 22.12.0

Listing Installed Versions:

nvm ls

Setting Default Version:

nvm alias default 22.12.0

Project-Specific Node.js Versions:

In your project’s root directory, create a .nvmrc file with the desired version:

echo "14.17.0" > .nvmrc

Whenever you navigate to your project directory, simply run:

nvm use

NVM will automatically switch to the version specified in .nvmrc.

Sad news for Windows users (including me): NVM on Windows differs slightly from the original NVM and doesn't support .nvmrc. But don’t worry, you can still manually switch versions using nvm use!

Conclusion

Managing multiple Node.js versions doesn’t have to be a tedious process. With NVM, you have a powerful and hassle-free solution to streamline your workflow and focus on what truly matters—building amazing projects. Whether you're a seasoned developer or just starting out, NVM saves you time and effort by simplifying version management.

So, why go through the frustration of uninstalling and reinstalling Node.js every time? Embrace NVM, and make seamless Node.js management a reality. Install it today, and take your productivity to the next level!

What are you waiting for? Try NVM today and unlock hassle-free Node.js management!
Happy coding! 🎉