DEV Community: Prashant Ardeshana

Top 10 best React component libraries in 2025

Prashant Ardeshana — Sat, 01 Feb 2025 08:33:13 +0000

As of 2025, the React ecosystem continues to thrive with a plethora of component libraries that enhance and expedite UI development. Here are ten of the most notable React component libraries to consider:

1. MUI (Material-UI)

Description: A comprehensive library implementing Google's Material Design principles, offering a rich set of components like buttons, cards, and modals.
Features: Highly customizable with a powerful theming system.
Website: mui.com

2. Chakra UI

Description: A modern, accessible, and flexible component library that uses a theme-aware style prop system.
Features: Built-in support for dark mode and a focus on developer experience.
Website: chakra-ui.com

3. Ant Design

Description: An enterprise-grade UI framework with a comprehensive set of high-quality components.
Features: Powerful form and table components, making it ideal for complex applications.
Website: ant.design

4. ShadCN/UI

Description: Based on Tailwind CSS and Radix UI, offering minimal, accessible, and highly customizable components.
Features: Great for building modern, aesthetic UIs with a focus on developer experience.
Website: shadcn/ui

5. React Bootstrap

Description: A React implementation of the popular Bootstrap framework, providing a familiar feel with React-friendly components.
Features: Seamless integration with Bootstrap's responsive grid system.
Website: react-bootstrap.github.io

6. Mantine

Description: A feature-rich UI framework with hooks and components focusing on developer experience and accessibility.
Features: A wide selection of components like modals, notifications, and tables.
Website: mantine.dev

7. NextUI

Description: Beautifully styled components optimized for Next.js, offering a lightweight and fast experience with server-side rendering support.
Features: Modern aesthetics with a focus on performance.
Website: nextui.org

8. Headless UI

Description: A Tailwind-based UI library with unstyled components, ideal for fully custom UI implementations.
Features: Works well with Next.js and other modern frameworks.
Website: headlessui.com

9. Radix UI

Description: Low-level, unstyled components with built-in accessibility, great for developers who want to style components their way.
Features: Provides a solid foundation for building custom-styled components.
Website: radix-ui.com

10. React Aria

Description: A set of accessible, low-level primitives from Adobe, providing robust accessibility features without styling.
Features: Ideal for developers prioritizing accessibility in their applications.
Website: react-spectrum.adobe.com/react-aria

These libraries offer a range of components and features to suit various project requirements, from design aesthetics to accessibility considerations.

#3 How to fetch the store details and print to the fronted using react Next.

Prashant Ardeshana — Sun, 13 Oct 2024 14:40:34 +0000

Set Up Local Environment Variables

Create a .env.local file in the root of your Next.js project to store your Shopify API credentials:

SHOPIFY_STORE_DOMAIN=your-shopify-store.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token

Replace your-shopify-store.myshopify.com with your Shopify store URL, and your-storefront-access-token with the Storefront API token.

Create `lib` Folder for the Fetching.

Create a lib folder in the root directory of your project.
Inside the lib folder, create a new file called store.js.

Add the following code to store.js:

// lib/shopify.js
export async function getStoreDetails() {
  const query = `
    {
      shop {
        name
        primaryDomain {
          url
        }
        paymentSettings {
          currencyCode
        }
      }
    }
  `;

  try {
    const response = await fetch(`https://${process.env.SHOPIFY_STORE_DOMAIN}/api/2024-04/graphql`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Storefront-Access-Token": process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN,
      },
      body: JSON.stringify({ query }),
    });

    const json = await response.json();

    if (json.errors) {
      console.error("GraphQL errors:", json.errors);
      return null; // Return null if there's an error
    }

    return json.data.shop; // Return shop data
  } catch (error) {
    console.error("Error fetching store details:", error);
    return null; // Handle fetch errors
  }
}

Displaying Store Details

Go to the app/pages.js file.

Add the following code to fetch and display the store details:

// app/page.js
import { getStoreDetails } from '../lib/store';

export default async function StoreDetailsPage() {
  // Fetch store details
  const storeDetails = await getStoreDetails();

  // If data fetching failed, handle it here
  if (!storeDetails) {
    return <div>Error fetching store details.</div>;
  }

  return (
    <>
      <main className="container mx-auto p-4">
        <p className='text-xl mb-4'>This is the home page.</p>
        <div>
          <h1 className='text-3xl font-bold'>Store Details</h1>
          <p><strong>Name:</strong> {storeDetails.name}</p>
          <p><strong>URL:</strong> <a href={storeDetails.primaryDomain.url}>{storeDetails.primaryDomain.url}</a></p>
          <p><strong>Currency:</strong> {storeDetails.paymentSettings.currencyCode}</p>
        </div>
      </main>
    </>
  );
}

That’s it! Your store details will now be displayed on the main page.

Output like this:

This is the home page.

Store Details

Name: my-store

URL: https://my-store.myshopify.com/

Currency: INR

#3 How to fetch the store details and print to the fronted using react Next.

Prashant Ardeshana — Sun, 13 Oct 2024 14:40:34 +0000

Set Up Local Environment Variables

Create a .env.local file in the root of your Next.js project to store your Shopify API credentials:

SHOPIFY_STORE_DOMAIN=your-shopify-store.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token

Replace your-shopify-store.myshopify.com with your Shopify store URL, and your-storefront-access-token with the Storefront API token.

Create `lib` Folder for the Fetching.

Create a lib folder in the root directory of your project.
Inside the lib folder, create a new file called store.js.

Add the following code to store.js:

// lib/shopify.js
export async function getStoreDetails() {
  const query = `
    {
      shop {
        name
        primaryDomain {
          url
        }
        paymentSettings {
          currencyCode
        }
      }
    }
  `;

  try {
    const response = await fetch(`https://${process.env.SHOPIFY_STORE_DOMAIN}/api/2024-04/graphql`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Storefront-Access-Token": process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN,
      },
      body: JSON.stringify({ query }),
    });

    const json = await response.json();

    if (json.errors) {
      console.error("GraphQL errors:", json.errors);
      return null; // Return null if there's an error
    }

    return json.data.shop; // Return shop data
  } catch (error) {
    console.error("Error fetching store details:", error);
    return null; // Handle fetch errors
  }
}

Displaying Store Details

Go to the app/pages.js file.

Add the following code to fetch and display the store details:

// app/page.js
import { getStoreDetails } from '../lib/store';

export default async function StoreDetailsPage() {
  // Fetch store details
  const storeDetails = await getStoreDetails();

  // If data fetching failed, handle it here
  if (!storeDetails) {
    return <div>Error fetching store details.</div>;
  }

  return (
    <>
      <main className="container mx-auto p-4">
        <p className='text-xl mb-4'>This is the home page.</p>
        <div>
          <h1 className='text-3xl font-bold'>Store Details</h1>
          <p><strong>Name:</strong> {storeDetails.name}</p>
          <p><strong>URL:</strong> <a href={storeDetails.primaryDomain.url}>{storeDetails.primaryDomain.url}</a></p>
          <p><strong>Currency:</strong> {storeDetails.paymentSettings.currencyCode}</p>
        </div>
      </main>
    </>
  );
}

That’s it! Your store details will now be displayed on the main page.

Output like this:

This is the home page.

Store Details

Name: my-store

URL: https://my-store.myshopify.com/

Currency: INR

#2 How to setup Next-React on your local system.

Prashant Ardeshana — Sun, 13 Oct 2024 14:35:47 +0000

To install React with Next.js using the npx create-next-app@latest command, follow these steps:

1. Ensure Node.js is Installed

Before creating a Next.js project, you need to have Node.js installed on your system. Check if it's installed by running:

node -v

If you don't have it installed, download and install it from Node.js official website.

2. Open a Terminal or Command Prompt

On Windows, open Command Prompt or PowerShell. On macOS or Linux, open a Terminal.

3. Navigate to the Folder Where You Want to Create the Project

Use the cd command to navigate to the folder where you'd like to create your new project. For example:

cd path/to/your/project/folder

4. Run the `npx create-next-app@latest` Command

Now, run the following command:

npx create-next-app@latest

This will prompt you with questions to configure your new Next.js project.
Example of questions and responses:
- What is your project named?: Provide a project name (e.g., my-next-app).
- Would you like to use TypeScript?: Choose Yes or No depending on your preference.
- Would you like to use ESLint?: Choose Yes or No depending on whether you want linting enabled.
- Would you like to use Tailwind CSS?: Choose Yes if you plan to use Tailwind for styling.
- Would you like to use src/ directory?: Choose Yes or No.
- Would you like to use App Router?: Choose Yes or No based on your preference.
- Would you like to customize the default import alias?: Choose Yes or No.

Once you've answered all the prompts, the command will install all the necessary dependencies and create the project files.

5. Navigate to Your New Project Folder

After the installation is complete, navigate to the folder of your new Next.js project:

cd my-next-app

Replace my-next-app with the actual name of your project.

6. Run the Development Server

To start the development server and see your new Next.js project in action, run:

npm run dev

By default, your project will be accessible at http://localhost:3000.

7. Open the Project in Your Code Editor

Open your project folder in your preferred code editor, such as VS Code:

code .

Now you have successfully created and set up a new Next.js (React) project!

How to Create a Shopify Storefront API Access Token

Prashant Ardeshana — Mon, 23 Sep 2024 15:01:33 +0000

To use the Shopify Storefront API, you need to create a Storefront API access token. This token allows you to access specific data (like products, collections, and checkout) via Shopify's GraphQL API.

Here’s a step-by-step guide on how to create the Storefront API access token:

1. Log into Shopify Admin

Go to your Shopify admin dashboard and log in with your credentials.

2. Go to "settings"

In your Shopify admin, navigate to:

settings > Apps and sales channels

Then, click on Develop apps at the top right of the page. This will bring you to the app development section where you can create private apps or custom apps.

3. Create a New Custom App

Click the Create an app the top right corner.
A dialog will appear asking for the app name and a contact email for any app-related inquiries.
Give the app a name (e.g., "Storefront API Access") and provide a valid email address. Then, click Create app.

4. Configure API Access for the App

After creating the app, you will be taken to the app's configuration page.

Click on "Configure Storefront API scopes" under the API credentials tab.

Here, you will see a list of API scopes (permissions). These define what kind of data your app can access.
Enable the necessary permissions:
- If you want to access products, collections, checkout, etc., you'll need to check the appropriate boxes for the following scopes:
  - unauthenticated_read_product_listings (for accessing product information)
  - unauthenticated_read_product_inventory (for inventory data)
  - unauthenticated_write_checkouts (for checkout actions)
  - unauthenticated_read_checkouts (for reading checkouts)
Once you've selected the necessary permissions, click Save.

5. Get the Storefront API Access Token

After saving the permissions:

Go back to the API credentials tab in the app.
Scroll down to the Storefront API access token section.
Click Reveal token once to view the access token.
- Important: Store this token securely because once you reveal it, Shopify won't show it again. If you lose it, you'll need to generate a new token.

This token is now ready to be used for authenticating requests to Shopify’s Storefront API.

Shopify Liquid REPL with API & JSON

Prashant Ardeshana — Tue, 03 Sep 2024 18:30:00 +0000

I am very excited 😀 to share my new website Shopify Liquid REPL.

I recently saw Taylor Page's post about the Shopify REPL (Read-Eval-Print-Loop), which prompted me to review the site. After checking the website's output, I created a new version that integrates JSON data input via the API. You can now use direct JSON data without needing to add an API. For this update, I used HTML, CSS, and JavaScript, along with liquid.browser.min.js. Everything is working well so far. Tom Blanchard, you created an excellent site using Polaris and React, and I used your site as a reference for my updates.

🚀 Here are some key points:

🙂 Simple Data: If you use simple data like variables, you can use them directly.
😁 Complex Data: If you use data related to products, collections, users, etc., you need to add the JSON code.
🤔 Testing API: I have included a dummy testing users API that you can use.
😥 Other Testing APIs: You can find other testing APIs at Fake Store API.

👻 How to Use:

If you have an API or JSON, click the "Add JSON" button, add your data, and then close the popup.
Add Liquid code to the input.liquid field (e.g., a product for loop) and include the product title in the loop.
After that, you will see all the product titles displayed in the output box.

That's it! If anyone has any questions, feel free to DM me 😇.
Thanks to Taylor and Tom 😊 for sharing the Shopify REPL post, your posts inspired me to create this website.

Shopify Liquid REPL 🔗 : http://liquid-repl.mycodemagic.com

How to setup Shopify Vite with Tailwind CSS.

Prashant Ardeshana — Sat, 31 Aug 2024 11:12:01 +0000

Follow these steps to set up Shopify with Vite and Tailwind CSS for a modern development workflow.

Step 1: Clone the Dawn Repository

First, clone the Dawn theme repository from Shopify using the following command:

git clone https://github.com/Shopify/dawn

Step 2: Check Software Versions

Ensure you have the required software versions by checking:

npm -v
node -v
shopify version

Step 3: Install Tailwind CSS and PostCSS

Install Vite, Tailwind CSS, and PostCSS using the following command:

npm install vite tailwindcss postcss autoprefixer --save-dev

Additionally, install npm-run-all to manage multiple npm scripts concurrently:

npm install npm-run-all --save-dev

You can also use a combined installation command:

npm install autoprefixer npm-run-all postcss tailwindcss vite vite-plugin-shopify --save-dev

Step 4: Create Frontend Entry Points

Create the frontend/entrypoints folder and add two files: main.css and main.js.

main.css

Add the following code:

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

main.js

Add the following code:

import 'vite/modulepreload-polyfill';

Step 5: Create Configuration Files

In the root directory, create the following files using these commands:

touch tailwind.config.cjs
touch postcss.config.cjs
touch vite.config.js
touch .shopifyignore
touch jsconfig.json

Step 6: Configure Tailwind

Add the following code to tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */

let plugin = require('tailwindcss/plugin');

module.exports = {
  content: ['./**/*.liquid', './frontend/**/*.{js,ts,jsx,tsx}'],
  safelist: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 7: Update .shopifyignore

Add the following entries to .shopifyignore:

package.json
jsconfig.json
package-lock.json
frontend/
vite.config.js
tailwind.config.cjs
postcss.config.cjs
.gitignore
.prettierignore
.prettierrc.json
.theme-check.yml
.vscode/
*.md
translation.yml
node_modules
.git/
.github/
assets/.vite

Step 8: Update .gitignore

Add the following entries to .gitignore:

node_modules
.ruby-version

Step 9: Configure PostCSS

Add the following code to postcss.config.cjs:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Step 10: Configure Vite

Add the following code to vite.config.js:

// vite.config.js
import { defineConfig } from 'vite';
import shopify from 'vite-plugin-shopify';

export default defineConfig({
  plugins: [shopify()],
  build: {
    emptyOutDir: false,
  },
});

Step 11: Update package.json

Add or modify the following code in package.json:

{
  "name": "my-code-magic",
  "version": "0.1.0",
  "license": "MIT",
  "keywords": [],
  "type": "module",
  "scripts": {
    "dev": "run-p -sr \"shopify:dev -- {@}\" \"vite:dev\" --",
    "deploy": "run-s \"vite:build\" \"shopify:push -- {@}\" --",
    "shopify:dev": "shopify theme dev",
    "shopify:push": "shopify theme push",
    "vite:dev": "vite",
    "vite:build": "vite build"
  },
  "devDependencies": {
    // Your installed packages here
  }
}

Step 12: Configure JavaScript Paths

Add the following code to jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["frontend/*"],
      "~/*": ["frontend/*"]
    }
  }
}

Step 13: Update Liquid Templates

Add the following snippet before the content_for_header in your Liquid templates:

{%- liquid
  render 'vite-tag' with 'main.css'
  render 'vite-tag' with 'main.js'
-%}

Step 14: Run the Development Server

Install dependencies and start the development server with hot-reload:

npm run dev -- --store=store-name --live-reload hot-reload

Step 15: Deploy to Shopify

Deploy your theme to Shopify:

npm run deploy -- --store=store-name

Step 16: Target a Specific Theme by ID

To target a specific theme by its ID during deployment, use the following command:

npm run deploy -- --store=store-name -t131234567890

Summary

This guide covers the necessary steps to set up a Shopify theme using Vite and Tailwind CSS. By following these instructions, you'll benefit from a modern development workflow with faster builds, live reloading, and an improved developer experience.

Key Points:

Clone the Shopify Dawn theme.
Check necessary software versions.
Install Vite, Tailwind CSS, and related packages.
Configure the project with essential files and settings.
Set up scripts for development and deployment.
Ensure your Shopify theme is linked with Vite for better performance.

By implementing these steps, you'll be ready to develop and deploy a Shopify theme with Vite and Tailwind CSS efficiently.

How to setup standalone CLI: use Tailwind CSS without Node.js in Shopify.

Prashant Ardeshana — Sat, 31 Aug 2024 10:57:06 +0000

Dependencies

Shopify CLI: A command-line interface tool that helps you develop and manage your Shopify themes.
TailwindCSS: A utility-first CSS framework for rapidly building custom designs.

Setup

We are using Tailwind as a standalone CLI tool. For more information, you can refer to the official guide.

Note: If you are setting this up on a Mac with an Intel processor, replace macos-arm64 with macos-x64 in the commands below.

Download the latest TailwindCSS binary for macOS with ARM64 architecture:

curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
Make the downloaded file executable:

chmod +x tailwindcss-macos-arm64
Move the executable to a more convenient name:

mv tailwindcss-macos-arm64 tailwindcss
Run the TailwindCSS watcher:
- This command will watch for changes in your TailwindCSS source file (./assets/tailwind.css) and compile the output to your desired CSS file (./assets/style.css):
  
  ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

Publish

When you are ready to compile your CSS for production, you should use the following command to minify your CSS:

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

This command will take your input CSS file (./assets/tailwind.css), process it with TailwindCSS, and output a minified CSS file (./assets/style.css) optimized for production.

Conclusion

Following these steps, you have successfully set up TailwindCSS as a standalone CLI tool and integrated it into your project. This setup allows you to efficiently develop and manage your CSS using Tailwind's utility-first approach. Running the watcher ensures that your CSS is automatically compiled during development, while the minification step prepares your CSS for production, optimizing it for performance. This streamlined process helps maintain a clean and maintainable codebase, allowing you to focus on building and customizing your Shopify theme with ease.

DEV Community: Prashant Ardeshana

Top 10 best React component libraries in 2025

1. MUI (Material-UI)

2. Chakra UI

3. Ant Design

4. ShadCN/UI

5. React Bootstrap

6. Mantine

7. NextUI

8. Headless UI

9. Radix UI

10. React Aria

#3 How to fetch the store details and print to the fronted using react Next.

Set Up Local Environment Variables

Create lib Folder for the Fetching.

Displaying Store Details

Output like this:

Store Details

#3 How to fetch the store details and print to the fronted using react Next.

Set Up Local Environment Variables

Create lib Folder for the Fetching.

Displaying Store Details

Output like this:

Store Details

#2 How to setup Next-React on your local system.

1. Ensure Node.js is Installed

2. Open a Terminal or Command Prompt

3. Navigate to the Folder Where You Want to Create the Project

4. Run the npx create-next-app@latest Command

5. Navigate to Your New Project Folder

6. Run the Development Server

7. Open the Project in Your Code Editor

How to Create a Shopify Storefront API Access Token

1. Log into Shopify Admin

2. Go to "settings"

3. Create a New Custom App

4. Configure API Access for the App

5. Get the Storefront API Access Token

Shopify Liquid REPL with API & JSON

🚀 Here are some key points:

👻 How to Use:

How to setup Shopify Vite with Tailwind CSS.

Step 1: Clone the Dawn Repository

Step 2: Check Software Versions

Step 3: Install Tailwind CSS and PostCSS

Step 4: Create Frontend Entry Points

main.css

main.js

Step 5: Create Configuration Files

Step 6: Configure Tailwind

Step 7: Update .shopifyignore

Step 8: Update .gitignore

Step 9: Configure PostCSS

Step 10: Configure Vite

Step 11: Update package.json

Step 12: Configure JavaScript Paths

Step 13: Update Liquid Templates

Step 14: Run the Development Server

Step 15: Deploy to Shopify

Step 16: Target a Specific Theme by ID

Summary

How to setup standalone CLI: use Tailwind CSS without Node.js in Shopify.

Dependencies

Setup

Publish

Conclusion

Create `lib` Folder for the Fetching.

Create `lib` Folder for the Fetching.

4. Run the `npx create-next-app@latest` Command