🚀 Vite + TS + Tailwind + shadcn/ui Template

What's this?

A no-nonsense template for when you need to slap a Claude-generated UI somewhere that isn't a chat window.

Uses the exact same UI stack as Claude Artifacts, for copy-pasting:

• Vite for speed
• TypeScript for sanity
• Tailwind for style
• shadcn/ui for pretty buttons
• File-based routing because ain't nobody got time for that
• My personal Tailwind color scheme and font choices, because I have opinions

Why use it?

Because you're tired of setting up the same stack for the 100th time. This template is for the "I just want it to work" crowd.

Quick Start

1. Use this template:

   • Click the "Use this template" button on GitHub
   • Choose "Create a new repository"
   • Give it a snazzy name and hit "Create repository from template"

2. Clone your new repo:

   git clone https://github.com/yourusername/your-snazzy-new-repo.git
   cd your-snazzy-new-repo
   

3. Install dependencies (go grab a coffee, it'll take a minute):

   npm install
   

4. Run it:

   npm run dev
   

5. Add a page:

   • Throw a new .tsx file in src/pages
   • Magic! It's now a route. (Thanks, vite-plugin-pages)

6. Build for production:

   npm run build
   

7. Deploy:

   • Take the dist folder
   • Throw it at a static host (Nginx, Netlify, whatever floats your boat)
   • Profit!

"But how do I...?"

• Customize theme? tailwind.config.js is your friend. (But my color choices are pretty rad, just saying.)
• Add shadcn/ui components? npx shadcn-ui add <component-name>. Done.
• Need more? Check out the Vite docs, Tailwind docs, or shadcn/ui docs.

Deployment

This template comes with an easy GitHub Pages deployment setup.

1. Push your changes to GitHub.

2. Run the deployment command:

npm run deploy

3. Set up GitHub Pages:

• Go to your repository settings
• Navigate to Pages
• Set the source to "gh-pages" branch
• Save

Your site will be live at https://yourusername.github.io/your-repo-name/

Note: This setup uses HashRouter, which works out of the box with GitHub Pages. No additional configuration is needed for routing to work correctly.

Credits

• UI components lovingly generated by Claude, Anthropic's AI assistant. (No, it can't do your laundry. We asked.)
• Template crafted by [Your Name] with only minimal cursing.
• Comes with a personal touch of color and typography. You're welcome.

Now go build something cool. Or don't. I'm a README, not a cop.