tshirt-customizer-react Tailwind Templates

Tshirt Customizer React

A React-based application that allows users to customize T-shirts by uploading images and adding styled text. Includes theme switching via keyboard shortcut (Alt + Q). Designed with Tailwind CSS and React Hook Form.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.

T-Shirt Customizer App

A React-based web application that allows users to design their own t-shirt by uploading images and adding styled text. Built using modern frontend technologies like React, Tailwind CSS, and React Hook Form.

This project is a T-Shirt Customization Web Application built using ReactJS. It allows users to personalize a T-shirt by uploading an image, adding custom text (up to 3 lines), and selecting body measurements like height, weight, and build type. It provides a live preview of the design and supports keyboard shortcut-based text styling. The UI is styled with Tailwind CSS for modern responsiveness and smooth user experience.


Key Functionalities

  1. User selects Height, Weight, Build

  2. Uploads an image using input field (drag-and-drop supported via system)

  3. Adds custom multi-line text (max 3 lines)

  4. Live preview of uploaded image + text overlay

  5. Keyboard shortcut Alt + Q changes text styling

  6. Text styles change across 3 themes (color, font, weight, etc.)

  7. The whole design area is responsive

Features

  • ✅ Customize t-shirt with user data like height, weight, and build
  • ✅ Upload image or drag-and-drop support
  • ✅ Add custom text (max 3 lines) with live preview
  • ✅ Switch between 3 different text styles using Alt + Q shortcut
  • ✅ Fully responsive layout
  • ✅ Modern UI with Tailwind CSS

🔧 Technologies Used

Tool/Library Purpose
ReactJS Frontend Framework
Tailwind CSS Styling
React Hook Form Form management and validation
useState & useEffect React state management

Top categories

Loading Svelte Themes