Forem: Aaronn

My New Bootstrap 4 Card Generator

Aaronn — Fri, 15 Nov 2024 05:41:22 +0000

My New Bootstrap 4 Card Generator

I'm excited to share a new tool I've developed for web designers and developers: My Bootstrap 4 Card Generator. This tool simplifies the process of creating customizable Bootstrap 4 cards, making it easy to design and integrate attractive cards into your projects.

How It Works

Title
Enter the desired title for your card in the Title field. This text will appear as the card's header.

Text
Add the main content or description of the card in the Text field. This text is displayed below the card's title and serves as the card's body.

Image URL
Provide an image URL in the Image URL field. This image will be featured on your card. For example, you can use a sample URL like https://picsum.photos/300/200.

Image Position
Choose where the image should appear on the card. Options include:

Top: The image is placed above the card title and text.
Bottom: The image appears below the text.
Left: The image is aligned to the left side of the card.

Width
Set the width of the card to fit your needs:

Full: Takes up the entire container width.
Half: Occupies half the container width.
Custom: Specify your custom width.

Background Color
Customize the background color of the card by entering a color name or a hex code (e.g., #f8f9fa for light gray).

Text Color
Choose the color for the text within the card to ensure readability and alignment with your design.

Border
Add a border around the card and select its style (e.g., Danger for a red border).

Include Button
Decide if a button should be included on your card.

Button Text
Enter the button's display text (e.g., Learn More).

Button Link
Provide a URL for the button's redirection (e.g., https://example.com).

Button Style
Choose a style for the button (e.g., Danger for a red button).

Key Features

Card Preview: Get an instant visual representation of your card based on the current settings.
Generated Code: Once your card is designed to your liking, the tool generates the corresponding HTML code. Simply copy and paste this code into your project’s HTML to embed the card seamlessly.

Why Use This Tool?

My Bootstrap 4 Card Generator saves time by eliminating the need to manually code card elements. Whether you're a beginner looking for quick card creation or an experienced developer wanting a fast way to prototype card layouts, this tool makes the process effortless and efficient.

Try it out and see how it can simplify your design workflow!

Bootstrap 5 Form Builder Tool Create Forms with Ease! 🛠️✨

Aaronn — Mon, 09 Sep 2024 07:03:38 +0000

Bootstrap 5 Form Builder

Creating forms is an essential part of web development, but it doesn’t have to be a hassle. With the new Bootstrap 5 Form Builder Tool, you can streamline the process and design forms effortlessly. Whether you’re a developer looking to speed up your workflow or a designer aiming for perfect form layouts, this tool has got you covered. Let’s dive into the key features that make this tool a must-have.

Key Features and Functionality

Customizable Form Elements: 🎨 You can add and customize a variety of form elements such as text inputs, checkboxes, and file uploads. Just select the type, set labels, placeholders, and even apply custom CSS classes. Watch as your form takes shape in real-time with the live preview!
Interactive Preview and Code Generation: 📋 As you build your form, see an instant preview of how it will look. The tool also generates the HTML code for your form, which you can copy with a single click. This makes integrating the form into your project quick and hassle-free.
Drag-and-Drop Functionality: 🏗️ Rearranging form elements is a breeze with the drag-and-drop feature. Simply drag elements to rearrange them as needed. This intuitive interface lets you adjust layouts
effortlessly.
Responsive Design: 📱 Ensure your forms look great on all devices. You can adjust the column width of each element to fit different screen sizes, so your form will be user-friendly whether it’s viewed on a desktop or mobile device.
Default Forms and Templates: 🚀 Need a quick start? The tool includes default templates like a login form that you can customize or use as is. This feature helps you get started fast without having to design from scratch.
Validation and Accessibility: ✅ The tool supports custom validation with regex patterns and required fields, ensuring data integrity. Plus, it’s built with Bootstrap 5, adhering to accessibility standards so that everyone can use your forms.

User-Friendly Experience

The Bootstrap 5 Form Builder Tool is designed with user-friendliness in mind. The clean, intuitive interface makes it easy to add and customize form elements. The live preview feature helps you visualize your form instantly, while the drag-and-drop functionality simplifies rearranging elements. With the ability to reset or preview your form in a modal, you’ll find that building and tweaking forms is smoother than ever.

Conclusion

If you’re looking for a way to create beautiful, functional forms quickly and easily, the Bootstrap 5 Form Builder Tool is the solution you need. Its combination of customization options, real-time preview, and user-friendly design makes form creation a breeze. Say goodbye to tedious form coding and hello to a faster, more efficient way of building forms! 🌟🚀

Introducing My New Bootstrap 5 Color Palette Generator Tool

Aaronn — Mon, 02 Sep 2024 10:08:50 +0000

Hey Dev.to community! 🎉

I'm excited to share a new tool I’ve been working on that’s going to make your web design process smoother and more personalized. If you’ve ever found yourself wanting more control over your site’s color scheme, this tool is for you!

🎨 What Does It Do?

This Bootstrap 5 Color Palette Generator tool allows you to easily set up your own color palette. With just a few clicks, you can define your primary, secondary, success, danger, warning, and info colors, and see a live preview of how these colors will look in your design.

🚀 How It Works

Custom Colors: Define the colors you want for each category—primary, secondary, success, etc.
Live Preview: Instantly see how these colors will look in context with sample text and background colors.
Generated CSS: The tool generates clean, reusable CSS code with variables, making it easy to apply consistent styles across your site.

🛠️ Why You’ll Love It

Ease of Use: No need to manually update your CSS file whenever you want to tweak your design. The tool does it all for you.
Consistency: By using CSS variables, you ensure that your color scheme remains consistent throughout your entire site.
Quick Customization: See the impact of your changes immediately with the live preview feature.

🖥️ Ready to Give It a Try?

This Bootstrap 5 Color Palette Generator tool is perfect for anyone looking to add a personal touch to their website without the hassle of manually updating styles. Whether you’re building a new project or updating an existing one, this tool will save you time and effort.

I’d love to hear your feedback! Feel free to drop a comment below or reach out if you have any suggestions or questions.

Happy coding! 🚀

React Tailwind CSS Forgot Password Example

Aaronn — Wed, 24 Jul 2024 10:18:12 +0000

In this tutorial, we'll create a forgot password page in your React using Tailwind CSS. Before you begin, ensure your project has React, TypeScript, and Tailwind CSS installed and configured.
Install & Setup Tailwind CSS + React + Typescript + Vite

React Tailwind CSS Simple Forget Password

import { useState } from "react";

const ForgetPassword = () => {
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Forget password request submitted for email:", email);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="max-w-md w-full p-6 bg-white rounded-md shadow-md">
        <h2 className="text-2xl font-semibold mb-6">Forget Password</h2>
        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label
              htmlFor="email"
              className="block text-gray-700 text-sm font-bold mb-2"
            >
              Email Address
            </label>
            <input
              type="email"
              id="email"
              className="w-full p-2 border rounded-md"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <button
            type="submit"
            className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
          >
            Reset Password
          </button>
        </form>
      </div>
    </div>
  );
};

export default ForgetPassword;

Build a Forgot Password feature in React using TypeScript, Tailwind CSS, and React hooks.

import React, { useState, FormEvent, ChangeEvent } from "react";

const ForgetPassword: React.FC = () => {
    const [email, setEmail] = useState<string>("");

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();
        console.log("Forget password request submitted for email:", email);
    };

    const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
        setEmail(e.target.value);
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-100">
            <div className="max-w-md w-full p-6 bg-white rounded-md shadow-md">
                <h2 className="text-2xl font-semibold mb-6">Forget Password</h2>
                <form onSubmit={handleSubmit}>
                    <div className="mb-4">
                        <label
                            htmlFor="email"
                            className="block text-gray-700 text-sm font-bold mb-2"
                        >
                            Email Address
                        </label>
                        <input
                            type="email"
                            id="email"
                            className="w-full p-2 border rounded-md"
                            placeholder="Enter your email"
                            value={email}
                            onChange={handleEmailChange}
                            required
                        />
                    </div>
                    <button
                        type="submit"
                        className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
                    >
                        Reset Password
                    </button>
                </form>
            </div>
        </div>
    );
};

export default ForgetPassword;

React Tailwind CSS ForgetPasswordForm with Link to Login Using React Router

import { useState } from 'react';
import { Link } from 'react-router-dom';

const ForgetPasswordForm = () => {
    const [email, setEmail] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Forget password request submitted for email:', email);
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-100">
            <div className="max-w-md w-full p-6 bg-white rounded-md shadow-md">
                <h2 className="text-2xl font-semibold mb-6">Forget Password</h2>
                <form onSubmit={handleSubmit}>
                    <div className="mb-4">
                        <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
                            Email Address
                        </label>
                        <input
                            type="email"
                            id="email"
                            className="w-full p-2 border rounded-md"
                            placeholder="Enter your email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            required
                        />
                    </div>
                    <button
                        type="submit"
                        className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
                    >
                        Reset Password
                    </button>
                </form>
                <div className="mt-4 text-sm">
                    <p>
                        Remember your password? <Link to="/login" className="text-blue-500">Login here</Link>
                    </p>
                </div>
            </div>
        </div>
    );
};

export default ForgetPasswordForm;

React Tailwind CSS ForgetPasswordModal Using React Hook

import { useState } from "react";

const ForgetPasswordModal = () => {
  const [isModalOpen, setModalOpen] = useState(false);
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Forget password request submitted for email:", email);
    setModalOpen(false);
  };

  return (
    <div className="min-h-screen flex items-center justify-center ">
      <button
        onClick={() => setModalOpen(true)}
        className="bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600"
      >
        Forget Password
      </button>
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <div
            className="absolute inset-0 bg-black opacity-50"
            onClick={() => setModalOpen(false)}
          ></div>
          <div className="max-w-md w-full p-6 bg-white rounded-md shadow-md z-10 relative">
            <button
              onClick={() => setModalOpen(false)}
              className="absolute top-2 right-2 text-blue-500"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
                className="w-5 h-5"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
            <h2 className="text-2xl font-semibold mb-6">Forget Password</h2>
            <form onSubmit={handleSubmit}>
              <div className="mb-4">
                <label
                  htmlFor="email"
                  className="block text-gray-700 text-sm font-bold mb-2"
                >
                  Email Address
                </label>
                <input
                  type="email"
                  id="email"
                  className="w-full p-2 border rounded-md"
                  placeholder="Enter your email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
              </div>
              <button
                type="submit"
                className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
              >
                Reset Password
              </button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

export default ForgetPasswordModal;

Sources
react useState (react.dev)
Tailwind CSS (tailwindcss.com)
reactrouter (reactrouter.com)

React with Tailwind CSS File Upload Example

Aaronn — Wed, 17 Jul 2024 16:40:32 +0000

In this tutorial, we'll create a file upload feature in your React application using Tailwind CSS. Before you begin, make sure your project has React, TypeScript, and Tailwind CSS installed and configured.

React File Upload Using Tailwind CSS

Create a simple file upload component using React hooks with Tailwind CSS.



import { useState } from 'react';

const FileUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
  };

  const handleUpload = () => {
    console.log(selectedFile);
  };

  return (
    <div className="max-w-md mx-auto">
      <input
        type="file"
        onChange={handleFileChange}
        className="border border-gray-300 p-2 w-full"
      />
      <button
        onClick={handleUpload}
        className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Upload
      </button>
      {selectedFile && (
        <div className="mt-4">
          <p className="font-semibold">Selected File:</p>
          <p>{selectedFile.name}</p>
        </div>
      )}
    </div>
  );
};

export default FileUpload;

Create a file input button using React, TypeScript, and Tailwind CSS, then apply the file modifier for styling.



import React, { useState } from "react";

const FileUpload = () => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setSelectedFile(e.target.files[0]);
    }
  };

  const handleUpload = () => {
    console.log(selectedFile);
  };

  return (
    <div className="max-w-md mx-auto mt-20">
      <form className="flex items-center space-x-6">
        <div className="shrink-0">
          <img
            className="h-16 w-16 object-cover rounded-full"
            src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80"
            alt="Current profile photo"
          />
        </div>
        <label className="block">
          <span className="sr-only">Choose profile photo</span>
          <input
            type="file"
            onChange={handleFileChange}
            className="block w-full text-sm text-slate-500
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-violet-50 file:text-violet-700
              hover:file:bg-violet-100"
          />
        </label>
      </form>
      <button
        onClick={handleUpload}
        className="mt-4 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-md"
      >
        Upload
      </button>
      {selectedFile && (
        <div className="mt-4">
          <p className="font-semibold">Selected File:</p>
          <p>{selectedFile.name}</p>
        </div>
      )}
    </div>
  );
};

export default FileUpload;

Implement Multiple File Upload with React, TypeScript, and Tailwind CSS.



import React, { useState } from 'react';

const MultipleFileUpload = () => {
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      setSelectedFiles([...selectedFiles, ...Array.from(e.target.files)]);
    }
  };

  const handleUpload = () => {
    console.log(selectedFiles);
  };

  return (
    <div className="max-w-md mx-auto">
      <div className="mt-8">
        <label className="block">
          <span className="text-gray-700">Choose Files</span>
          <input
            type="file"
            onChange={handleFileChange}
            className="block w-full text-sm text-slate-500
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-violet-50 file:text-violet-700
              hover:file:bg-violet-100"
            multiple
          />
        </label>
      </div>
      <button
        onClick={handleUpload}
        className="mt-4 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
      >
        Upload
      </button>
      {selectedFiles.length > 0 && (
        <div className="mt-4">
          <p className="font-semibold">Selected Files:</p>
          <ul>
            {selectedFiles.map((file, index) => (
              <li key={index}>{file.name}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default MultipleFileUpload;

Sources
react useState (react.dev)
File input buttons (tailwindcss.com/docs)

Create File Upload UI in Next.js with Shadcn UI

Aaronn — Fri, 12 Jul 2024 15:32:00 +0000

In this tutorial, we will create a file upload feature in Next.js using Shadcn UI.

Before use file upload in next js 13 with shadcn ui you need to install npx shadcn-ui add input.



npx shadcn-ui add input
# or
npx shadcn-ui@latest add

1.Create a File Upload Feature in Next.js Using Shadcn UI's Input and Label Components.



import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputFile() {
  return (
    <div className="grid w-full lg:max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" />
    </div>
  )
}

2.File Upload with Blue Color in Next.js Using Shadcn UI.



import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputFile() {
  return (
    <div className="grid w-full lg:max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input
        id="picture"
        type="file"
        className="file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
      />
    </div>
  )
}

3.File Upload with File Border Color in Next.js Using Shadcn UI.



import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputFile() {
  return (
    <div className="grid w-full lg:max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input
        id="picture"
        type="file"
        className="file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 file:border file:border-solid file:border-blue-700 file:rounded-md border-blue-600"
      />
    </div>
  )
}

How to Use Icons in Shadcn UI with Next.js

Aaronn — Wed, 10 Jul 2024 15:33:00 +0000

In this section, we'll see how to use icons in Next.js with ShadCN UI. ShadCN UI includes Lucide-React icons by default, and you also have the option to incorporate SVG icons from Heroicons.

npm install lucide-react
# yarn
yarn add lucide-react

Next.js with Shadcn UI Icons: Small, Medium, and Large Sizes.

import { Mail } from "lucide-react"

export default function DemoIcon() {
  return (
    <div className="flex gap-4">
      <Mail className="h-4 w-4" />
      <Mail className="h-6 w-6" />
      <Mail className="h-8 w-8" />
      <Mail className="h-12 w-12" />
      <Mail className="h-16 w-16" />
    </div>
  )
}

Next.js with Shadcn UI button with Icon using lucide-react icon.

import { Mail } from "lucide-react"

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

export default function DemoIcon() {
  return (
    <Button>
      <Mail className="mr-2 h-4 w-4" />
      Send Mail
    </Button>
  )
}

If you prefer using SVG icons in Next.js with Shadcn UI, you can easily integrate icons from heroicons.com. or you can install @heroicons/react.

npm install @heroicons/react

Next.js with Shadcn UI SVG Icons: Small, Medium, and Large Sizes.

export default function DemoIcon() {
  return (
    <div className="flex gap-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className="w-4 h-4"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
        />
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className="w-6 h-6"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
        />
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className="w-8 h-8"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
        />
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className="w-12 h-12"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
        />
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className="w-16 h-16"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
        />
      </svg>
    </div>
  )
}

Next.js with Shadcn UI button with SVG Icon using heroicons icon.

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

export default function DemoIcon() {
  return (
    <Button>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className="mr-1 w-4 h-4"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
        />
      </svg>
      Send Mail
    </Button>
  )
}

Next.js with Shadcn UI Progress Bar Example

Aaronn — Mon, 08 Jul 2024 15:54:54 +0000

In this tutorial, we will learn how to use a progress bar in Next.js with Shadcn UI.

Before using the progress bar in Next.js 13 with Shadcn UI, you need to install it by running npx shadcn-ui@latest add progress.



npx shadcn-ui@latest add progress
# or
npx shadcn-ui@latest add

Create a progress bar in Next.js 13 using the Shadcn UI Progresscomponent. ```jsx

import { Progress } from "@/components/ui/progress"

export default function ProgressDemo() {
return (

)
}

![progress bar](https://frontendshape.com/wp-content/uploads/2024/06/DxqLJBNoWKWhFaNcqjP90APl7QIIqdhHzCfWvGru.png)
2.Implementing a progress bar in Next.js 13 with Shadcn UI using useEffect, useState, and setTimeout.
```jsx


"use client"

import * as React from "react"

import { Progress } from "@/components/ui/progress"

export default function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return <Progress value={progress} className="w-[60%]" />
}

3.NextJS with shadcn ui progress bar with percentage.



import { Progress } from "@/components/ui/progress"

export default function ProgressDemo() {
  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-xl font-semibold mb-2 text-center">Progress Bars</h2>
        <div className="space-y-2">
          {/* 10% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">10%</span>
            <div className="w-5/6">
              <Progress value={10} />
            </div>
          </div>

          {/* 25% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">25%</span>
            <div className="w-5/6">
              <Progress value={25} />
            </div>
          </div>

          {/* 50% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">50%</span>
            <div className="w-5/6">
              <Progress value={50} />
            </div>
          </div>

          {/* 75% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">75%</span>
            <div className="w-5/6">
              <Progress value={75} />
            </div>
          </div>

          {/* 100% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">100%</span>
            <div className="w-5/6">
              <Progress value={100} />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

4.NextJS with shadcn ui progress bar with animation.



import { Progress } from "@/components/ui/progress"

export default function ProgressDemo() {
  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-xl font-semibold mb-2 text-center">Progress Bars</h2>
        <div className="space-y-2">
          {/* 10% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">10%</span>
            <div className="w-5/6 animate-pulse">
              <Progress value={10} />
            </div>
          </div>

          {/* 25% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">25%</span>
            <div className="w-5/6 animate-pulse">
              <Progress value={25} />
            </div>
          </div>

          {/* 50% Progress */}
          <div className="flex items-center">
            <span className="w-1/6 text-right mr-2">50%</span>
            <div className="w-5/6 animate-pulse">
              <Progress value={50} />
            </div>
          </div>

        </div>
      </div>
    </div>
  )
}

How to Use Scroll Area in Next.js with Shadcn UI

Aaronn — Wed, 03 Jul 2024 09:26:31 +0000

In this tutorial, we will see how to implement a scroll area in Next.js 13 using the Shadcn UI.

Before using the scroll area in Next.js with Shadcn UI, you need to install it with npx shadcn-ui@latest and add the scroll-area component.

npx shadcn-ui@latest add scroll-area
# or
npx shadcn-ui@latest add

NextJS with Shadcn UI Scroll Area Example

Create a scroll area in Next.js 13 using the Shadcn UI ScrollArea component. ```jsx import { ScrollArea } from "@/components/ui/scroll-area"

export default function ScrollAreaDemo() {
return (

Jokester began sneaking into the castle in the middle of the night and
leaving jokes all over the place: under the king's pillow, in his soup,
even in the royal toilet. The king was furious, but he couldn't seem to
stop Jokester. And then, one day, the people of the kingdom discovered
that the jokes left by Jokester were so funny that they couldn't help
but laugh. And once they started laughing, they couldn't stop.

)
}

![scroll area](https://frontendshape.com/wp-content/uploads/2024/06/xRUTLvitMpWFTqulPjzfupfN9AQ628qkRfOKKz24.png)
2.Implementing tagged lists with scroll areas in Next.js using Shadcn UI.
```jsx
import * as React from "react"

import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`
)

export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-72 w-48 rounded-md border">
      <div className="p-4">
        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
        {tags.map((tag) => (
          <React.Fragment>
            <div className="text-sm" key={tag}>
              {tag}
            </div>
            <Separator className="my-2" />
          </React.Fragment>
        ))}
      </div>
    </ScrollArea>
  )
}

Next.js with Shadcn UI Horizontal Image Scrolling. ```jsx import * as React from "react" import Image from "next/image"

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

export interface Artwork {
artist: string
art: string
}

export const works: Artwork[] = [
{
artist: "Ornella Binni",
art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
},
{
artist: "Tom Byrom",
art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
},
{
artist: "Vladimir Malyavko",
art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
},
]

export function ScrollAreaHorizontalDemo() {
return (

{works.map((artwork) => (

src={artwork.art}
alt={`Photo by ${artwork.artist}`}
className="aspect-[3/4] h-fit w-fit object-cover"
width={300}
height={400}
/>

Photo by{" "}

{artwork.artist}

))}

)
}

![ Horizontal Image Scrolling](https://frontendshape.com/wp-content/uploads/2024/06/Scroll-area-shadcn-ui-1-1.png)

Next.js Image File Upload and Preview with shadcn/ui

Aaronn — Wed, 19 Jun 2024 17:34:09 +0000

In this tutorial, we'll create an image file upload with a preview using Next.js and Shadcn UI.

In this guide, we will create a file upload feature in Next.js using React hooks. We will include a file preview using the Next.js Image component and utilize Shadcn UI's Input and Label components for file selection.



"use client"

import { useState } from "react"
import Image from "next/image"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputFile() {
  const [selectedFile, setSelectedFile] = useState(null)

  const handleFileChange = (e) => {
    const file = e.target.files[0]
    if (file) {
      const reader = new FileReader()
      reader.onloadend = () => {
        setSelectedFile(reader.result)
      }
      reader.readAsDataURL(file)
    }
  }

  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" onChange={handleFileChange} />
      {selectedFile && (
        <div className="mt-2">
          <Image
            src={selectedFile}
            alt="Preview"
            className="rounded-md"
            width={500}
            height={500}
          />
        </div>
      )}
    </div>
  )
}

Building a Next.js Image File Upload and Preview Feature Using TypeScript and Shadcn UI.



"use client"

import React, { ChangeEvent, useState } from 'react';
import Image from 'next/image'
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

interface InputFileProps {
  // You can add any additional props needed
}

export default function InputFile(props: InputFileProps) {
  const [selectedFile, setSelectedFile] = useState<string | null>(null);

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];

    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setSelectedFile(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" onChange={handleFileChange} />
      {selectedFile && (
        <div className="mt-2">
          <Image
            src={selectedFile}
            alt="Preview"
            width={500}
            height={500}
          />
        </div>
      )}
    </div>
  );
}

Next.js with Shadcn UI Image File Upload Preview and remove button for the image preview.



"use client"

import React, { ChangeEvent, useState } from 'react';
import Image from 'next/image'
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

interface InputFileProps {
  // You can add any additional props needed
}

export default function InputFile(props: InputFileProps) {
  const [selectedFile, setSelectedFile] = useState<string | null>(null);

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];

    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setSelectedFile(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleRemoveClick = () => {
    setSelectedFile(null);
  };

  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" onChange={handleFileChange} />
      {selectedFile && (
        <div className="mt-2 relative">
          <Image
            src={selectedFile}
            alt="Preview"
            width={500}
            height={500}
          />
          <button
            onClick={handleRemoveClick}
            className="absolute top-0 right-0 bg-red-500 text-white py-1 px-2"
            aria-label="Remove image"
          >
            X
          </button>
        </div>
      )}
    </div>
  );
}

How to Implement Dropdown on Hover in React with Ant Design 5

Aaronn — Tue, 04 Jun 2024 18:57:02 +0000

In this tutorial, we'll create a dropdown-on-hover feature in React using Ant Design 5. First, you'll need to set up a React project with Ant Design 5.

install & setup vite + react + typescript + ant design 5
1.Create a simple dropdown-on-hover in React using Ant Design 5 components such as MenuProps, Dropdown, Space, and the icons DownOutlined and SmileOutlined.

import React from 'react';
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';

const items: MenuProps['items'] = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item (disabled)
      </a>
    ),
    icon: <SmileOutlined />,
    disabled: true,
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item (disabled)
      </a>
    ),
    disabled: true,
  },
  {
    key: '4',
    danger: true,
    label: 'a danger item',
  },
];

const App: React.FC = () => (
  <Dropdown menu={{ items }}>
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        Hover me
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>
);

export default App;

2.Implement a dropdown-on-hover feature in React with Ant Design 5, showcasing placements at the top, left, right, bottom, bottom left, and bottom right.

import React from 'react';
import type { MenuProps } from 'antd';
import { Button, Dropdown, Space } from 'antd';

const items: MenuProps['items'] = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item
      </a>
    ),
  },
];

const App: React.FC = () => (
  <Space direction="vertical">
    <Space wrap>
      <Dropdown menu={{ items }} placement="bottomLeft">
        <Button>bottomLeft</Button>
      </Dropdown>
      <Dropdown menu={{ items }} placement="bottom">
        <Button>bottom</Button>
      </Dropdown>
      <Dropdown menu={{ items }} placement="bottomRight">
        <Button>bottomRight</Button>
      </Dropdown>
    </Space>
    <Space wrap>
      <Dropdown menu={{ items }} placement="topLeft">
        <Button>topLeft</Button>
      </Dropdown>
      <Dropdown menu={{ items }} placement="top">
        <Button>top</Button>
      </Dropdown>
      <Dropdown menu={{ items }} placement="topRight">
        <Button>topRight</Button>
      </Dropdown>
    </Space>
  </Space>
);

export default App;

3.Create a dropdown-on-hover feature in React using Ant Design 5 with a menu.

import React from 'react';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Button, Dropdown, message, Space, Tooltip } from 'antd';

const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  message.info('Click on left button.');
  console.log('click left button', e);
};

const handleMenuClick: MenuProps['onClick'] = (e) => {
  message.info('Click on menu item.');
  console.log('click', e);
};

const items: MenuProps['items'] = [
  {
    label: '1st menu item',
    key: '1',
    icon: <UserOutlined />,
  },
  {
    label: '2nd menu item',
    key: '2',
    icon: <UserOutlined />,
  },
  {
    label: '3rd menu item',
    key: '3',
    icon: <UserOutlined />,
    danger: true,
  },
  {
    label: '4rd menu item',
    key: '4',
    icon: <UserOutlined />,
    danger: true,
    disabled: true,
  },
];

const menuProps = {
  items,
  onClick: handleMenuClick,
};

const App: React.FC = () => (
  <Space wrap>
    <Dropdown.Button menu={menuProps} onClick={handleButtonClick}>
      Dropdown
    </Dropdown.Button>
    <Dropdown.Button menu={menuProps} placement="bottom" icon={<UserOutlined />}>
      Dropdown
    </Dropdown.Button>
    <Dropdown.Button menu={menuProps} onClick={handleButtonClick} disabled>
      Dropdown
    </Dropdown.Button>
    <Dropdown.Button
      menu={menuProps}
      buttonsRender={([leftButton, rightButton]) => [
        <Tooltip title="tooltip" key="leftButton">
          {leftButton}
        </Tooltip>,
        React.cloneElement(rightButton as React.ReactElement<any, string>, { loading: true }),
      ]}
    >
      With Tooltip
    </Dropdown.Button>
    <Dropdown menu={menuProps}>
      <Button>
        <Space>
          Button
          <DownOutlined />
        </Space>
      </Button>
    </Dropdown>
    <Dropdown.Button menu={menuProps} onClick={handleButtonClick} danger>
      Danger
    </Dropdown.Button>
  </Space>
);

export default App;

how to use autocomplete in react ant design 5

Aaronn — Sun, 02 Jun 2024 15:30:00 +0000

In this tutorial, we will create autocomplete in react with ant design 5. First you need to setup react with ant design 5 project.

install & setup vite + react + typescript + ant design 5
1.Create a simple autocomplete in React using Ant Design 5's AutoComplete component and the useState hook.

import React, { useState } from 'react';
import { AutoComplete } from 'antd';

const mockVal = (str: string, repeat = 1) => ({
  value: str.repeat(repeat),
});

const App: React.FC = () => {
  const [value, setValue] = useState('');
  const [options, setOptions] = useState<{ value: string }[]>([]);
  const [anotherOptions, setAnotherOptions] = useState<{ value: string }[]>([]);

  const getPanelValue = (searchText: string) =>
    !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];

  const onSelect = (data: string) => {
    console.log('onSelect', data);
  };

  const onChange = (data: string) => {
    setValue(data);
  };

  return (
    <>
      <AutoComplete
        options={options}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={(text) => setOptions(getPanelValue(text))}
        placeholder="input here"
      />
      <br />
      <br />
      <AutoComplete
        value={value}
        options={anotherOptions}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={(text) => setAnotherOptions(getPanelValue(text))}
        onChange={onChange}
        placeholder="control mode"
      />
    </>
  );
};

export default App;

2.react ant design 5 search autocomplete with options property.

import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { AutoComplete, Input } from 'antd';

const renderTitle = (title: string) => (
  <span>
    {title}
    <a
      style={{ float: 'right' }}
      href="https://www.google.com/search?q=antd"
      target="_blank"
      rel="noopener noreferrer"
    >
      more
    </a>
  </span>
);

const renderItem = (title: string, count: number) => ({
  value: title,
  label: (
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-between',
      }}
    >
      {title}
      <span>
        <UserOutlined /> {count}
      </span>
    </div>
  ),
});

const options = [
  {
    label: renderTitle('Libraries'),
    options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
  },
  {
    label: renderTitle('Solutions'),
    options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
  },
  {
    label: renderTitle('Articles'),
    options: [renderItem('AntDesign design language', 100000)],
  },
];

const App: React.FC = () => (
  <AutoComplete
    popupClassName="certain-category-search-dropdown"
    dropdownMatchSelectWidth={500}
    style={{ width: 250 }}
    options={options}
  >
    <Input.Search size="large" placeholder="input here" />
  </AutoComplete>
);

export default App;

3.react typescript with ant design 5 search autocomplete.

import React, { useState } from 'react';
import { AutoComplete, Input } from 'antd';
import type { SelectProps } from 'antd/es/select';

const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;

const searchResult = (query: string) =>
  new Array(getRandomInt(5))
    .join('.')
    .split('.')
    .map((_, idx) => {
      const category = `${query}${idx}`;
      return {
        value: category,
        label: (
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            <span>
              Found {query} on{' '}
              <a
                href={`https://s.taobao.com/search?q=${query}`}
                target="_blank"
                rel="noopener noreferrer"
              >
                {category}
              </a>
            </span>
            <span>{getRandomInt(200, 100)} results</span>
          </div>
        ),
      };
    });

const App: React.FC = () => {
  const [options, setOptions] = useState<SelectProps<object>['options']>([]);

  const handleSearch = (value: string) => {
    setOptions(value ? searchResult(value) : []);
  };

  const onSelect = (value: string) => {
    console.log('onSelect', value);
  };

  return (
    <AutoComplete
      dropdownMatchSelectWidth={252}
      style={{ width: 300 }}
      options={options}
      onSelect={onSelect}
      onSearch={handleSearch}
    >
      <Input.Search size="large" placeholder="input here" enterButton />
    </AutoComplete>
  );
};

export default App;

Forem: Aaronn

My New Bootstrap 4 Card Generator

My New Bootstrap 4 Card Generator

How It Works

Key Features

Why Use This Tool?

See also

Bootstrap 5 Form Builder Tool Create Forms with Ease! 🛠️✨

Key Features and Functionality

User-Friendly Experience

Conclusion

See also

Introducing My New Bootstrap 5 Color Palette Generator Tool

🎨 What Does It Do?

🚀 How It Works

🛠️ Why You’ll Love It

🖥️ Ready to Give It a Try?

React Tailwind CSS Forgot Password Example

React Tailwind CSS Simple Forget Password

React Tailwind CSS ForgetPasswordForm with Link to Login Using React Router

React Tailwind CSS ForgetPasswordModal Using React Hook

See Also

React with Tailwind CSS File Upload Example

React File Upload Using Tailwind CSS

See Also

Create File Upload UI in Next.js with Shadcn UI

How to Use Icons in Shadcn UI with Next.js

Next.js with Shadcn UI Progress Bar Example

How to Use Scroll Area in Next.js with Shadcn UI

NextJS with Shadcn UI Scroll Area Example

Next.js Image File Upload and Preview with shadcn/ui

How to Implement Dropdown on Hover in React with Ant Design 5

how to use autocomplete in react ant design 5