Create Pagination UI Using React And Tailwind CSS
Last Updated :
24 Sep, 2024
When working with huge data sets in online applications, pagination is an essential feature. It makes a lengthy list of items easier to browse through by dividing them into digestible parts. This article will tell you how to use Tailwind CSS for styling and React for front-end functionality to create a pagination user interface.
Prerequisites
Approach To Create Pagination UI
The main functionalities of our pagination component will include:
- Set up the React project using the below steps and add all code in the App.jsx file.
- Showing pagination buttons with "Next" and "Previous" for navigating between pages.
- Highlighting the current page.
- Disabling the "Previous" and "Next" buttons when at the start or end of the list, respectively.
Steps to Create Pagination UI
Step 1: Set up the React Project
npx create-react-app pagination-app
Step 2: Navigate to the path of the directory and install node modules using the command.
cd pagination-app
npm install
Step 3: Install Tailwind CSS using the command.
npm install -D tailwindcss
npx tailwindcss init
Step 4: Configure the tailwind paths in your tailwind.config.js file.
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}Step 5: Add tailwind directives to your index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 6: Create a components folder and inside it, add a file called Pagination.js where we’ll write the logic for the pagination UI.
Project Structure:
Project StructureUpdated Dependencies:
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
} Example: Here’s is the example to create the Pagination UI using React And Tailwind CSS
JavaScript
// Pagination.js
import React from 'react';
const Pagination = ({ totalItems, itemsPerPage, currentPage, setCurrentPage }) => {
const totalPages = Math.ceil(totalItems / itemsPerPage);
const pages = [];
for (let i = 1; i <= totalPages; i++) {
pages.push(i);
}
const handlePrevious = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
}
};
const handleNext = () => {
if (currentPage < totalPages) {
setCurrentPage(currentPage + 1);
}
};
return (
<div className="flex justify-center items-center space-x-2 mt-4">
<button
className={`px-4 py-2 rounded ${currentPage === 1 ?
'bg-gray-300' : 'bg-blue-500 text-white'
}`}
onClick={handlePrevious}
disabled={currentPage === 1}>
Previous
</button>
{pages.map((page) => (
<button
key={page}
className={`px-4 py-2 rounded ${currentPage === page ?
'bg-blue-500 text-white' : 'bg-gray-200'
}`}
onClick={() => setCurrentPage(page)} >
{page}
</button>
))}
<button
className={`px-4 py-2 rounded ${currentPage === totalPages ?
'bg-gray-300' : 'bg-blue-500 text-white'
}`}
onClick={handleNext}
disabled={currentPage === totalPages} >
Next
</button>
</div>
);
};
export default Pagination;
// App.js
import React, { useState } from 'react';
import Pagination from './component/Pagination';
const App = () => {
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 5;
const totalItems = 50; // Assume there are 50 items
return (
<div className="App">
<h1 className="text-center text-2xl font-bold">Pagination Example</h1>
<Pagination
totalItems={totalItems}
itemsPerPage={itemsPerPage}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
/>
</div>
);
};
export default App;
To start the Application run the following command:
npm start
Output:
Similar Reads
Create Dropdowns UI using React and Tailwind CSS Dropdown UI components are often used in web applications for forms, navigation, or user preferences, allow users to select from a list of options by clicking a button, which will display a drop-down menu, in this article we will create a dropdown element using React for functionality and Tailwind C
3 min read
Create Navbars UI using React and Tailwind CSS A UI plays an important role because a clean, well-designed interface creates a positive first impression and if the UI is good then users can stay on our website some more time and if the UI is bad then they can not stay on our site for more time. we will see how to Create Navbars UI using React an
5 min read
Create Radio Groups UI using React and Tailwind CSS React is a popular JavaScript library for building user interfaces combined with Tailwind CSS a utility-first CSS framework that offers a powerful approach to developing stylish and responsive components. This article shows how to build various radio group UIs using React and Tailwind CSS. It includ
5 min read
Create Store Navigation using React and Tailwind CSS We will build a simple Store Navigation system using React and Tailwind CSS and React Icons. The navigation bar will have links to different store sections such as Home and Products and Cart and Profile. Each link will be styled with icons accompanying them to make the UI more intuitive. We will als
4 min read
Create Feeds UI using React and Tailwind CSS In the world of social networking, feeds are the primary way users interact with content. Whether it is on LinkedIn, Facebook, or Twitter the feed showcases posts updates, and activities from people or organizations. This article will help you build a LinkedIn-style feed UI using React and Tailwind
4 min read