A robust, production-ready collection of reusable, Figma-accurate UI components for e-commerce and category-driven platforms, built with Next.js, TypeScript, and Tailwind CSS. This project demonstrates how to architect, style, and compose a modern, scalable frontend with pixel-perfect fidelity, accessibility, and real-world interactivity—including a dynamic category filter, product cards, pagination, and more.
- Live-Demo: https://freelance-qllp.vercel.app/
- Project Summary
- Features
- Project Structure
- Installation & Getting Started
- Component Walkthrough
- Usage & Examples
- Customization & Learning
- API & Routing
- Technologies Used
- Keywords
- License
- Conclusion
This repository is a complete, real-world example of how to build a highly modular, reusable, and visually flawless UI system for e-commerce or category-driven web apps. It features:
- Centralized, dynamic product data for all UI components
- Interactive, multi-select category filter bar with custom SVG icons
- Reusable product cards and detail pages, fully dynamic and data-driven
- Pagination and responsive grid layouts
- Mobile-first, accessible design
All components are designed for maximum reusability, maintainability, and ease of integration into other projects. The codebase is ideal for learning, rapid prototyping, or as a foundation for production e-commerce UIs.
- Pixel-perfect Figma/SVG Matching: All UI elements (dropdowns, checkboxes, icons, layouts) match the Figma reference exactly.
- Reusable Components: Includes
FilterDropDown,CategoryFilterMenuBar,ProductCard,Pagination, and more. - Dynamic Multi-select Filtering: Category filter bar supports independent, multi-select dropdowns for brands, flavors, and strengths, updating the product grid in real time.
- Centralized Product Data: All product info is managed in a single TypeScript file for easy updates and scalability.
- Custom SVG Icons: All icons are implemented as SVG for crisp, scalable rendering.
- Responsive & Accessible: Fully mobile-friendly, keyboard navigable, and accessible with ARIA/focus states.
- Bug-free UX: All known issues (duplicate checkboxes, filter logic, etc.) are fixed.
- Modern Stack: Built with Next.js (App Router), TypeScript, Tailwind CSS, and ESLint.
- Easy Theming: All styles are managed with Tailwind for rapid customization.
- Clear Project Structure: Logical, scalable file organization for easy extension.
.
├── .gitignore
├── README.md
├── desktop_design.fig # Figma design source
├── eslint.config.mjs
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── public/ # SVG assets and public files
├── src/
│ ├── app/
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout for Next.js
│ │ └── page.tsx # Main page, renders filter bar UI and product grid
│ └── components/
│ ├── CategoryFilter/
│ │ ├── FilterDropDown.tsx # Reusable dropdown with custom checkboxes
│ │ └── CategoryFilterMenuBar.tsx # Filter bar with dropdowns/dividers
│ ├── Pagination/
│ │ └── Pagination.tsx # Pagination controls
│ └── ProductCard/
│ ├── ListProductCard.tsx # Product grid with filter and pagination
│ ├── SingleProductCard.tsx # Individual product card
│ ├── useProductPagination.ts # Pagination hook
│ └── ...
├── tsconfig.json
See all files: GitHub File Explorer
- Clone the Repository:
git clone https://github.com/arnobt78/freelancing-reusable-ui-components--NextJS.git
cd freelancing-reusable-ui-components--NextJS- Install Dependencies:
npm install- Run the Development Server:
npm run devOpen http://localhost:3000 in your browser to view the app.
- Renders the main filter bar UI with multiple
FilterDropDowncomponents (Brand, Flavor, Strength) - Dynamically generates dropdown options from product data
- Handles layout, divider lines, and filter state
- Reusable dropdown with custom checkboxes and SVG icons
- Supports multi-select, keyboard navigation, and accessibility
- Designed for pixel-perfect Figma accuracy
ListProductCard.tsx: Renders the product grid, filter bar, and paginationSingleProductCard.tsx: Displays individual product info (image, title, price, etc.)ProductDetailLayout.tsx: Product detail page, fully dynamic and responsive- All product data is imported from a single source for consistency
- Handles pagination controls for product listings and filter results
- Responsive, accessible, and visually consistent
- Sets up the overall page structure and applies Tailwind-based global styles
import { ListProductCard } from "../components/ProductCard/ListProductCard";
export default function Page() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-white px-2">
<ListProductCard />
</div>
);
}- Copy the desired component(s) and their dependencies from
/src/components/into your own project.
import { CategoryFilterMenuBar } from "./components/CategoryFilter/CategoryFilterMenuBar";
import { ListProductCard } from "./components/ProductCard/ListProductCard";
// ...- Import and use as needed:
import { CategoryFilterMenuBar } from "./components/CategoryFilter/CategoryFilterMenuBar";
import { ListProductCard } from "./components/ProductCard/ListProductCard";
// ...-
Provide your own product data (see
src/data/products.tsfor the data structure). -
Customize styles via Tailwind classes or by editing SVG assets in
/public.
- Component Reuse: Add more filters by extending the
CategoryFilterMenuBarand updating the product data structure. - Styling: All styles are driven by Tailwind CSS for rapid, utility-first customization. Change colors, spacing, or icon assets by editing the relevant classes or SVG files in
/public. - Accessibility: Keyboard navigation and focus states are built-in. For further accessibility, review and extend ARIA attributes as needed.
- Design Updates: To match new Figma files, replace the SVGs in
/publicor adjust Tailwind classes in component files. - Teaching Tool: The codebase is ideal for learning best practices in modular React, TypeScript, and Next.js development.
- This project is frontend-only and uses static product data for demonstration.
- Next.js App Router is used for all routing and rendering.
- Product detail pages are rendered dynamically based on the product index in the URL (e.g.,
/product-detail?idx=2). - To integrate with a backend API, extend the data fetching logic in the relevant component or page files.
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- ESLint
- SVG Assets (for icons)
- Figma (for design reference)
Next.js, Reusable Components, UI Library, TypeScript, Tailwind CSS, Category Filter, Dropdown, Checkbox, Pixel-Perfect, Figma, Accessibility, Frontend, Pagination, Product Card, React, ESLint, SVG Icons, Modular Design, E-commerce UI, App Router, Mobile Responsive, Teaching, Demo, Open Source
This project is for demonstration and freelance use. You may adapt or extend it for your own projects.
This repository is an excellent starting point for anyone looking to build scalable, maintainable, and pixel-perfect UI components with Next.js and modern frontend technologies. With a focus on reusability, accessibility, and design fidelity, you'll learn both how to create and how to structure professional-grade frontend code. Clone, customize, and contribute—or just use it as a teaching tool for yourself or your team!
For inquiries or feedback, please reach out via email at [email protected].
Happy Coding! 🎨🚀 Thank you for checking out this project.