A modern, fast, and elegant QR code generator built with React, TypeScript, and Tailwind CSS. Generate high-quality QR codes from URLs with customizable error correction levels and download them in multiple formats.
- Quick Generation: Instantly generate QR codes from any valid URL
- Customizable Error Correction: Choose from four error correction levels (L, M, Q, H) to balance between QR code size and reliability
- Multiple Export Formats: Download your QR codes as PNG or SVG
- Live Preview: See your QR code in real-time as you generate it
- Responsive Design: Works seamlessly across desktop, tablet, and mobile devices
- Modern UI: Clean and intuitive interface built with Tailwind CSS
- Type-Safe: Built with TypeScript for reliability and better developer experience
- Frontend Framework: React 18
- Language: TypeScript 5
- Styling: Tailwind CSS 3
- Build Tool: Vite 5
- QR Generation: qr-code-styling
- UI Components: Radix UI (Select, Tooltip, Icons)
- Styling Utilities: class-variance-authority, clsx, tailwind-merge
- Testing: Vitest + Playwright + Testing Library
- Code Quality: ESLint
- Node.js 18+ and npm/yarn/pnpm
- Clone the repository:
git clone https://github.com/yourusername/quter.git
cd quter- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
- Enter a URL: Type or paste any valid URL into the input field
- Select Error Correction Level (optional):
- L (Low): ~7% error correction
- M (Medium): ~15% error correction (default)
- Q (Quartile): ~25% error correction
- H (High): ~30% error correction
- Generate: Click the "Generate QR Code" button
- Download: Choose your preferred format (PNG or SVG) and download
npm run dev- Start development servernpm run build- Build for production (includes TypeScript compilation)npm run preview- Preview production build locally
quter/
├── src/
│ ├── components/ # React components
│ │ ├── ui/ # Reusable UI components (shadcn-style)
│ │ │ ├── badge.tsx
│ │ │ ├── button.tsx
│ │ │ ├── select.tsx
│ │ │ └── tooltip.tsx
│ │ ├── UrlForm.tsx
│ │ ├── QrPreview.tsx
│ │ └── DownloadButtons.tsx
│ ├── hooks/ # Custom React hooks
│ │ └── useQrGenerator.ts
│ ├── utils/ # Utility functions
│ │ ├── fileUtils.ts
│ │ └── validation.ts
│ ├── lib/ # Library utilities
│ │ └── utils.ts # cn() helper and utilities
│ ├── types/ # TypeScript type definitions
│ ├── constants/ # Application constants
│ ├── styles/ # Global styles
│ ├── App.tsx # Main application component
│ └── main.tsx # Application entry point
├── public/ # Static assets
├── tests/ # Test files
│ ├── hooks/ # Hook tests
│ └── unit/ # Unit tests
└── e2e/ # End-to-end tests (Playwright)
QuteR uses a shadcn/ui-inspired component architecture with Radix UI primitives:
- Button: Customizable button component with variants
- Select: Accessible dropdown for error correction levels
- Tooltip: Helpful hints and information display
- Badge: Status indicators and labels
All components are built with Tailwind CSS and support dark mode by default.
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Themed QR Styles: Christmas, RPG, and custom visual themes
- Enhanced Customization: Color schemes and pattern options
- Batch Generation: Generate multiple QR codes at once
This project is open source and available under the MIT License.
- Built with qr-code-styling for QR code generation
- Styled with Tailwind CSS
- Powered by Vite and React
Made with ❤️ by the QuteR team