And while they may appear simple, designing interactive and scalable checkboxes in Figma requires a clear understanding of components, variants, states, and properties.

This guide walks you through everything you need to know, from the purpose and variations of checkboxes to step-by-step instructions for building fully interactive components.

You’ll also learn best practices to improve usability and discover ways to speed up your workflow with ready-made components, helping you create more efficient and production-ready designs.

Table of Contents:

1. What Is a Checkbox?

2. Checkbox Variations in UI Design

3. States of a Checkbox

4. Steps to Create an Interactive Checkbox in Figma

5. Checkbox: Various properties

6. Best Practices for CheckboxDesign in Figma

7. Speed Up with Ready-Made Checkbox Components

8. Conclusion

What Is a Checkbox?

A checkbox is a user interface element that allows users to select one or more options from a set of choices. Each checkbox operates independently, allowing multiple selections at the same time.

In Figma, checkboxes are typically created as components with variants, allowing designers to represent different states, such as checked, unchecked, hover, or disabled, in prototypes.

What Is the Purpose of a Checkbox? (Why We Use It)

You can use checkboxes in your designs when users need to:

• Select multiple options

• Confirm an action

• Enable or disable a feature

• Agree to terms or policies

Common real-world examples:

• “I agree to the Terms & Conditions.”

• Choosing notification preferences

• Selecting filters in e-commerce apps

• Marking tasks as completed in to-do apps

In Figma prototypes, interactive checkboxes help simulate real user behavior, making designs easier to validate before development.

Checkbox Variations in UI Design

Different Checkbox Formats

Depending on your design system, checkboxes can appear in many formats:

Card-Based Checkbox Selection – Uses cards as selectable elements with integrated checkboxes. This pattern improves visual clarity and is ideal for selecting rich content options.

Simple To-Do List Checkboxes – Basic checkbox layout for task lists where users can mark items as complete. Commonly used for straightforward tracking and productivity flows.

Status & Completed Checkboxes – Represents different task states such as pending, in-progress, or completed. Helps users quickly understand progress and current status.

Error State Checkboxes – Displays validation errors when a required checkbox is not selected. Often used in forms to guide users toward required actions.

Chip-Style Checkbox Selection – Combines checkboxes with chip UI elements for compact, multi-select options. Ideal for filters, tags, or quick selections.

Nested Checkbox Structures – Organizes checkboxes in parent-child relationships. Allows bulk selection and partial (indeterminate) states for better hierarchy control.

Design tip:

• Use checkboxes when users can select multiple options.

• Use radio buttons when only one option is allowed.

States of a Checkbox

A well-designed checkbox should clearly communicate its current state to users.

Common Checkbox States:

In the below illustration, you can see examples of the various states of checkboxes – Unchecked, Checked, Indeterminate, Disabled Uncheck, and Disabled Check:

Unchecked (default): The default state where no selection has been made. It indicates that the option is available but not currently chosen.

Checked: This state shows that the option has been selected by the user. It confirms an active choice and is typically represented with a checkmark.

Hover: Appears when the user moves the cursor over the checkbox. It provides visual feedback to indicate that the element is interactive.

Active / Pressed: Triggered when the user clicks or taps the checkbox. This state gives immediate feedback during the interaction before the final state is applied.

Disabled: Indicates that the checkbox is not interactive and cannot be changed. It's usually dimmed to show that the option is unavailable.

Indeterminate (partially selected): Represents a mixed or partial selection, often used in parent-child relationships. It shows that some, but not all, related options are selected.

How Figma Handles These States (Using Variants)

In Figma, these states are best managed using variants within a component, which allow you to group multiple versions of the same UI element into a single, organized component set.

Instead of creating separate checkbox designs for each state, variants let you define all states, like checked, unchecked, hover, and disabled inside one component. Each state becomes a variant, and you can switch between them using properties such as:

• State = Unchecked

• State = Checked

• State = Disabled

This approach helps you maintain consistency across all checkbox instances and quickly switch states from the properties panel. It also lets you create interactive prototypes by linking variants (for example, click → change to checked), and scale design systems efficiently without duplicating components.

In simple terms, variants act as different “versions” of a component, and Figma allows you to connect these versions together to simulate real UI behavior – just like how a checkbox works in an actual product.

Steps to Create an Interactive Checkbox in Figma

Building interactive checkboxes from scratch is useful for learning. But in real projects, speed and consistency matter.

If you want production-ready checkbox components, check out Shadcn Studio.

It offers clean, scalable UI components inspired by modern design systems, helping designers move faster without sacrificing quality.

Step 1: Design the Checkbox UI

Start by drawing a square (recommended size: 24 × 24 px). Then add a check icon to it for the checked state (recommended size: 20 × 20 px).

Next, add a text label (recommended size: 14 px medium). You can use Auto Layout for proper spacing (recommended spacing: 12).

It should look like this:

Step 2: Create a Component

Convert your checkbox design into a reusable component to ensure consistency and scalability. By adding variants, you can manage different states efficiently within a single component set.

• Select the checkbox design

• Convert it into a Component

• Create variants for different states:

  • Unchecked

  • Checked

  • Indeterminate

  • Disable Check

  • Disable Uncheck

Name the variant properties clearly, for example:

• State = Unchecked

• State = Checked

And so on.

Step 3: Add Interactions Between Variants

Before setting up interactions, it’s important to understand what’s happening here.

In Figma, variants don’t automatically “know” how to switch between each other. You have to define how and when one variant transitions to another. This is done using prototype interactions.

Think of it like this:

• Each variant = a state (Unchecked, Checked, Hover, and so on)

• Interactions = the rules that tell Figma when to switch states

So when a user clicks a checkbox, you're essentially telling Figma: “When this happens (click), change from this state to that state.”

This is what creates the illusion of a working, interactive component, similar to how state changes work in real code.

Now let’s implement it:

• Switch to the Prototype tab

• Select the Unchecked variant

• Add an interaction:

  • Trigger: On click

  • Action: Change to → Checked

Now, repeat the same steps to create the reverse interaction (so the checkbox can toggle back):

• Select the Checked variant

• Add an interaction:

  • Trigger: On click

  • Action: Change to → Unchecked

This two-way connection (Unchecked → Checked and Checked → Unchecked) is what creates the toggle behavior of a checkbox.

Step 4: Test the Checkbox

Preview the component to ensure all interactions and states are working as expected. This step helps verify that the checkbox behaves correctly before using it in your designs.

• Click Present

• Interact with the checkbox

• It should toggle between checked and unchecked states

Checkbox: Various Properties

Before diving into specific properties, let’s understand what Figma variables are and why they matter.

What Are Variables in Figma?

Variables in Figma allow you to store and control values, such as visibility, text, colors, sizes, or states, and reuse them across your components. Similar to how variables behave in code.

Instead of manually updating every instance of a component, variables let you define a value once and control it dynamically.

Think of variables like:

• Switches (Boolean) – Show / hide elements

• Options (Variants) – Change between states like checked or unchecked

• Scalable controls – Adjust sizes, styles, or themes across multiple components

This makes your components more flexible, scalable, and easier to manage, especially in larger design systems.

Why Use Variables for Checkboxes?

Checkboxes often need to adapt based on context, like showing labels, changing sizes, or switching states. Variables help you manage all of this without creating separate components for every variation.

With variables, a single checkbox component can behave in multiple ways.

What You Can Control with Variables

With Figma variables, you can:

Show or Hide Label – Controls whether the label is visible alongside the checkbox. Useful when space is limited or the context is already clear.

State Variant – Defines interaction states like checked, unchecked, hover, and disabled to ensure consistent behaviour and feedback.

Size Variant – Specifies checkbox sizes (small, medium, large) to maintain visual hierarchy across different UI contexts.

Creating Different Variant – Combines state, size, and label visibility into structured variants for scalability and easier management in Figma.

First, let’s learn how to show and hide the label in a checkbox.

1. Turn it into a component

You can convert your checkbox into a reusable component so it can be used consistently across your designs. This also allows you to add properties and variants later.

• Select the entire checkbox, including the checkbox icon and the label text

• Press Cmd / Ctrl + Alt + K to convert it into a Component

• Rename the component to Check Box

2. Create a Boolean property for the label

You can use a Boolean property to control whether the label is shown or hidden. This makes the component more flexible for different use cases.

• Select the main component

• In the Properties section on the right panel, click +

• Choose Boolean

• Name the property Label

• Set the default value to True

This Boolean property controls the label's visibility.

3. Bind the Boolean to the label visibility

You can associate the Boolean property with the label layer to enable dynamic visibility based on the property's value.

• Select only the label text layer

• In the Appearance section of the right panel

• Click the icon that is highlighted in the image with a red square

• Choose Bind to property

• Select the Label Boolean

Now, we’re going to learn how to add properties for size, state, and variants.

We'll create all checkbox designs covering:

• States: Unchecked, Checked, Indeterminate, Disabled check, Disabled uncheck

• Variants: Primary, Secondary, Info, Warning, Destructive

• Sizes: Sm, Md, Lg

Then select all checkbox designs and convert them into components by selecting Create Multiple Components (Cmd / Ctrl + Alt + K)

With all components selected, click Combine as variants.

Select the main component set and rename properties:

• Rename Property 1 to state

• Add a Variant property and rename it to variant

• Add another Variant property and rename it to size

Select all unchecked checkboxes and set:

• state = Unchecked

Same for all state values.

• Select all primary checkboxes and set:

  • variant = Primary

Same for all Variant values.

Then select all medium checkboxes and set:

• size = md

Same for all Size values.

Drag any checkbox instance onto the canvas and verify that State, Variant, and Size properties work correctly:

Best Practices for CheckboxDesign in Figma

Always include clear and readable labels – Clear labels help users quickly understand the purpose of each checkbox and reduce confusion during interaction.

Maintain consistent spacing using Auto Layout – Consistent spacing ensures visual balance and alignment while keeping layouts scalable and structured.

Ensure sufficient colour contrast for accessibility – Proper contrast improves visibility and ensures the checkbox is accessible to all users.

Make the clickable area large enough – A larger clickable area enhances usability, especially on touch devices, and reduces misclicks.

Keep interactions simple and predictable – Simple and predictable interactions help users easily understand behavior and build confidence while using the interface.

Speed Up with Ready-Made Checkbox Components

Building interactive checkboxes from scratch is useful for learning, but in real projects, speed and consistency matter.

If you want production-ready checkbox components, check out Shadcn Studio. It offers clean, scalable UI shadcn components and blocks inspired by modern design systems, helping designers move faster without sacrificing quality.

Why use Shadcn Studio?

• Save hours on repetitive UI work

• Maintain consistent checkbox styles

• Easy to integrate into existing design systems

• Ideal for SaaS products, dashboards, and web apps

You can explore Shadcn Checkbox components on Shadcn Studio. You'll also find animated checkbox components you can try out.

Conclusion

Checkboxes are small but essential UI elements that improve usability and help simulate real user interactions in Figma. By using components, variants, Auto Layout, and variables, designers can create scalable, accessible, and consistent checkbox systems.

Following best practices ensures clarity and better user experience, while ready-made component libraries can speed up workflows and maintain design consistency. Mastering interactive checkboxes ultimately helps designers prototype more effectively and deliver polished, production-ready interfaces.

I have prepared this article with the help of Nirmi Nagori, a passionate Figma designer.

You’ll learn about essential concepts such as setting up and configuring the registry, adding authentication, CLI commands you can use, and more.

Table of Contents:

• What is a Registry in shadcn?

• How to Create and Configure Your Registry

• Namespace System

• Authentication for Private Registries

• CLI Commands

• Dependency Resolution

• Error Handling

• Conclusion

What is a registry in shadcn?

A registry in shadcn is a central place for sharing and managing your reusable components, utilities, and UI elements (along with other resources) across different projects. It lets developers give numbers to and organize components in a standard way. This makes it easier to integrate and share resources within and across teams.

The registry system helps make these components easily reusable. It also helps teams keep their code clean and manage dependencies more effectively.

shadcn's main system uses the registry.json file. The file provides key information about the registry, such as resource names and places along with the files that go with them.

Why use a shadcn registry?

Using registries is helpful because it helps you standardize rules for your components. Every component, UI element, or utility follows a clear plan, which makes it easier to integrate and manage them.

Also, version numbers let you manage different versions of a component. This makes sure various parts work together and lets you update them without trouble.

Registries also give you the ability to organize resources into groups while managing what depends on what. Everything is flexible this way.

And if you create a registry, it lets you share your components with other developers (either everyone or just certain people). This allows for both inside and open-source work.

How to Create and Configure Your Registry

Creating a shadcn registry involves setting up a configuration file (registry.json) at the root of your project. This file contains the metadata and structure of your registry, helping define components and their relationships.

shadcn provides this starter template to help you understand how registries work.

Step by Step Guide to Create a Registry

1. Define the Registry's Metadata

You’ll need to fill in the following information:

• name: A unique name for the registry.

• homepage: A URL pointing to the homepage for the registry.

• items: An array that contains all available components, UI elements, or utilities in the registry.

Here’s an example of a simple registry.json:

{
  "$schema": "<https://ui.shadcn.com/schema/registry.json>",
  "name": "acme",
  "homepage": "<https://acme.com>",
  "items": [
    // Components will go here
  ]
}

2. Components Structure

Each item in the registry can be a component, theme, hook, or utility. These items have the following properties:

• name: Unique name of the component.

• type: Specifies the type of item (for example, registry:component, registry:block).

• files: An array of files that make up the component.

Here’s an example:

{
  "name": "name",
  "type": "registry:block",
  "title": "title",
  "description": "Simple description",
  "files": [
    {
      "path": "registry/new-york/...",
      "type": "registry:component"
    }
  ]
}

This component contains a simple button. You can keep adding more components to the items array.

3. Adding Components

After creating the registry.json file, you can add components to the registry. These components can be UI elements, functions, or utilities.

Example 1: Adding a Simple Button Component

First, create the component file. You can define your component in a separate directory. For example, we will create a HelloWorld component.

// registry/new-york/hello-world/hello-world.tsx
import { Button } from "@/components/ui/button"

export function HelloWorld() {
  return <Button>Hello World</Button>
}

Reference the component in your registry.json like this:

{
  "name": "hello-world",
  "type": "registry:block",
  "title": "Hello World",
  "description": "A simple hello world component.",
  "files": [
    {
      "path": "registry/new-york/hello-world/hello-world.tsx",
      "type": "registry:component"
    }
  ]
}

The "files" key points to the path where the component is stored, while the type helps categorize the item.

Example 2: Adding Multiple Components

You can add multiple components to the registry as well. For instance, a button and a form could be part of a UI package:

{
  "name": "ui-kit",
  "type": "registry:block",
  "title": "UI Kit",
  "description": "A collection of basic UI components.",
  "files": [
    {
      "path": "registry/ui-kit/button/button.tsx",
      "type": "registry:component"
    },
    {
      "path": "registry/ui-kit/form/form.tsx",
      "type": "registry:component"
    }
  ]
}

This modular approach allows for scalable development, enabling easy additions or updates to the registry without affecting other parts of the application.

You can learn more about registry basics in the shadcn UI docs.

Namespace System

Namespaces in shadcn help arrange components, utilities, themes, or other resources. The goal is to avoid conflicts and provide a good structure for your resources.

What is a Namespace?

A namespace groups resources under a plain identifier, usually prefixed with an '@'. With this, you can separate different types of resources, teams, or even public versus private components.

For instance:

• @shadcn/button could represent a button component from shadcn's registry.

• @acme/auth-utils could represent authentication utilities developed by the Acme company.

How to Configure Multiple Registries Using Namespaces

You can configure multiple registries under different namespaces, which helps organize resources by type or team:

{
  "registries": {
    "@acme-ui": "<https://registry.acme.com/ui/{name}.json>",
    "@acme-docs": "<https://registry.acme.com/docs/{name}.json>",
    "@acme-ai": "<https://registry.acme.com/ai/{name}.json>",
    "@acme-internal": {
      "url": "<https://internal.acme.com/registry/{name}.json>",
      "headers": {
        "Authorization": "Bearer ${INTERNAL_TOKEN}"
      }
    }
  }
}

This setup allows you to:

• Keep UI components, documentation, AI resources, and internal libraries separate.

• Easily manage public and private resources within the same registry configuration.

You can learn more about Namespace in the shadcn UI docs.

Authentication for Private Registries

If you have private registries, shadcn offers several authentication methods to ensure that only authorized users can access them. These include Bearer Token (OAuth 2.0), API Key, Basic Authentication, and Query Parameter Authentication. Let’s look at each one in more detail.

Bearer Token (OAuth 2.0)

Bearer tokens are ideal for integrating with external APIs like GitHub or internal services that support OAuth 2.0.

You include the token in the Authorization header of the request. You typically get this token through an OAuth 2.0 flow, and it grants access to protected resources.

Here’s an example:

{
  "@github": {
    "url": "<https://api.github.com/repos/org/registry/contents/{name}.json>",
    "headers": {
      "Authorization": "Bearer ${GITHUB_TOKEN}"
    }
  }
}

API Key

You commonly use API keys for private NPM registries or internal APIs where a simple key is sufficient for access control.

An API key is included in the request headers, often under X-API-Key. This key is issued by the service and you should keep it confidential.

Here’s an example:

{
  "@private": {
    "url": "<https://api.company.com/registry/{name}>",
    "headers": {
      "X-API-Key": "${API_KEY}"
    }
  }
}

Basic Authentication

You’ll typically use basic authentication in legacy systems that require basic HTTP authentication.

The Authorization header contains a base64-encoded string of the format username:password. While it’s pretty easy to implement, it’s less secure than more modern methods like OAuth 2.0.

Here’s an example:

{
  "@internal": {
    "url": "<https://registry.company.com/{name}.json>",
    "headers": {
      "Authorization": "Basic ${BASE64_CREDENTIALS}"
    }
  }
}

Query Parameter Authentication

Query parameter auth is a simpler form of authentication using query parameters for APIs.

It works by passing authentication details as query parameters in the URL. While this is convenient, it’s less secure than other methods since query parameters can be exposed in logs or URLs.

Here’s an example:

{
  "@secure": {
    "url": "<https://registry.example.com/{name}.json>",
    "params": {
      "api_key": "${API_KEY}",
      "client_id": "${CLIENT_ID}",
      "signature": "${REQUEST_SIGNATURE}"
    }
  }
}

Multiple Authentication Methods

Some registries require multiple authentication methods simultaneously – for example, a combination of a Bearer token and an API key.

The request includes multiple headers and possibly query parameters to satisfy all required authentication mechanisms. This is common in enterprise environments where different layers of security are enforced.

Here’s an example:

{
  "@enterprise": {
    "url": "https://api.enterprise.com/v2/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${ACCESS_TOKEN}",
      "X-API-Key": "${API_KEY}",
      "X-Workspace-Id": "${WORKSPACE_ID}"
    },
    "params": {
      "version": "latest"
    }
  }
}

You can learn more about Authentication and Security in the shadcn UI docs.

CLI Commands

The shadcn CLI lets you interact with the registry directly from the command line. With commands like add, view, search, and list, you can easily install and manage resources. Let’s look at some examples to see how this works.

Install Resources from the Registry

Use the following commands to add resources to your project:

# Install a specific component
npx shadcn@latest add @acme/button

# Install multiple components at once
npx shadcn@latest add @acme/button @lib/utils @ai/prompt

These commands fetch the specified components from the registry and integrate them into your project, ensuring all necessary dependencies are also installed.

Viewing Metadata

Before integrating a component, it's crucial to understand its structure and dependencies. The view command allows you to inspect a component's metadata:

# View a specific component
npx shadcn@latest view @acme/button

# View multiple components
npx shadcn@latest view @acme/button @lib/utils @ai/prompt

# View from a URL directly
npx shadcn@latest view https://registry.example.com/button.json

# View from a local file
npx shadcn@latest view ./local-registry/button.json

So what does the view command display?

• Resource metadata: Information such as the component's name, type, and description.

• Dependencies: Lists both direct and registry dependencies required by the component.

• File contents: Displays the actual code that will be installed.

• CSS variables and Tailwind configuration: Shows any styling configurations associated with the component.

• Required environment variables: Lists any environment variables needed for the component to function correctly.

This command is invaluable for reviewing a component's details before installation, ensuring compatibility and understanding its requirements.

Searching Resources

To discover components within a registry, you can use these commands:

# Search a specific registry
npx shadcn@latest search @v0

# Search with a query
npx shadcn@latest search @acme --query "auth"

# Search multiple registries
npx shadcn@latest search @v0 @acme @lib

# Limit results
npx shadcn@latest search @v0 --limit 10 --offset 20

# List all items (alias for search)
npx shadcn@latest list @acme

They help you find components based on criteria like registry, query terms, and result limits.

Learn more about CLI Commands in the shadcn UI docs.

Dependency Resolution

The CLI automatically resolves and installs all dependencies from their respective registries.

Understanding how dependencies are resolved internally is important if you're developing registries or need to customize third-party resources.

In shadcn, components often rely on other resources from various registries. When you install a component, shadcn ensures that all its dependencies are also installed, even if they reside in different registries. This process is known as dependency resolution.

What Does It Mean to "Resolve Dependencies"?

So to be clear resolving dependencies involves identifying, fetching, and installing dependencies.

First, shadcn determines which components a resource requires to function correctly. Then it retrieves these dependent components from their respective registries. Finally, it ensures that all dependencies are installed before the main component, maintaining the correct order.

This process guarantees that when you install a component, all its prerequisites are also installed, ensuring smooth functionality.

Understanding Topological Sorting in Dependency Resolution

Topological sorting might sound complicated, but it's essentially a method of organizing tasks (or components) in a way that makes sure everything gets done in the right order.

Imagine you have a list of tasks, and some tasks depend on others to be completed first. For example, you can't make a cake without first measuring out and then mixing the ingredients. So, the tasks “measure ingredients” and "mix ingredients" need to be completed before "bake the cake."

In the context of shadcn, topological sorting works in a similar way to organizing the installation of components:

• Each component (like dashboard) can depend on other components (like @shadcn/card or @acme/data-table).

• Topological sorting arranges the components so that each one is installed only after the components it depends on have been installed.

Why Is Topological Sorting Important?

Topological sorting takes care of a couple key things. First, it makes sure that components are installed in the correct order. For example, if Component A depends on Component B, then Component B will be installed first, followed by Component A.

It also prevents circular dependencies. If two components depend on each other, topological sorting detects this and prevents a never-ending loop (also called a circular dependency).

Example of Dependency Resolution:

Consider the following component with its dependencies:

{
  "name": "dashboard",
  "registryDependencies": [
    "@shadcn/card",
    "@v0/chart",
    "@acme/data-table"
  ]
}

In this example, we have a component: dashboard and its dependencies: @shadcn/card, @v0/chart, and @acme/data-table.

In this case, shadcn will first identify the dependencies by recognizing that dashboard depends on @shadcn/card, @v0/chart, and @acme/data-table. Then it will fetch these components from their respective registries. Finally, it’ll install @shadcn/card, @v0/chart, and @acme/data-table first, before installing dashboard, ensuring all prerequisites are met.

You can learn more about Dependency Resolution in the shadcn UI docs.

Error Handling

shadcn’s CLI is equipped to handle several types of errors. Here are some common scenarios and how to resolve them:

Common Errors

1. Unknown Registry

This error occurs when the registry isn’t defined in the configuration.

Here’s an example:

Error: Unknown registry "@non-existent"

Solution: To fix this, just add the registry in the registries section of your configuration.

2. Missing Environment Variables

If your registry requires certain environment variables that are not set, you'll get an error.

Here’s an example:

Registry "@private" requires REGISTRY_TOKEN

Solution: To fix this, just add the required environment variables to .env or .env.local.

3. 404 Not Found

The resource may not exist or the URL could be incorrect.

Here’s an example:

Error: The resource was not found at <https://api.company.com/button.json>

4. Authentication Failures (401/403)

If you’re not authorized to access a resource, you’ll see 401 or 403 errors.

To fix this, make sure your tokens, API keys, or credentials are valid.

You can learn more about Error Handling in the shadcn UI docs.

Conclusion

The shadcn registry system provides a good, modular solution for managing and sharing components or utilities across projects. If you’re looking to explore practical implementations, platforms like shadcn/studio which showcase how you can leverage shadcn components to build sleek, modern UI solutions with minimal setup.

With its structured approach to dependencies, flexible namespaces, good authentication, and CLI commands, registries enable teams to share secure resources and customize them along the way.

I have prepared this article with the help of Pruthvi Prajapati, a front-end developer with 3 years of experience.

In this article, you’ll learn how to effortlessly create a modern and responsive landing page using Context7 MCP and Bootstrap 5 by simply providing prompts - no expert coding required!

Landing pages are the cornerstone of online success. They directly influence conversion rates and play a crucial role in lead generation. But creating an effective landing page that looks great across all devices can be a daunting task. That’s where AI-powered tools can help, making it easier than ever to build a landing page that’s both visually appealing and responsive.

Table of Content

• Prerequisites

• Leveraging AI for Bootstrap 5 Landing Page Code Generation

• What is Bootstrap?

• What is MCP?

• Basic Use Case of Context7 in MCP for Bootstrap

• How to Use Context7 MCP for Optimal Results with Bootstrap 5

• Step-by-Step Build: AI-Powered Landing Page with Bootstrap 5 and Context7 MCP

• How to Set Up Context7 MCP in VS Code

• Instructions for Content Generation and Confirmation Process

• Methods for Building a Landing Page with AI

• Conclusion

Prerequisites

Before diving into the tutorial, make sure you have the following:

• Basic understanding of HTML, CSS, and JavaScript.

• Bootstrap 5: Familiarity with this front-end framework is essential.

• VS Code: A modern code editor like Visual Studio Code.

• Node.js: Installed to run server-side operations.

• Context7 MCP: A basic understanding of this AI-driven tool for managing design systems.

Leveraging AI for Bootstrap 5 Landing Page Code Generation

Building a landing page traditionally requires crafting HTML and CSS from scratch, which can be labor-intensive and prone to inconsistencies. That’s where AI can be helpful.

Tools like Context7 MCP & VS Code complement this workflow by accelerating the process: with a simple prompt such as “feature card with icon and button,” it produces ready-to-use code snippets that integrate seamlessly with Bootstrap 5’s grid system and styling principles.

This allows developers to iterate quickly, refine their designs, and allocate more effort toward unique content and user-centric refinements.

Benefits of Using AI for Bootstrap Code Generation:

1. Speed: Generate responsive, well-structured code in seconds.

2. Efficiency: Automates boilerplate code, letting developers focus on higher-level tasks.

3. Consistency: Ensures all generated components align with Bootstrap’s standards.

4. Customization: Provides flexibility to tailor components to your needs.

5. Improved and Up-to-Date AI-Generated Code: The AI follows structured guidelines, ensuring the generated code is current and accurate.

How AI Revolutionizes Bootstrap Development

AI-driven tools like Context7 MCP are not just for developers, they make web development accessible to everyone, even those without coding expertise.

Small business owners, digital creators, and freelancers can now create professional-grade landing pages with just a few prompts, allowing them to bring their visions to life without a steep learning curve.

What is Bootstrap?

Bootstrap 5 is a powerful, open-source front-end framework that helps developers build responsive websites quickly. It provides a comprehensive set of components, a flexible grid system, and utility classes, making it easy to design modern, mobile-first websites with minimal effort.

Bootstrap is widely used for developing responsive, mobile-first websites. It offers a collection of reusable tools and components, such as navigation bars, forms, buttons, and more, which can be easily customized to meet specific project requirements.

Why Choose Bootstrap 5 for Landing Pages?

Bootstrap 5’s mobile-first approach, combined with its responsive grid system, makes it the go-to choice for building landing pages that perform seamlessly across all screen sizes.

The grid system, based on flexbox, enables designers to create fluid layouts that adapt to the user's viewport, ensuring that landing pages look polished on any device. With numerous utility classes for spacing, typography, and colors, developers can style pages quickly, reducing the need for custom CSS.

Additionally, Bootstrap 5 introduces modern CSS variables, enabling developers to easily adjust themes and style elements dynamically, perfect for projects that require quick visual updates.

Key Bootstrap 5 Benefits for Landing Pages:

• Mobile-First Design: Built to prioritize mobile responsiveness, ensuring seamless performance across all devices, from phones to desktops.

• Extensive Component Library: A rich set of reusable, customizable components, such as buttons, alerts, forms, navigation bars, and more. This streamlines development and reduces the need for custom code.

• Responsive Grid System: The flexbox-based grid ensures that layouts are flexible, adaptive, and easy to modify for various screen sizes.

• Utility Classes: Bootstrap 5 includes a comprehensive set of utility classes for handling spacing, alignment, typography, and visibility, speeding up the styling process.

• Live Documentation & Community Support: Bootstrap 5 offers detailed and interactive documentation, backed by a large, active community for support and resources.

What is MCP?

MCP stands for Model Context Protocol. It is an open and standardized protocol designed to facilitate the interaction between large language models (LLMs) and external applications, data sources, and tools.

MCP enables seamless integration and contextualization, providing a uniform way for AI models to receive and understand context from various sources.

MCP works similarly to a universal connector, much like how USB-C serves as a common interface for connecting various devices.

Just as USB-C simplifies connectivity across devices, MCP streamlines the integration of LLMs with different data sources and services, ensuring smooth communication and enhancing the overall functionality of AI models.

MCP empowers developers and organizations to build intelligent agents and complex workflows by offering the following:

• Pre-built Integrations: A growing list of integrations that enable your LLM to plug into popular data sources, tools, and services without the need for custom development.

• Custom Integration Framework: A standardized way to create custom connections between LLMs and external services, ensuring flexibility and scalability across different use cases.

• Open Protocol: MCP is open-source, meaning anyone can implement and utilize it, promoting wider adoption and community-driven growth.

• Context Portability: MCP allows the transfer of context between various applications, making it easy to switch between services while maintaining the same level of contextual awareness across systems.

By using MCP, you can build powerful AI-driven applications, automate complex workflows, and create more context-aware models that can interact seamlessly with the world around them.

Basic Use Case of Context7 in MCP for Bootstrap

When working with Bootstrap, one of the biggest challenges developers face is ensuring their code stays up-to-date with the latest version of the framework.

Bootstrap, like many modern front-end frameworks, undergoes frequent updates, and without access to version-specific documentation, LLMs (Large Language Models) may generate outdated or incorrect code, especially when dealing with new components or utility classes introduced in recent versions.

This can lead to frustrating issues, such as hallucinated code or incorrect implementation of new Bootstrap features. Manual efforts to update documentation or reference various sources are often time-consuming and inefficient, with the added challenge of keeping track of specific version differences across the framework’s evolution.

The Solution: Context7 for Bootstrap

Clean, version-specific Bootstrap documentation for accurate, up-to-date code generation.

Context7 eliminates these issues by providing real-time, version-specific documentation directly to your AI tools, ensuring they always have the most accurate and relevant Bootstrap code. With Context7, you can be confident that the AI-generated code is fully aligned with the current version of Bootstrap, streamlining the development process and ensuring upto the mark implementation of the framework.

Key Features of Context7 for Bootstrap:

• Version-Specific Bootstrap Documentation: Always up-to-date with the latest Bootstrap version, ensuring accurate integration of new classes, components, and utilities.

• Real, Working Bootstrap Code: Extracts working examples directly from official Bootstrap documentation, saving you time and effort.

• Concise and Relevant Information: Filters out unnecessary details and ensures you receive only the most useful snippets for your project.

• Free for Personal Use: Access the powerful Context7 tool without any cost for personal development and experimentation.

• MCP Integration: Seamlessly integrates with Model Context Protocol (MCP) to provide context-aware AI interactions, making it easier for developers to work with Bootstrap in real-time.

How to Use Context7 MCP for Optimal Results with Bootstrap 5

When building responsive and modern landing pages, developers often face limitations with tools like Lovable and Bolt. These platforms typically provide pre-built templates, but they can restrict customization and integration, especially when working with powerful front-end frameworks like Bootstrap 5.

Unlike traditional solutions, Context7 MCP integrates with the most current official Bootstrap 5 documentation, providing real-time access to the latest framework updates, components, and best practices.

This feature is essential, as it ensures that the generated code adheres to Bootstrap 5’s latest standards, offering a far more flexible and accurate approach than static templates or LLM-based solutions, which might not reflect the most recent changes in Bootstrap 5.

With Context7 MCP, you gain:

• Flexibility: Effortlessly generate custom Bootstrap 5 components tailored to your specific needs, such as navigation bars, buttons, or modals.

• Seamless Bootstrap 5 Integration: Fully integrate with Bootstrap 5’s responsive grid system and design conventions, ensuring your landing pages are both functional and adaptive to different screen sizes.

• Consistency: Maintain design consistency across your project without compromising on customization, leveraging the latest components and utilities directly from Bootstrap 5.

• Up-to-Date Components: Always have access to the latest Bootstrap 5 features and updates from MCP, ensuring that your landing pages are current with the latest changes in the framework.

How Context7 MCP Enhances Productivity

By incorporating Context7 MCP into your development workflow, you streamline the process of building responsive landing pages and web applications.

Context7 MCP ensures that all your components align with latest Bootstrap 5 standards, making it easier to maintain consistency throughout your project.

This allows you to quickly adapt to the latest Bootstrap 5 updates, leveraging its latest features without the risk of introducing errors or inconsistencies.

Step-by-Step Build: AI-Powered Landing Page with Bootstrap 5 and Context7 MCP

In this guide, we will walk through building an engaging AI-powered landing page using Context7 MCP and Bootstrap 5. We will cover everything from setting up the project environment to generating responsive Bootstrap components and integrating AI-powered elements to enhance user experience.

Set Up the Project Environment

Before we dive into creating the landing page, we’ll start by setting up the project structure and ensuring that we have Bootstrap 5 integrated. Additionally, we will leverage Context7 MCP to automate the generation of responsive components and layouts for the landing page.

1. Set up the project folder:

mkdir my-landing-page
cd my-landing-page

Create the index.html file for the landing page layout:

touch index.html

Initialize the project with npm:

npm init -y

This will create a package.json file for the project.

2. Add Bootstrap 5 to the project:

You can include Bootstrap 5 in two ways: by downloading the compiled CSS and JS files or by using a CDN. For simplicity, we’ll use the CDN links.

In the <head> section of your index.html, add:

<link href="<https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css>" rel="stylesheet">

At the end of the <body> section, add:

<script src="<https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js>"></script>

This ensures that Bootstrap 5 is integrated into the project for layout and component styling.

3. Basic Structure of the Landing Page:

Start by setting up the basic layout in your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <!-- Bootstrap 5 CDN -->
    <link href="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css>" rel="stylesheet">
</head>
<body>
    <!-- Landing Page Content -->

    <script src="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js>"></script>
</body>
</html>

This simple structure sets the stage for a responsive design. Feel free to modify the content as per your requirements.

How to Set Up Context7 MCP in VS Code

Integrating Context7 MCP into your project is an essential step to streamline your development process, allowing seamless interaction with large language models (LLMs) and ensuring the generation of accurate, context-driven code. Below is a step-by-step guide on how to set up Context7 MCP in VS Code.

1. One-Click Setup (Optional)

For a quick and easy installation, you can use the one-click setup to install Context7 MCP in VS Code. Simply click the link below to initiate the installation:

Install Context7 MCP in VS Code

This will automatically install Context7 MCP for you within VS Code, enabling it for use in your development environment.

2. Add MCP Configuration to VS Code

Once Context7 MCP is installed, you’ll need to configure it within VS Code. This step ensures that VS Code communicates with the MCP server to fetch context-driven documentation and code examples.

To add the configuration, follow these steps:

1. Open the settings.json file in VS Code by navigating to File > Preferences > Settings and clicking the {} Open Settings (JSON) icon.

2. Add the following MCP configuration to the settings file:

"mcp": {
  "servers": {
    "context7": {
      "type": "http",
      "url": "<https://mcp.context7.com/mcp>",
      "headers": {
        "CONTEXT7_API_KEY": "YOUR_API_KEY"
      }
    }
  }
}

Replace "YOUR_API_KEY" with your actual API key from Context7. This key will authenticate your request and allow access to MCP services.

3. Local Server Setup

If you prefer running Context7 MCP locally rather than using the hosted version, you can set up a local server. This is especially useful for working in isolated environments or without an internet connection.

To configure Context7 MCP to run locally:

1. Open your settings.json file in VS Code.

2. Add the following configuration:

"mcp": {
  "servers": {
    "context7": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp", "--api-key", "YOUR_API_KEY"]
    }
  }
}

This setup runs Context7 MCP locally by invoking the npx command with the necessary arguments, including your API key.

4. Installing Context7 in Other Editors

If you wish to set up Context7 MCP in other code editors, you can follow detailed installation guidelines available in the Context7 Installation Documentation. This resource provides step-by-step instructions for configuring MCP in various environments, ensuring compatibility with your preferred editor.

Instructions for Content Generation and Confirmation Process

To begin generating content with Context7 MCP, you first need to confirm whether you'd like to proceed with the provided context. If you're using the context I've shared, simply click 'Continue' to confirm your choice.

A second confirmation will ensure that you want to generate content based on the prompt provided. Once you click 'Continue', the system will refer to the appropriate context (for example, Bootstrap documentation) and initiate the content generation process.

Note: When writing a prompt and intending to use Context7, make sure to include using context7 at the beginning of the prompt. This explicitly directs the AI to generate content based on Model Context Protocol (MCP) and relevant context sources like Bootstrap 5 documentation.

How to Automate the Inclusion of Context7 Instructions

If you'd like to avoid manually including the using context7 instruction in every prompt, you can automate the process by setting default instructions in your project’s configuration files. To do this, add the following instructions to your .github/copilot-instructions.md file in the root directory of your project:

always use context7 with bootstrap

Methods for Building a Landing Page with AI

1. Building a Complete Landing Page with a Single Prompt

An effective landing page is not just about design, it must provide a seamless, user-friendly experience that immediately captures attention and guides visitors through the content.

By leveraging the flexibility of Bootstrap 5 and the power of the Context7 MCP framework, you can generate a complete, fully responsive landing page that performs well across all devices, both mobile and desktop.

Using a single prompt, you can quickly create a comprehensive layout with all essential sections, streamlining the process while maintaining visual appeal and functional design.

Important Note: When generating a complete landing page layout, results may vary depending on different environments or agents. While creating a full-page design using a single prompt can yield some results, the precision and consistency may not be as high compared to generating individual sections. For more consistent and accurate results, consider using advanced models like Claude Sonnet 4 to ensure better output quality.

Creating a Responsive AI Tool Landing Page

Here’s a template for building a responsive and dynamic landing page layout using Bootstrap 5, ensuring that all key sections are optimized for both mobile and desktop views:

Generate a responsive AI tool landing page layout with Bootstrap 5 featuring the following sections:
- Navigation Bar: Links to other sections of the page.
- Hero Section: A heading, subheading, and a compelling call-to-action button.
- About Section: Introduces the company or product.
- Features Section: Highlights key features and benefits.
- How It Works Section: Explains the process or flow.
- Pricing Section: Showcases pricing plans or offers.
- FAQ Section: Answers common questions and concerns.
- Contact Section: Provides contact details or an inquiry form.
- Footer Section: Includes copyright and additional links.

This structure ensures a logical flow, starting with an engaging Hero Section, followed by deeper insights into the product (Features, How It Works), and finishing with clear calls to action (Pricing, FAQ, and Contact).

Code Example

You can access all the code for this landing page by cloning or downloading the repository:

Repository Link

For the complete code, including the full layout template, visit the full-prompt-landing-page.html file in the repository directly:

Full Code File

2. Creating a Section-by-Section Landing Page

Building a landing page section by section allows you to focus on each component individually, ensuring precise control over design and functionality.

By structuring your page into distinct sections (such as the hero, features, pricing, and so on), you can tailor the content and style of each part, ensuring that it aligns with your branding and conversion goals.

This method provides greater flexibility and customization, especially when using AI-powered tools like Context7 MCP, as it allows you to generate each section according to specific requirements and design preferences.

Create a Header and Hero Section with AI Prompt

The Header and Hero Section are essential for setting the tone of your landing page. The hero section grabs visitors' attention immediately and introduces them to the key value proposition of your AI tool. The header ensures smooth navigation across the page.

Prompt Example:

"Design a full-width hero section with a striking background image or color that highlights the AI tool. Include a compelling tagline that clearly communicates the main benefit of the tool, along with a call-to-action (CTA) button prompting users to 'Get Started' or 'Learn More.' Additionally, create a clean, responsive header section with a navigation bar containing links to: Home, About, Features, Pricing, FAQ, and Contact."

AI Output:

Customizing the Style:

To further customize the style, you can adjust the background, font, and button classes either through the prompt or by manually editing the class names in the generated code. With MCP, you can also tweak colors and typography to better align with your brand's design guidelines.

Create an Engaging About Section with AI Prompt

The About section serves as an introduction to your AI tool, explaining its purpose, key features, and how it benefits users. It should establish trust and clearly communicate what makes your tool unique.

Prompt Example:

"Design an 'About' section with a brief overview of the AI tool. Include a short paragraph explaining the tool’s core features, its purpose, and how it stands out from competitors. Add an image or icon to visually complement the text."

AI Output:

Customizing the Style:

You can adjust the background, typography, and button classes to fit your brand's aesthetic. Modify the content to better highlight the unique selling points of your AI tool, ensuring that it resonates with your target audience.

Showcase Key Features with AI Prompt

The Features section is essential for highlighting the core benefits and capabilities of your AI tool. It helps users understand exactly what the tool offers and how it can improve their workflow or solve their problems.

Prompt Example:

"Design a Features section that lists the key features of the AI tool in a visually engaging manner. Include icons or images to represent each feature and provide short, clear descriptions of how each feature benefits the user. Ensure the section is easy to scan and encourages users to explore more."

AI Output:

Customizing the Style:

You can easily adjust the icons, typography, and layout using the prompt or by editing the class names in the generated markup. Consider using your brand’s icons or color palette to make the section more visually aligned with your brand identity. You can also tweak the descriptions to focus on the features most important to your target audience.

Present Pricing Plans with AI Prompt

The Pricing section is crucial for converting visitors into customers. It should clearly display the available pricing options, highlighting the value of each plan and encouraging users to take action. This section should be simple, yet persuasive, and easy to understand.

Prompt Example:

"Design a Pricing section that clearly presents different pricing tiers. Include the plan names, prices, key features, and a clear call-to-action (CTA) button for each plan. Use a comparison table or card layout to make it easy for users to compare options and make an informed decision."

AI Output:

Customizing the Style:

To tailor the Pricing section to your brand, you can adjust the colors, fonts, and card styles. You can customize the pricing plans to fit your offering, modify the CTA buttons to highlight specific actions (for example, “Start Free Trial” or “Learn More”), and adjust the layout for different screen sizes.

Create an Informative FAQ Section with AI Prompt

The FAQ section is key to addressing common questions and concerns from potential users, helping them make informed decisions. It should be organized, easy to scan, and provide clear, concise answers. This section can also reduce customer support inquiries by offering quick solutions.

Prompt Example:

"Design a FAQ section that addresses common questions about the AI tool. Use an accordion or collapsible design for better readability, and ensure the answers are concise and informative. Include a clear, inviting heading for the section and format the questions in a way that’s easy to scan."

AI Output:

Customizing the Style:

You can personalize the FAQ section by adjusting the accordion style, colors, and fonts to match your brand’s theme. You can also modify the questions and answers based on the most common inquiries from your users. For a more dynamic effect, consider adding icons or images next to the questions.

Create an Engaging Contact Section with AI Prompt

The Contact section is essential for encouraging visitors to reach out for more information, support, or inquiries. It should be clear, easy to use, and include all necessary contact details, as well as a form for quick communication.

Prompt Example:

"Design a Contact section that includes a contact form with fields for name, email, subject, and message. Ensure the form is simple, easy to fill out, and includes a submit button. Also, provide clear contact details, such as a phone number, email address, and physical location (if applicable)."

AI Output:

Customizing the Style:

To align the Contact section with your brand’s design, you can modify the colors, fonts, and form styles. Adjust the form fields, buttons, and layout to match the look and feel of your website.

Additionally, you can add custom map integration or contact methods (like social media handles) to further enhance accessibility.

Create a Comprehensive Footer Section with AI Prompt

The Footer section is often the last thing users see on a page, so it’s essential to include important links, contact details, and legal information. A well-designed footer can help improve site navigation and encourage further engagement with your content.

Prompt Example:

"Design a Footer section that includes key navigation links, such as Privacy Policy, Terms of Service, and social media icons (for example, Facebook, Twitter, LinkedIn). Include your company’s contact details (email, phone) and a copyright notice. The footer should be responsive and neatly organized."

AI Output:

Customizing the Style:

To match your brand’s aesthetics, you can adjust the Footer section’s background color, typography, and icon styles. You can also add additional links like your blog, careers page, or a newsletter signup form. Ensure the footer is responsive by checking it on different screen sizes, making adjustments to spacing or layout as needed.

Conclusion

In this tutorial, we’ve demonstrated how to create a modern, responsive landing page using Bootstrap 5 and integrate Context7 MCP. We also explored different methods for building the landing page, either using a single comprehensive prompt or constructing it section by section.

While a single comprehensive prompt can generate a landing page quickly, building it section by section typically yields better results. This approach allows for greater customization, finer control over each element, and ensures that every section aligns with your overall design vision.

By leveraging Bootstrap 5’s robust grid system and Context7’s AI-driven component generation, you can easily create landing pages that are not only visually appealing but also responsive and functional across all devices. This combination of tools makes the process faster, more efficient, and scalable.

You can also consider using a ready made bootstrap template which comes with pre designed landing pages.

With this setup, you can expect:

Rather than requiring developers to manually write repetitive code for common components, such as navigation bars, feature cards, or grids, VS Code and Context7 automates this process, allowing you to focus on higher-level design decisions.

It also ensures that the generated code is fully responsive and in alignment with latest Bootstrap 5’s framework, providing seamless integration with Bootstrap’s utilities like spacing, alignment, and visibility.

I hope you find this article helpful and worth reading. I have prepared this article with help of Smit Bhalodiya, a Front End developer with 5+ years of experience in the field.

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)

<!DOCTYPE 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 <head>

<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 <body> 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 </body> 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.

Why Test the Modal?

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.

How to Test the Modal

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 modal</button>

<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 Title</h3>
        <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">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </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.

Google Authentication is among the most trusted and convenient ways for users to log into a site using their Google account. And it means that they don’t have to remember yet another username and password.

Integrating Google OAuth into your Laravel application simplifies the login process, encourages user engagement, and boosts the credibility of your platform. In this tutorial, I’ll guide you through the steps of implementing Google Authentication in a Laravel application. We’ll go from setting up the Google API credentials to configuring Laravel’s Socialite package.

Table of Contents

• Prerequisites

• Benefits of Using Google Auth in a Laravel App

• How to Set Up Laravel Google Login

• Conclusion

Prerequisites

Before you begin, make sure you have the following prerequisites:

1. Laravel 11

2. A Google Developer account.

3. Basic knowledge of Laravel and authentication.

4. Composer for managing packages

Once you have these prerequisites ready, you’re all set to dive into integrating Google Authentication into your Laravel app.

Benefits of Using Google Auth in a Laravel App

There are many benefits to this set up. A few of them are:

• Simplified integration with Socialite

• Seamless user authentication

• Improved security

• Customizable user flow

• Improved scalability

• Solid ecosystem support

• Easier maintenance

How to Set Up Laravel Google Login

Whether you’re working on a personal project or a production-ready application, following these steps will help you smoothly integrate Google Authentication. Let’s get started.

Step 1: Set up a Google Cloud project

To use Google Authentication in your Laravel application, first you need to configure a Google Cloud project. Follow these steps to set up your project:

1. Visit the Google Cloud console and log in with your Google account.

   

2. Click on the “Select a Project” dropdown in the top navigation bar. In the popup, click on “New Project” to create a new project and provide the requested details. Then click on Create project.

   

3. Once you create the project, open the console’s left side menu and select APIs & Services > Credentials.

   

4. On the Credentials page, click Create Credentials > OAuth Client ID.

   

5. If this is your first time creating a client ID, it will ask you to configure the consent screen. You can configure your consent screen by clicking Configure Consent Screen. If you have already configured the consent screen, you can skip this step.

   • Select External if your app is for public use, or Internal if it’s limited to users within your Google Workspace organization.

     

   • Fill out the required details, like the app name, user support email, and any branding information. Click Save and Continue.

     

After configuring the consent screen, return to the Credentials page and select OAuth Client ID again.

6. Choose the Application Type as Web Application and provide a name for client credentials (for example, Laravel Social Login).

7. Under Authorized Redirect URIs, add the callback URL for your application:

   • Example: http://your-app-url.com/callback/google

   • If you're testing locally, use: http://127.0.0.1:8000/api/auth/google/callback

     

8. Click on Create, and Google will generate a Client ID and Client Secret for your project. Save these credentials, as they will be required in the next steps.

Step 2: Create a new Laravel project and Install the Laravel Socialite package

If you don’t have one ready, you can create a new Laravel project using the below command:

composer create-project --prefer-dist laravel/laravel social-auth-example

To integrate Google Authentication into a Laravel project, we’ll use Laravel Socialite. Socialite is a first-party Laravel package that simplifies OAuth authentication with popular services like Google, Facebook, Twitter, and more.

To install Socialite, open your terminal in the root directory of your Laravel project and run the following command:

composer require laravel/socialite

Step 3: Configure environment variables

In this step, we will configure our Laravel application to use the Google OAuth credentials that we collected in Step 1.

Locate your .env file in the root directory of your project and add the following environment variables:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URL=http://your-domain.com/auth/google/callback

Go ahead and replace all placeholders with secrets.

Let's understand each environment variable one by one:

• GOOGLE_CLIENT_ID: A unique identifier for your app, provided by Google.

• GOOGLE_CLIENT_SECRET: A private key used by your app to authenticate itself securely with Google’s API.

• GOOGLE_REDIRECT_URL: The URL where Google redirects users after they log in. This should match the redirect URI you specified when creating the credentials in Step 1.

Step 4: Update the config files

To enable Laravel Socialite to use Google OAuth credentials, we need to configure the provider details in the config/services.php file.

In the services.php file, add the following configuration for the Google provider:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // Your Google Client ID
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // Your Google Client Secret
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // Your Google Redirect URL
]

Step 5: Create controllers and routes for authentication.

In this step, we will create a controller to handle Google OAuth redirection and callbacks and set up the necessary routes to trigger these methods.

Run the following Artisan command to generate the GoogleAuthController controller:

php artisan make:controller GoogleAuthController

This will create a controller at app/Http/Controllers/GoogleAuthController.php.

Replace the contents of the newly created GoogleAuthController.php with the following code:

<?php

namespace App\\Http\\Controllers;

use App\\Http\\Controllers\\Controller;
use App\\Models\\User;
use Laravel\\Socialite\\Facades\\Socialite;
use Illuminate\\Support\\Facades\\Auth;
use Illuminate\\Support\\Str;
use Throwable;

class GoogleAuthController extends Controller
{
    /**
     * Redirect the user to Google’s OAuth page.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Handle the callback from Google.
     */
    public function callback()
    {
        try {
            // Get the user information from Google
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // Check if the user already exists in the database
        $existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // Log the user in if they already exist
            Auth::login($existingUser);
        } else {
            // Otherwise, create a new user and log them in
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // Set a random password
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // Redirect the user to the dashboard or any other secure page
        return redirect('/dashboard');
    }
}

This controller contains two functions:

1. Redirect: Redirects the user to Google’s OAuth Page.

2. Callback: Handles the callback from Google and redirects the user to the dashboard or any other secure page.

Let’s define the routes of redirect and callback in the routes/web.php file:

use App\\Http\\Controllers\\GoogleAuthController;

// Route to redirect to Google's OAuth page
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// Route to handle the callback from Google
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');

Step 6: Test Laravel Google authentication in your project.

We’ve set up Google authentication, so now it’s time to test it to make sure it works seamlessly. In this step, we’ll use a login button that redirects the user to Google’s authentication page and returns them to a protected route upon successful login.

First, we will add the following button that gives users the option to Login With Google:

<a href="{{ route('auth.google.redirect') }}" class="btn bg-blue-100 p-3 shadow-sm border rounded-md text-blue-900">
    Login with Google 
</a>

For testing purposes, I have defined a protected route and a dashboard. This route will only be accessible to authenticated users. After logging in, we will redirect users to this page. Let’s define this route in web.php:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware('auth')->name('dashboard');

Next, create a blade view file for the dashboard at resources/views/dashboard.blade.php. Here’s the contents of the dashboard:

<html>
    <head>
        <title>Dashboard</title>
    </head>

    <body>
        <h1>Dashboard</h1>
        <p>Welcome to the dashboard, {{ auth()->user()->name }}!</p>
    </body>

</html>

Here, we’re using the auth()->user() helper to display the logged-in user’s name, which is fetched from the Google account they used to sign in.

Now, Let’s try to log in.

This is the login page:

Clicking on the button will redirect you to Google’s consent screen:

Click on the continue, and you should be logged in to the app. You will be redirected to a screen like below. You can see the welcome message with the user’s name.

That’s it! You’ve successfully implemented and tested Google Authentication in your Laravel project. Now your users can sign in using their Google accounts, enhancing both security and convenience.

To refer to the full implementation, you can find the complete source code for this project on GitHub here: Google Login Integration for Laravel - GitHub Repository

Conclusion

You’ve now set up Google authentication in your Laravel application using Socialite! You can extend this method to include other OAuth providers like Facebook, Twitter, or GitHub by adding additional configurations to the config/services.php file.

Google OAuth integration is a common feature for modern web applications, and Laravel Socialite makes it easy to implement.

In case you need more social login options like GitHub, Twitter, and Facebook, then you can consider ready-to-use Laravel SaaS boilerplates.

Most of the pre-built Laravel SaaS boilerplates offer seamless integration with popular platforms such as Google, GitHub, Facebook, and Twitter. For example, there are some premium and open source resources like:

• Laravel Starter Kit (Premium)

  • Based on Tailwind CSS

  • Comes with One Click Magic Link Setup

  • Supports various authentication methods including the traditional email/password login

  • 2FA Authentication

• SaaS Boilerplate (Open Source)

  • Single Database Multi-tenancy

  • Developer Panel

  • Manage Personal Access Tokens

• Laranuxt (Open Source)

  • Nuxt UI a collection of components built by the NuxtJS team, powered by Tailwind CSS

  • Authentication library to assist with user sessions and logging in/out

  • Example Authentication Middleware

• Laravel Vue Boilerplate (Open Source)

  • WebSockets with Laravel Echo and Pusher.

  • Workbox for better PWA development.

  • Laravel GraphQL

Using one of these Laravel SaaS boilerplates can speed up your workflows as you don’t need to set up everything from scratch.

Special thanks to Deep Kumbhare, an experienced Laravel Developer and enthusiast, who has helped me with preparing this article.

I hope this article helps you with setting up Google Login with Laravel.

This article will explain why Django and Tailwind CSS work well together, how to start a Django project, how to easily add Tailwind CSS, and how to speed up your development with Prettier for better class formatting.

Table of Contents

• A Quick Overview of Django

• What is Tailwind CSS?

• Why Django and Tailwind Work So Well Together?

• How to Initialize a Django Project?

• How to Integrate Tailwind CSS with Django?

• Let’s Create a Chat Bubble app.

• How to Use Prettier for Class Formatting?

• How to Create a Chat Bubble Using FlyonUI Tailwind Components and Django

• Conclusion

A Quick Overview of Django

Django is an open-source, full-featured Python web framework that follows the batteries-included approach. Django aims at making the development of complex, database-driven websites as fast and easy as possible by providing a lot of built-in functionalities like ORM, authentication system, admin panel, and many more. Django enables rapid development by focusing on writing the app's unique parts rather than wasting time writing a lot of boilerplate code.

The reason for its popularity is that it follows the MVT design pattern which keeps data models, views, and templates well separated. In Django, security is paramount: it guards against SQL injection, cross-site scripting, and cross-site request forgery out of the box. Django scales well and is flexible – it is fit for both small projects and large, complex web applications, and that is why it is used by major sites such as Instagram and Pinterest.

What is Tailwind CSS?

It is a well-known fact that Tailwind CSS is a utility-first CSS framework. It lets you style elements directly within your HTML, thanks to pre-defined classes. Unlike other CSS frameworks that offer pre-built components, Tailwind offers these low-level utility classes that let you create your own design system. Thus, this makes crafting unique responsive designs effortless as there is not much to do with custom CSS.

Why Django and Tailwind Work So Well Together?

The combination of Django and Tailwind CSS offers a seamless way to build robust, full-featured applications. Here’s why:

• Rapid Development: Django’s backend capabilities allow developers to create powerful applications quickly, while Tailwind CSS helps streamline the styling process with its utility-first approach.

• Customizable Design: With Tailwind, you’re not confined to predefined styles. You can craft a unique, consistent design that scales easily as your project grows.

• Separation of Concerns: Django’s templating system works hand-in-hand with Tailwind CSS, ensuring a clear separation between the backend logic and frontend styling.

How to Initialize a Django Project?

1. Install Django: Install Django using pip:

    pip install django
   

2. Create a Django Project: Use the Django admin command to create a new project:

    django-admin startproject myproject
   

3. Navigate to Your Project Directory:

    cd myproject
   

4. Modify settings.py:

   • In the TEMPLATES setting, add a templates directory:

       "DIRS": [BASE_DIR / "templates"],
     

   • Add a static directory for your static files:

       STATICFILES_DIRS = [BASE_DIR / "static"]
     

How to Integrate Tailwind CSS with Django?

1. Install Tailwind CSS: Make sure Node.js is installed, then run:

    npm install -D tailwindcss
    npx tailwindcss init
   

2. Set Up Tailwind CSS: In your static/css directory, create a main.css file with the following content:

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

3. Modify tailwind.config.js: Adjust the content section to include templates/*.html files, ensuring Tailwind CSS generates the necessary styles.

    /** @type {import('tailwindcss').Config} */
    module.exports = {
        content: ["./templates/**/*.html", "./**/templates/**/*.html"],
        darkMode: "media",
        theme: {
            extend: {},
        },
        plugins: [],
    };
   

4. Add a Build Script: Update your package.json to include a build script:

    "scripts": {  "watch:css": "tailwindcss build static/css/main.css -o static/output.css -w"}
   

5. Compile Tailwind CSS:

    npm run watch:css
   

Let’s Create a Chat Bubble app.

1. Create a Django App:

    django-admin startapp chat
   

2. Set Up the Views:

   • In chat/views.py, create a simple view:

       from django.shortcuts import render
       def chat(request):
           return render(request, "chat.html")
     

3. Configure URLs:

   • In chat/urls.py, define the URL pattern for your view:

       from django.urls import path
       from . import views
       urlpatterns = [
           path("", views.chat, name="chat"),
       ]
     

   • In the project’s urls.py, include the app URLs:

       from django.urls import include, path
       urlpatterns = [
           path("", include("chat.urls")),
       ]
     

4. Set Up the Base HTML Template:

   • Create a templates/base.html file to serve as the foundation of your application:

       {% load static %}
     
       <!doctype html>
       <html lang="en">
         <head>
           <meta charset="UTF-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <title>My Django App with Tailwind</title>
           <link rel="stylesheet" href="{% static 'css/output.css' %}" />
         </head>
     
         <body class="h-screen bg-slate-300 dark:bg-slate-400">
           <section class="container mx-auto flex flex-col items-center">
             <h1 class="mb-4 mt-10 text-6xl font-bold text-blue-500 dark:text-blue-200" >
               Chat Bubble
             </h1>
             {% block content %} {% endblock %}
           </section>
         </body>
       </html>
     

5. Create the Chat Template:

   • In templates/chat.html, extend the base template:

    {% extends "base.html" %}

    {% block content %}
    <div class="flex items-start gap-2.5">
        <img class="w-8 h-8 rounded-full" src="<https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png>" alt="Jhon  image">
        <div class="flex flex-col gap-1 w-full max-w-[320px]">
            <div class="flex items-center space-x-2 rtl:space-x-reverse">
                <span class="text-sm font-semibold text-gray-900 dark:text-white">Jhon Doe</span>
                <span class="text-sm font-normal text-gray-500 dark:text-gray-400">11:46</span>
            </div>
            <div
                class="flex flex-col leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
                <p class="text-sm font-normal text-gray-900 dark:text-white"> That's awesome. I think our users will really
                    appreciate the improvements.</p>
            </div>
            <span class="text-sm font-normal text-gray-500 dark:text-gray-400">Delivered</span>
        </div>
    </div>
    {% endblock %}

6. Run the Development Server: bash python manage.py runserver

How to Use Prettier for Class Formatting?

To keep your Tailwind CSS classes clean and organized, you can integrate Prettier into your workflow.

1. Install Prettier and the Tailwind Plugin:

    npm install --save-dev prettier prettier-plugin-tailwindcss
   

2. Configure Prettier: Create a .prettierrc file in your project root:

    {  "plugins": ["prettier-plugin-tailwindcss"]}
   

3. Format on Save: Set up your code editor to format files automatically with Prettier on save.

Result:

GitHub Repo: ts-django-tailwindcss

How to Create a Chat Bubble Using FlyonUI Tailwind Components and Django

Here, we’ll use FlyonUI, an open-source Tailwind CSS Components Library. It offers a wide range of customizable, accessible, and ready-to-use components.

Let’s integrate Django with FlyonUI components and create a chat bubble.

Step 1: Install flyonui

Install flyonui via npm.

npm install -D flyonui@latest

Step 2: Configure Tailwind

Add the path to FlyonUI JavaScript files in your tailwind.config.js file.

module.exports = {
  content: ["./node_modules/flyonui/dist/js/*.js"], // Require only if you want to use FlyonUI JS component

  plugins: [
    require("flyonui"),
    require("flyonui/plugin") // Require only if you want to use FlyonUI JS component
  ]
}

Step 3: Copy the FlyonUI JavaScript

Copy FlyonUI's JavaScript (node_modules/flyonui/flyonui.js) files to the static/ folder.

Step 4: Add Js to your base.html

Once you copied the js file to your static folder include it in base.html.

<html lang="en">
 ...
 <body>
  ...
  <script src="{% static 'js/flyonui.js' %}"></script>
 </body>
</html>

Let's Update the Chat bubble code block:

{% extends "base.html" %}
{% block content %}
<div>
  <div class="chat chat-receiver">
    <div class="avatar chat-avatar">
      <div class="size-10 rounded-full">
        <img
          src="<https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png>"
          alt="avatar"
        />
      </div>
    </div>
    <div class="chat-header text-base-content/90">
      Obi-Wan Kenobi
      <time class="text-base-content/50">12:45</time>
    </div>
    <div class="chat-bubble">I started learning guitar today!</div>
    <div class="chat-footer text-base-content/50">
      <div>Delivered</div>
    </div>
  </div>
  <div class="chat chat-sender">
    <div class="avatar chat-avatar">
      <div class="size-10 rounded-full">
        <img
          src="<https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png>"
          alt="avatar"
        />
      </div>
    </div>
    <div class="chat-header text-base-content/90">
      Anakin
      <time class="text-base-content/50">12:46</time>
    </div>
    <div class="chat-bubble">
      That's awesome! You're going to be great at it!
    </div>
    <div class="chat-footer text-base-content/50">
      Seen
      <span class="icon-[tabler--checks] align-bottom text-success"></span>
    </div>
  </div>
</div>
{% endblock %}

Result:

Conclusion

Using Tailwind CSS with Django is a great way to make your web applications look good and work well on different devices, while you take advantage of Django's many features. This setup not only boosts productivity but also helps you follow good styling and design practices.

Here's the repository where you can find more details or see the complete code: ts-django-tailwindcss. I hope this tutorial helps you with the Django integration with Tailwind CSS. I have prepared this article with the help of Pruthvi Prajapati, a front-end developer with 2 years of experience.

Happy coding!

Whether you're a seasoned developer or just starting out, this step-by-step tutorial will help you understand the fundamentals of integrating MSW into your Vue project, enabling you to build and test your application more effectively without relying on a real backend.

Let's dive in and bring your e-commerce vision to life!

Table of Contents

• What is a Mock Server?
• How to Set Up a Vue E-commerce App
• Getting Started With Vue E-commerce App
• How to Build an E-commerce App Using Vue 3
• How to Build the User Interface
• Conclusion

In this article, we'll walk through the process of building an e-commerce app from scratch using Vue.js and the power of MSW for mocking API calls.

Before we start with the project, let’s take an overview of the e-commerce pages that we are going to build for the app. It'll have mainly two pages:

• Shop page.
• Product details page.

Shop page: This page will display all the products of the store.

Mock-up created using Pika Style

Product details page: This page displays all the details regarding the product.

Before building an e-commerce app, let’s clarify some basics about the mock server.

What is a Mock Server?

A mock server simply mimics a real server by providing predefined responses for an API request. A mock server is useful for testing and development as it can generate different test cases without risking the integrity of real data. You can configure a mock server to return specific responses, error messages and timeouts.

There are various tools/libraries out there that you can use to set up a mock server. In this article, we will use MSW (Mock Service Worker) to set up a mock server. You can learn more about MSW from its official documentation.

Now, let’s set up a mock server (using MSW) for our Vue e-commerce app.

How to Set Up a Vue E-commerce App

For our e-commerce app, we'll need two API endpoints. Below is a brief description of API endpoints.

1. /api/apps/ecommerce/products: This will fetch the data of all products we have in store.
2. /api/apps/ecommerce/product/:id: This will fetch the product details of a specific product by its ID.

We'll use a free Vue admin dashboard that offers essential features such as:

• Beautifully crafted components
• Auto import capabilities
• Premade layout, and so on.

These features will make it easier and faster to develop the Vue e-commerce app.

Getting Started With Vue E-commerce App

There are plenty of Vue.js themes available that you can consider for creating an e-commerce app.

Here, we'll use the Materio Vue.js admin free template. First, go to the GitHub repo.

To clone it, simply open your terminal. Navigate to the directory where you would like to clone the project and run the following command:

git clone <https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free.git>

Open the project in your favorite IDE and run the command below in the terminal to install all the dependencies.

We'll use the pnpm package manager as recommended by the dashboard we're using. However, you are free to use your preferred package manager like npm or yarn.

pnpm install
# npm install
# yarn

Next, install MSW in your project directory:

pnpm add -D msw@latest
# npm install msw@latest --save-dev
# yarn install -D msw@latest

Run the theme using the following command:

pnpm run dev
# npm run dev
# yarn run dev

Next, initialize MSW using the command below. Running this command will create a mockServiceWorker.js file in a public directory.

npx msw init public

To manage all API endpoints and fake data, create a new folder called fake-server inside the plugins directory. We’ll set up our mock server in this fake-server directory. Create an index.ts file and paste the below code to register MSW.

// file: src/plugins/fake-server/index.ts

import { setupWorker } from 'msw/browser'

const worker = setupWorker()

export default function () {
  const workerUrl = `${import.meta.env.BASE_URL ?? '/'}mockServiceWorker.js`

  worker.start({
    serviceWorker: {
      url: workerUrl,
    },
    onUnhandledRequest: 'bypass',
  })
}

Congratulations, you have now successfully set up MSW in the project. Now, we can start building an e-commerce app.

How to Build an E-commerce App Using Vue 3

In the fake-server directory, create a handlers directory for maintaining handlers. Inside the handlers directory, create an ecommerce directory for the e-commerce app’s handlers. Then, create a db.ts file inside ecommerce to store the fake data.

Your folder structure should look like this:

.
└── fake-server/
    └── handlers/
        └── ecommerce/
            └── db.ts

I have generated some fake data for displaying products. Let’s place this fake data in db.ts:

// file: src/plugins/fake-server/handlers/ecommerce/db.ts

import product5 from '@images/eCommerce/1.png'
import product3 from '@images/eCommerce/11.png'
import product6 from '@images/eCommerce/18.png'
import product1 from '@images/eCommerce/27.png'
import product4 from '@images/eCommerce/5.png'
import product2 from '@images/eCommerce/7.png'

export const db = {
  products: [
    {
      id: 1,
      productName: 'Gaming Mouse',
      category: 'Electronics',
      price: '$999',
      image: product1,
      rating: 5,
      productDescription: 'A mouse specifically designed for gamers.',
    },
    {
      id: 2,
      productName: 'Google Home',
      category: 'Electronics',
      price: '$25.50',
      image: product2,
      rating: 4,
      productDescription: 'A Smart speaker with Google Assistant.',
    },
    {
      id: 3,
      productName: 'INZCOU Running Shoes',
      category: 'Shoes',
      price: '$36.98',
      image: product3,
      rating: 5,
      productDescription: 'Lightweight Tennis Shoes Non Slip Gym Workout Shoes',
    },
    {
      id: 4,
      productName: 'MacBook Pro 16',
      category: 'Electronics',
      price: '$2648.95',
      image: product4,
      rating: 5,
      productDescription: 'Laptop M2 Pro chip with 12‑core CPU and 19‑core GPU',
    },
    {
      id: 5,
      productName: 'Apple Watch Series 7',
      category: 'Office',
      price: '$799',
      image: product5,
      rating: 5,
      productDescription: 'Starlight Aluminum Case with Starlight Sport Band.',
    },
    {
      id: 6,
      productName: 'Meta Quest 2',
      category: 'Office',
      price: '$299',
      image: product6,
      rating: 5,
      productDescription: 'Advanced All-In-One Virtual Reality Headset',
    },
  ],
}

As discussed in this app structure, we need to define two endpoints. Create an index.ts file in your e-commerce handler and define your endpoints in it:

// file: src/plugins/fake-server/handlers/ecommerce/index.ts

import { HttpResponse, http } from 'msw'
import { db } from './db'

export const handlerEcommerce = [
  http.get('/api/ecommerce/products', () => {
    const products = db.products

    return HttpResponse.json(products, { status: 200 })
  }),

  http.get('/api/ecommerce/products/:id', ({ params }) => {
    const id = Number(params.id)

    const product = db.products.find(item => item.id === id)

    if (!product)
      return HttpResponse.error()

    return HttpResponse.json(product, { status: 200 })
  }),
]

Register the handler in the index.ts file in the fake-server direrctory. The updated index.ts file should look like this:

// file: src/plugins/fake-server/index.ts

import { setupWorker } from 'msw/browser'

import { handlerEcommerce } from './handlers/ecommerce'

const worker = setupWorker(...handlerEcommerce)

export default function () {
  const workerUrl = `${import.meta.env.BASE_URL ?? '/'}mockServiceWorker.js`

  worker.start({
    serviceWorker: {
      url: workerUrl,
    },
    onUnhandledRequest: 'bypass',
  })
}

The setup of the mock server has been completed. Whenever you make an API call to your endpoint, MSW will intercept the HTTP request using the service worker and will provide a predefined response from the handlers.

Congratulations, you have successfully set up the mock server👍.🏻

How to Build the User Interface

Let's move on to the UI part of the e-commerce app. Create an apps directory in the pages directory. Inside apps, create a new directory called ecommerce. We'll place the e-commerce app in this directory.

The folder structure should look like this:

.
└── pages/
    └── apps/
        └── ecommerce

The first page is a product listing page. Create a new directory of products inside ecommerce. Create an index.vue file in the products directory and paste the following code snippet:

// file: src/pages/apps/ecommerce/products/index.vue

<script setup lang="ts">
const router = useRouter()
const { data: products } = await useFetch('/api/ecommerce/products').json()
</script>

<template>
  <div>
    <div class="d-flex flex-wrap gap-6 justify-center">
      <template
        v-for="(product, index) in products"
        :key="index"
      >
        <VCard width="300">
          <VImg
            :src="product.image"
            cover
          />
          <VCardItem>
            <VCardTitle>{{ product.productName }}</VCardTitle>
            <VCardSubtitle>Price: {{ product.price }}</VCardSubtitle>
          </VCardItem>
          <VCardText>
            <p class="mb-0">
              {{ product.productDescription }}
            </p>
            <VRating
              :model-value="product.rating"
              readonly
              density="compact"
              class="my-3"
            />
            <VBtn
              block
              @click="() => router.push({ path: `/apps/ecommerce/products/${product.id}` })"
            >
              Buy Now
            </VBtn>
          </VCardText>
        </VCard>
      </template>
    </div>
  </div>
</template>

In this product listing page, we made an API call to the '/api/ecommerce/products' endpoint. This endpoint returns the array of all products. We'll use this data to display products on the page.

The second page in this app is the product display page. On this page, we'll display all the details of the product. To do so, create a new file [id].vue inside the products directory. Below is the code for the product details page.

Note that I have used Lorem ipsum to keep it generic. You can replace it with your desired description.

// file: src/pages/apps/ecommerce/products/[id].vue

<script setup lang="ts">
const route = useRoute()
const router = useRouter()

const { data: product } = await useFetch(`/api/ecommerce/products/${route.params.id}`).json()
const quantity = ref(0)
</script>

<template>
  <VCard class="pa-10">
    <VRow>
      <VCol
        md="4"
        cols="12"
      >
        <div class="py-10 bg-background d-flex justify-center">
          <VImg
            :src="product.image"
            width="auto"
            max-height="40vh"
          />
        </div>
      </VCol>

      <VCol
        md="8"
        cols="12"
      >
        <div>
          <div class="text-h3 mb-4">
            {{ product.productName }}
          </div>

          <div class="text-h4 mb-4">
            {{ product.price }}
          </div>

          <div>
            <p>
              {{ product.productDescription }}
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor eum quam dolore ratione aspernatur nobis. Assumenda dicta voluptatibus reiciendis repudiandae?
            </p>
            <VRating
              :model-value="product.rating"
              readonly
              density="compact"
              class="mb-2 d-block"
            />

            <VList>
              <VListItem>
                <template #prepend>
                  <VIcon
                    icon="ri-circle-fill"
                    size="10"
                  />
                </template>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, deserunt!
              </VListItem>
              <VListItem>
                <template #prepend>
                  <VIcon
                    icon="ri-circle-fill"
                    size="10"
                  />
                </template>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, deserunt!
              </VListItem>
              <VListItem>
                <template #prepend>
                  <VIcon
                    icon="ri-circle-fill"
                    size="10"
                  />
                </template>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, deserunt!
              </VListItem>
              <VListItem>
                <template #prepend>
                  <VIcon
                    icon="ri-circle-fill"
                    size="10"
                  />
                </template>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, deserunt!
              </VListItem>
            </VList>

            <VBtn
              prepend-icon="ri-shopping-cart-line"
              class="text-center"
              size="large"
              @click="quantity += 1"
            >
              Add to Cart
            </VBtn>
          </div>
        </div>
      </VCol>
    </VRow>
  </VCard>
  <div class="text-center">
    <VBtn
      class="my-6 text-center"
      @click="() => router.push({ path: '/apps/ecommerce/products' })"
    >
      Continue Shopping
    </VBtn>
  </div>
</template>

On this page, we made an API request to our second API endpoint: /api/ecommerce/products/:id. This endpoint returns product details related to a given product ID. We will use this data on our page to display product details.

Let’s add routes for the e-commerce app. All the routes are located in the src/plugins/router/routes.ts file. In the file, add the e-commerce app’s routes.

// file: src/plugins/router/routes.ts
{
  path: '/apps/ecommerce/products',
  component: () => import('@/pages/apps/ecommerce/products/index.vue'),
},
{
  name: 'apps-ecommerce-products-id',
  path: '/apps/ecommerce/products/:id',
  component: () => import('@/pages/apps/ecommerce/products/[id].vue'),
},

Now, let’s add an e-commerce app to our navigation menu. We'll list all our menu items and groups in NavItems.vue components. We'll use a VerticalNavGroup component for adding a nav group and a VerticleNavLink component for adding a nav item. For adding an e-commerce app in the navigation menu, add the code below in the Apps & Pages section.

//file: src/layouts/components/NavItems.vue

<VerticalNavGroup
    :item="{
      title: 'e-commerce',
      icon: 'ri-shopping-cart-line',
    }"
  >
    <VerticalNavLink
      :item="{
        title: 'Shop',
        to: '/apps/ecommerce/products',
      }"
    />
    <VerticalNavLink
      :item="{
        title: 'Product',
        to: { name: 'apps-ecommerce-products-id', params: { id: 1 } },
      }"
    />
</VerticalNavGroup>

Congrats, you’ve built a Vue e-commerce app using Vue.js and MSW. You can visit the dev server to see the e-commerce app we just crafted.

Conclusion

In this article, you built an e-commerce app using Vue.js and MSW to mock API calls. We created two main pages: the shop page to display products and the product details page to show product information.

The mock server setup helped us to create a realistic development environment without building an actual backend. At the end of this guide, you had a working e-commerce app prototype. This setup provides a strong foundation for further customization and development.

For the complete implementation of the e-commerce app built in this article, please refer to this GitHub repository: https://github.com/themeselection/e-commerce-app.

I hope you all find this article helpful. In case you want to develop a full-fledged e-commerce app, you can use the pre-built Vuejs admin template as it offers many components and features that can be helpful in creating a professional e-commerce app.

I have prepared this article with help of Jayendrasinh Solanki. He is an expert in VueJS with over 7 years of experience. BTW, he is followed by Vue creator Evan You! Isn't it great?

Some helpful guides for e-commerce product development:

• How to Develop a Reusable eCommerce Platform (freecodecamp.org).
• How to Create an eCommerce Website Using WooCommerce (freecodecamp.org).