Introduction

When developing modern websites, icons, UI components, and clean visuals play a crucial role in enhancing user experience. With tools like Lucide Icons, Tailwind CSS, and Shadcn/ui, you can build beautiful, customizable, and lightweight interfaces directly in Visual Studio Code.

In this guide, we will cover:

• How to set up a project in VS Code with Tailwind CSS.
• Adding Lucide Icons for scalable and stylish icons.
• Implementing Shadcn/ui for high-quality, pre-built UI components.
• Creating a modern design example.

---

Step 1: Setting Up a Tailwind CSS Project

To get started, install Tailwind CSS in a new or existing project.

1.1 Initialize a New Project

Run the following command in your terminal inside your project folder:

npm create vite@latest my-tailwind-project --template react
cd my-tailwind-project
npm install

1.2 Install Tailwind CSS

Execute:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This generates a tailwind.config.js file. Open it and configure the content section to scan your files:

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Now, include Tailwind in your CSS by adding the following to index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

Step 2: Installing Lucide Icons

Lucide is a modern and lightweight icon library. To install it, run:

npm install lucide-react

To use an icon in your React component:

import { Sun, Moon, Home } from "lucide-react";

export default function Navbar() {
  return (
    <nav className="flex justify-between p-4 bg-gray-800 text-white">
      <Home className="w-6 h-6" />
      <h1 className="text-xl">My Cool Website</h1>
      <Sun className="w-6 h-6 hover:text-yellow-400 cursor-pointer" />
    </nav>
  );
}

Each icon can be customized with size, color, and interaction styles.

---

Step 3: Setting Up Shadcn/ui for Professional Components

Shadcn/ui provides a set of modern, accessible UI components built on Tailwind CSS.

3.1 Install Shadcn/ui

Run:

npx shadcn-ui@latest init

Follow the setup prompts to integrate it into your Tailwind project.

3.2 Adding a Button Component

To add a button component, run:

npx shadcn-ui@latest add button

Now, use it in your component:

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

export default function Hero() {
  return (
    <section className="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white">
      <h1 className="text-4xl font-bold">Welcome to My Website</h1>
      <p className="text-gray-400">Enhance your UI with Lucide, Tailwind, and Shadcn!</p>
      <Button className="mt-4">Get Started</Button>
    </section>
  );
}

This provides a professional-looking button without extra styling effort.

---

Step 4: Combining Everything for a Fresh UI

Let’s put everything together to create a modern landing page.

import { Sun, Moon, Home } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-gray-900 text-white">
      {/* Navbar */}
      <nav className="flex justify-between p-4 bg-gray-800">
        <Home className="w-6 h-6" />
        <h1 className="text-xl">Modern UI</h1>
        <Sun className="w-6 h-6 hover:text-yellow-400 cursor-pointer" />
      </nav>

      {/* Hero Section */}
      <section className="flex flex-col items-center justify-center min-h-screen text-center">
        <h1 className="text-5xl font-bold">Build Beautiful Websites</h1>
        <p className="text-gray-400 mt-2">Lucide + Tailwind CSS + Shadcn/ui</p>
        <Button className="mt-4">Explore</Button>
      </section>
    </div>
  );
}

---

Conclusion

By using Lucide, Tailwind CSS, and Shadcn/ui, you can create visually stunning, fast-loading, and professional websites in Visual Studio Code.

These tools offer:

✅ Scalable icons with Lucide
✅ Rapid UI development with Tailwind CSS
✅ Pre-built, accessible components from Shadcn/ui

Start experimenting with these tools and build your own modern UI today! 🚀

Like this? follow us for more or visite http://192.168.1.157/