Quick Start - gettemplate Docs

Quick Start Guide

Get your first template running in under 5 minutes!

Step 1: Create Project

npx create-next-app@latest my-app --typescript --tailwind --eslint
cd my-app

Step 2: Install Additional Dependencies

npm install framer-motion lucide-react

Step 3: Copy a Template

Visit gettemplate.app/templates, pick a template, and copy the code.

Step 4: Create Component File

// components/HeroSection.jsx
import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";

const HeroSection = () => {
  return (
    <motion.div 
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="min-h-screen flex items-center justify-center"
    >
      <div className="text-center">
        <h1 className="text-5xl font-bold text-zinc-900">
          Welcome to My App
        </h1>
        <button className="mt-6 px-6 py-3 bg-zinc-900 text-white rounded-xl flex items-center gap-2">
          Get Started <ArrowRight className="w-4 h-4" />
        </button>
      </div>
    </motion.div>
  );
};

export default HeroSection;

Step 5: Use in Your Page

// pages/index.js
import HeroSection from "../components/HeroSection";

export default function Home() {
  return <HeroSection />;
}

Step 6: Run Your App

npm run dev

🎉 Congratulations! You've successfully integrated your first gettemplate template!