Template Structure

templates/your-template-name/
├── template.manifest.json        # Template metadata
├── template.css                  # Global CSS custom properties
├── index.ts                      # Barrel file — all exports
├── Header/
│   ├── Header.tsx                # Named export: Header
│   └── Header.module.css
├── Footer/
│   ├── Footer.tsx                # Named export: Footer
│   └── Footer.module.css
├── Loading/
│   ├── Loading.tsx               # Default export
│   └── Loading.module.css
├── pages/
│   ├── home/
│   │   ├── HomeContent.tsx       # Default export
│   │   └── HomeContent.module.css
│   ├── about/
│   │   ├── AboutContent.tsx      # Default export
│   │   └── AboutContent.module.css
│   └── login/
│       ├── LoginContent.tsx      # Default export
│       └── LoginContent.module.css
└── preview/
    └── thumbnail.png             # Marketplace listing image

// Layout components — named exports
export { Header } from './Header/Header'
export { Footer } from './Footer/Footer'
 
// Loading — default re-export
export { default as Loading } from './Loading/Loading'
 
// Pages — default re-exports
export { default as HomeContent } from './pages/home/HomeContent'
export { default as AboutContent } from './pages/about/AboutContent'
export { default as LoginContent } from './pages/login/LoginContent'
 
// Optional pages (include only if you've built them)
export { default as ServicesContent } from './pages/services/ServicesContent'
export { default as BlogContent } from './pages/blog/BlogContent'
export { default as ContactContent } from './pages/contact/ContactContent'

// ✅ Correct — named export
export function Header() {
  return <header>...</header>
}
 
// ❌ Incorrect — default export
export default function Header() {
  return <header>...</header>
}

// ✅ Correct — named export
export function Footer() {
  return <footer>...</footer>
}

// ✅ Correct — default export
export default function Loading() {
  return <div className={styles.spinner}>...</div>
}

// ✅ Correct — default export
export default function HomeContent() {
  return <main>...</main>
}