Software Engineering

React + Vite + Tailwind + shadcn/ui Boilerplate

Name: React + Vite + Tailwind + shadcn/ui Boilerplate
Author: Claude Directory

Claude Directory December 10, 2025

0 copies 0 likes

Instantly generates a modern, scalable React boilerplate with Vite, Tailwind, shadcn/ui, and full tooling setup, saving weeks of configuration time for new projects. Perfect for rapid prototyping and

Prompt

Generate a complete production-ready React application boilerplate using the latest best practices.

Tech Stack:
- React 18+
- Vite (for fast dev server and builds)
- TypeScript
- Tailwind CSS
- shadcn/ui components
- React Router
- Zustand for state management
- React Query for data fetching
- ESLint + Prettier
- Husky + lint-staged
- Vitest for testing
- Playwright for E2E testing
- Absolute imports
- Path aliasing

Structure the project with:
1. src/
   - components/
   - lib/
   - hooks/
   - stores/
   - routes/
   - types/
   - utils/
2. Proper folder structure for scalability
3. Example page with shadcn/ui components
4. Authentication flow stub
5. Dark mode support
6. Mobile responsive
7. README.md with setup instructions
8. All necessary config files (.eslintrc, tailwind.config, vite.config, tsconfig, etc.)

Output ONLY the complete file structure with all code. Use ```filename.tsx``` blocks for each file. Make it copy-paste ready for immediate use.

How to Use

1. Copy the full prompt text from the 'content' field above. 2. Paste it into Claude or your preferred AI chat interface. 3. Optionally customize the tech stack or add specific features in the prompt before running. 4. Hit enter to generate the boilerplate code. 5. Copy the generated file blocks into a new project directory using your IDE. 6. Run 'npm install' in the project root to install dependencies. 7. Start development with 'npm run dev' and extend with your app logic. 8. Refer to the generated README for testing, building, and deployment instructions.

Comments

More Prompts

View all

Research

ChatGPT Web Browsing Research Agent

Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.

Community

Development

ChatGPT API Integration Blueprint

Design production-ready ChatGPT API integrations. Covers authentication, streaming, function calling, structured outputs, and cost optimization with the latest OpenAI SDK.

Community

Data Analysis

Advanced Data Analysis with Code Interpreter

Step-by-step data analysis pipeline using ChatGPT's Code Interpreter. Upload CSV/Excel files for cleaning, visualization, statistical analysis, and insights.

Community

Productivity

ChatGPT Memory & Personalization Optimizer

Optimize ChatGPT's memory feature for persistent context. Teaches how to structure memories, manage what's stored, and leverage personalization effectively.

Community

Creative

DALL-E 3 Prompt Engineering Master

Generate precise, creative DALL-E 3 prompts. Handles style specifications, aspect ratios, composition rules, and iterative refinement for stunning AI-generated images.

Community

Productivity

ChatGPT Canvas Collaborative Editor

Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.

Community