About this template

What’s inside

• React Router v7 (SSR): file-based routes via app/routes.ts.
• Vite + TypeScript: fast dev server and modern builds.
• Tailwind v4: already wired with your styles in app/styles/.
• UI components: small set in app/components/basic-ui/ for common patterns.
• Dev playground: visit /dev to try styles and components.

Project layout

• app/root.tsx: HTML shell, error boundary, and global CSS includes.
• app/routes.ts: central route config (index, pages, nested routes).
• app/routes/home.tsx: landing page.
• app/routes/about.tsx: this page.
• app/routes/dev/**: dev playground routes.
• app/components/basic-ui/**: reusable UI building blocks.
• app/styles/**: Tailwind and custom CSS (kept intact).

Commands

• npm run dev: start dev server.
• npm run build: build client + server bundles to build/.
• npm run typecheck: generate route types and run TypeScript.
• npm test: run tests (Vitest ready).

Conventions

• Styling: prioritize your responsive system in app/styles/(tokens, CSS variables, utilities), and use Tailwind utilities alongside it.
• Units: use vh/svh selectively for full-viewport sections/heros; otherwise rely on your spacing/typography scales and responsive utilities.
• Components: reuse from app/components/basic-ui/ before adding new ones.
• Routes: declare in app/routes.ts using index androute.

Styling system highlights

• Your CSS in app/styles/ defines responsive tokens and utilities so components inherit consistent spacing, typography, and layout behavior without inline styles.
• Semantic color variables are centralized, enabling quick theme tweaks and dark-mode support.
• Responsive behavior goes beyond viewport units: scales, utilities, and media rules ensure typography and spacing adapt cleanly across breakpoints.
• Tailwind v4 utilities are available alongside your custom CSS for rapid composition.

Change the color scheme (quick)

1. Open app/styles/theme.css.
2. Locate the CSS variables that define your palette (for example, background, foreground, primary, accent, and their dark-mode counterparts).
3. Update those variable values to your new colors. The entire app will reflect the change without touching component code.
4. Optionally add additional theme blocks (e.g., a data-attribute or class selector) if you want multiple named themes you can toggle at runtime.

Dev playground

Explore /dev for hands-on demos:

• /dev/responsiveness: interactive viewport tester with an iframe preview, saved state, and quick route picker.
  • Preset breakpoints from mobile → 7xl, plus custom width/height sliders.
  • Enter a custom URL or choose built-in routes; settings persist via localStorage.
  • Scaled rendering with an on-screen overlay showing target size and scale.
• /dev/edit-content: live editor + preview for HTML and Markdown.
  • Side-by-side editor and preview; switch formats instantly.
  • Edits auto-save to localStorage; reset to original or copy/recover content.
  • Preview powered by MarkdownRenderer and RelativePathContentParser (supports relative asset paths).
• /dev/theme: token swatches for light/dark (background, card, primary, accent, etc.) to visualize theme mapping.
• /dev/buttons: full button showcase.
  • Variants: default, outline, secondary, ghost, link, destructive; icon and text+icon combos.
  • Sizes: sm → 2xl with scale factors; state matrix (normal, active, disabled).
  • Navigation examples using to links.
• /dev/typography: headings (h1–h6) and text scale.
  • Core sizes plus an expandable set up to text-17xl for stress testing.
• /dev/how-to-tailwind: concise guide to how Tailwind v4 and your tokens are wired in this template.
  • Covers layers, token classes (e.g., bg-background, text-foreground), dark mode, and layout building blocks.
• /dev/colors: Tailwind palette explorer.
  • Jump to any color via hash links (e.g., #blue).
  • Copy HEX and RGB for each shade with one click.
• /dev/components: scratch area to try new UI before integrating.

Requirements

• Node: use Node >= 20 for the best React Router tooling experience.