Skip to main content

Chapter 4: Template System

In the previous chapter, we explored ShipNowKit's Theme System, which provides visual adaptability for your application in any lighting condition. Now, let's look at how to assemble these components into complete, ready-to-use interfaces using the Template System.

Introduction​

Imagine you want to build a house. The UI Component Library gives you windows, doors, and walls - but you still need to figure out the overall layout and design. Should you create a colonial-style home? A modern minimalist design? A cozy cottage?

The Template System solves this by providing complete "architectural styles" for your application. Instead of placing individual components and figuring out how they work together, you can start with a fully-designed layout and customize it to meet your needs.

The Problem: Starting From Scratch is Overwhelming​

When building a website or application, developers often face these challenges:

  • Designing cohesive layouts that look professional
  • Ensuring consistency across different pages
  • Creating all standard pages (like pricing, authentication, landing pages)
  • Making everything responsive and accessible

Even with great UI components, designing the overall structure can be time-consuming and requires design expertise that many developers may not have.

ShipNowKit's Template System Solution​

ShipNowKit's Template System provides complete, pre-built layouts for common website types. Think of it like moving into a fully-furnished house - the structure is in place, the furniture is arranged, and you just need to add your personal touches.

Currently, ShipNowKit offers several template styles, with more being developed and added regularly. The initial template styles include:

  1. ShipNowKit Style - Modern, bold SaaS-focused design with gradients and vibrant elements
  2. Notion Style - Clean, minimalist design inspired by Notion's interface
  3. Additional styles coming soon - Our team is actively developing new template styles to suit different industries and design preferences

Each style includes templates for:

  • Hero sections
  • Feature sections
  • Pricing sections
  • Authentication flows (sign-in, sign-up)
  • Headers and footers
  • FAQs
  • And more

Let's explore how to use these templates in your project.

Using the Template System​

Exploring Available Templates​

The templates are organized in the app/_templates directory, with subdirectories for each style:

app/
├── _templates/
│   ├── shipNow/
│   │   ├── page.tsx
│   │   └── ...
│   ├── notion/
│   │   ├── page.tsx
│   │   └── ...

You can preview these templates by visiting their respective routes in your application, such as /templates/shipnow and /templates/notion.

Step 1: Choose a Template Style​

First, decide which template style aligns with your project's aesthetic:

// If you prefer the ShipNowKit style (bold, gradient-rich)
import { ShipNowLikeHeader } from "@/components/header/ShipNowLike";
import { ShipNowLikeHero } from "@/components/hero/ShipNowLike";
import { ShipNowLikeFooter } from "@/components/footer/ShipNowLike";

// OR if you prefer the Notion style (clean, minimalist)
import { NotionLikeHeader } from "@/components/header/NotionLike";
import { NotionLikeHero } from "@/components/hero/NotionLike";
import { NotionLikeFooter } from "@/components/footer/NotionLike";

This decision determines the visual language of your entire application, so choose a style that aligns with your brand and target audience.

Step 2: Implement Page Templates​

Let's create a simple landing page using the ShipNowKit template style:

// app/page.tsx
import { ShipNowLikeHeader } from "@/components/header/ShipNowLike";
import { ShipNowLikeHero } from "@/components/hero/ShipNowLike";
import { ShipNowLikeFooter } from "@/components/footer/ShipNowLike";
import { siteConfig } from "@/config";

export default function HomePage() {
  // Navigation items for your header
  const navItems = [
    { label: "Features", href: "#features" },
    { label: "Pricing", href: "#pricing" },
    { label: "Contact", href: "/contact" },
  ];

  // Hero section configuration
  const heroConfig = {
    title: "Your Amazing Product",
    subtitle: "Solve problems faster with our innovative solution",
    button: {
      name: "Get Started",
      href: "/signup"
    }
  };

  return (
    <>
      <ShipNowLikeHeader loginButtonName="Sign In" navItems={navItems} />
      <main>
        <ShipNowLikeHero {...heroConfig} />
        {/* Add more sections as needed */}
      </main>
      <ShipNowLikeFooter slogan="Making work easier" socialLinks={[]} columns={[]} />
    </>
  );
}

This example shows how you can import template components and customize them with your own content. The templates handle the layout, styling, and responsiveness - you just provide the content.

Step 3: Create an Authentication Page​

Let's create a sign-in page using the template system:

// app/signin/page.tsx
import { ShipNowLikeSigninForm } from "@/components/signinForm/ShipNowLike";

export default function SignInPage() {
  const signInConfig = {
    title: "Welcome Back",
    socialButtons: [
      {
        provider: "google",
        icon: "/icons/google.svg",
        text: "Continue with Google"
      },
      {
        provider: "github",
        icon: "/icons/github.svg",
        text: "Continue with GitHub"
      }
    ],
    supportEmail: true,
    defaultCallbackUrl: "/dashboard"
  };

  return (
    <div className="min-h-screen flex items-center justify-center">
      <ShipNowLikeSigninForm config={signInConfig} />
    </div>
  );
}

The ShipNowLikeSigninForm template handles all the authentication UI, including social login buttons and email/password fields. You just need to configure which providers you want to support.

Customizing Templates​

While templates provide a great starting point, you'll often want to customize them to match your brand. Here's how:

Customizing Colors and Theme​

Templates automatically adapt to your Theme System configuration, so you can change colors by updating your theme:

// tailwind.config.ts (simplified)
const config = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))'
        },
        // Update other colors as needed
      }
    }
  }
}

Customizing Template Content​

Most templates accept configuration objects that let you customize content:

// Example: Customizing a pricing section
import { ShipNowPrice } from "@/components/price/ShipNowKit";

const pricingConfig = {
  title: "Simple, Transparent Pricing",
  subTitle: "Start free, upgrade when you need to",
  card: {
    title: "Pro Plan",
    description: "Everything you need to succeed",
    features: [
      "Unlimited projects",
      "Priority support",
      "Advanced analytics",
      "Custom domains"
    ],
    price: {
      priceId: "your_stripe_price_id",
      isSubscription: true,
    },
    buttonText: "Get Started"
  }
};

<ShipNowPrice {...pricingConfig} />

This approach allows you to maintain the professional design of the template while customizing the content to match your product.

Real-World Example: Building a Complete Landing Page​

Let's see how to build a complete landing page using the Template System:

// app/page.tsx (simplified)
import { ShipNowLikeHeader } from "@/components/header/ShipNowLike";
import { ShipNowLikeHero } from "@/components/hero/ShipNowLike";
import { ShipNowLikeFeature } from "@/components/feature/ShipNowLike";
import { ShipNowPrice } from "@/components/price/ShipNowKit";
import { ShipNowLikeFAQ } from "@/components/faq/ShipNowLike";
import { ShipNowLikeFooter } from "@/components/footer/ShipNowLike";

export default function Home() {
  // Configuration objects for each section
  const navItems = [/* your nav items */];
  const heroConfig = {/* your hero config */};
  const featuresConfig = [/* your features config */];
  const pricingConfig = {/* your pricing config */};
  const faqConfig = {/* your FAQ config */};
  const footerConfig = {/* your footer config */};

  return (
    <>
      <ShipNowLikeHeader navItems={navItems} loginButtonName="Sign In" />
      <main>
        <section id="hero">
          <ShipNowLikeHero {...heroConfig} />
        </section>
        <section id="features">
          {featuresConfig.map((config, index) => (
            <ShipNowLikeFeature key={index} {...config} />
          ))}
        </section>
        <section id="pricing">
          <ShipNowPrice {...pricingConfig} />
        </section>
        <section id="faq">
          <ShipNowLikeFAQ {...faqConfig} />
        </section>
      </main>
      <ShipNowLikeFooter {...footerConfig} />
    </>
  );
}

By combining these template components, you can quickly build a professional landing page without having to design each section from scratch.

Practical Tips for Using the Template System​

1. Start with a Complete Example​

The easiest way to get started is to look at the complete examples in the app/_templates directory:

app/_templates/shipNow/page.tsx  // ShipNowKit style example
app/_templates/notion/page.tsx   // Notion style example

These files show how all the template components work together to create a cohesive page.

2. Copy, Then Customize​

Rather than building from scratch:

  1. Copy the complete example that's closest to your needs
  2. Replace the content with your own
  3. Remove or add sections as needed
  4. Adjust styling to match your brand

3. Use Configuration Objects​

Keep your configuration objects separate from your JSX for better organization:

// Good practice: Define config objects, then use them
const heroConfig = {
  title: "Your Amazing Product",
  subtitle: "Solve problems faster with our solution",
  // more configuration...
};

return <ShipNowLikeHero {...heroConfig} />;

4. Consistent Style Choice​

For a cohesive look, stick to one template style throughout your application. Don't mix different styles on the same page.

Conclusion​

ShipNowKit's Template System provides ready-to-use layouts that help you build professional-looking interfaces without starting from scratch, you can quickly create a cohesive application that looks great and follows best practices.

Templates handle the design and layout concerns, allowing you to focus on your content and business logic. Whether you prefer the bold, modern ShipNowKit style, the clean, minimalist Notion style, or any of the new template styles that will be released in the future, the Template System gives you a head start on creating a beautiful interface.

The Template System is designed to be extensible, with new template styles being developed regularly to address different design needs and industry-specific requirements. This ensures that ShipNowKit can continue to provide fresh, modern design options as design trends evolve.

In the next chapter, we'll explore ShipNowKit's Email System, which helps you create and send professional emails to your users.