Add New Pages to Your Slik Dev-Generated App

Slik Dev generates a complete set of starter pages — Landing, Auth, Dashboard, and Admin — but your product will inevitably need more. Because Slik Dev builds on Next.js App Router, adding a new route is as simple as creating a folder and a file. This guide explains how routing works in your generated app and walks you through building a fully styled Pricing page from scratch using Slik Dev’s existing components and conventions.

How Next.js App Router file-based routing works

In your generated project, every route is defined by the folder structure under app/. A folder named pricing inside app/ creates the route /pricing. The page rendered at that route is the page.tsx file inside that folder.

app/
├── page.tsx          → /
├── auth/
│   └── page.tsx      → /auth
├── dashboard/
│   └── page.tsx      → /dashboard
├── admin/
│   └── page.tsx      → /admin
└── pricing/          ← new folder you create
    └── page.tsx      → /pricing

Each page.tsx must export a default React component. Layout files (layout.tsx) let you wrap multiple routes with shared UI like a Navbar or sidebar. If you want the Pricing page to share the same Navbar and Footer as the Landing page, you can either import them directly into page.tsx or add a layout.tsx at the app/ level.

Next.js App Router uses React Server Components by default. If your page needs client-side interactivity (state, event handlers, animations), add "use client" as the first line of the file.

Step-by-step: creating a Pricing page

Create the route folder and page file

Inside your project, create the directory and file:

mkdir -p app/pricing
touch app/pricing/page.tsx

Open app/pricing/page.tsx in your editor. Because this page will use Framer Motion animations, start with the "use client" directive:

"use client";

Scaffold the page component with Navbar and Footer

Import the shared layout components that Slik Dev already generated for you, then build the basic page wrapper:

"use client";

import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
import { motion } from "framer-motion";
import { Check } from "lucide-react";

export default function PricingPage() {
  return (
    <div className="min-h-screen bg-white dark:bg-[#000000]">
      <Navbar />
      <main className="pt-24 pb-16">
        {/* Page content goes here */}
      </main>
      <Footer />
    </div>
  );
}

The pt-24 on <main> accounts for the fixed Navbar height (64px) plus extra breathing room. All Slik Dev pages use this pattern — keep it consistent on your new pages.

Add the page header section

Following Slik Dev’s section pattern — centered header, short label, large heading, subtext — add a hero header inside <main>:

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* Section header */}
  <div className="text-center mb-16">
    <p className="font-mono text-sm text-emerald-500 font-medium uppercase tracking-widest mb-4">
      Pricing
    </p>
    <h1 className="text-4xl md:text-6xl font-bold tracking-tight mb-6 text-[#09090b] dark:text-white">
      Simple, transparent{" "}
      <span className="bg-gradient-to-r from-emerald-500 to-cyan-500 bg-clip-text text-transparent">
        pricing.
      </span>
    </h1>
    <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
      Start for free. Upgrade when you are ready to ship.
    </p>
  </div>

Build the pricing card grid

Add a three-column card grid below the header. Each card follows the same glass-card styling pattern Slik Dev uses in FeaturesSection.tsx:

  {/* Pricing grid */}
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
    {plans.map((plan, idx) => (
      <motion.div
        key={idx}
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ delay: idx * 0.1, duration: 0.5 }}
        className={`rounded-2xl p-8 border transition-all duration-300 hover:-translate-y-2 ${
          plan.featured
            ? "bg-[#09090b] dark:bg-white/5 border-emerald-500 shadow-[0_10px_40px_-10px_rgba(16,185,129,0.3)]"
            : "bg-white dark:bg-[#09090b] border-gray-200 dark:border-white/10"
        }`}
      >
        <h3 className="text-xl font-bold mb-2 text-[#09090b] dark:text-white">
          {plan.name}
        </h3>
        <p className="text-4xl font-bold mb-1 text-[#09090b] dark:text-white">
          {plan.price}
          <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
            /mo
          </span>
        </p>
        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
          {plan.description}
        </p>
        <ul className="space-y-3 mb-8">
          {plan.features.map((feature, i) => (
            <li key={i} className="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
              <Check className="w-4 h-4 text-emerald-500 flex-shrink-0" />
              {feature}
            </li>
          ))}
        </ul>
        <button className={`w-full py-3 rounded-full text-sm font-semibold transition-all hover:scale-105 ${
          plan.featured
            ? "bg-gradient-to-r from-emerald-500 to-cyan-500 text-white shadow-lg shadow-emerald-500/20"
            : "border border-gray-300 dark:border-white/20 text-[#09090b] dark:text-white"
        }`}>
          {plan.cta}
        </button>
      </motion.div>
    ))}
  </div>
</div>

Define the plans data array above the component:

const plans = [
  {
    name: "Hobby",
    price: "$0",
    description: "For side projects and early exploration.",
    features: ["1 project", "5,000 requests/mo", "Community support"],
    cta: "Get started free",
    featured: false,
  },
  {
    name: "Pro",
    price: "$29",
    description: "For teams shipping production apps.",
    features: ["Unlimited projects", "500,000 requests/mo", "Priority support", "Custom domains"],
    cta: "Start free trial",
    featured: true,
  },
  {
    name: "Enterprise",
    price: "$99",
    description: "For organizations at scale.",
    features: ["Everything in Pro", "SSO & SAML", "SLA guarantee", "Dedicated support"],
    cta: "Contact sales",
    featured: false,
  },
];

Add a navigation link in the Navbar

Open components/layout/Navbar.tsx and add a link to /pricing in both the desktop nav and the mobile menu:

<a href="/#features" className="text-sm font-medium ...">Features</a>
<Link to="/preview" className="text-sm font-medium ...">Preview</Link>
<a href="/#docs" className="text-sm font-medium ...">Documentation</a>

<a href="/#features" className="text-sm font-medium ...">Features</a>
<Link to="/preview" className="text-sm font-medium ...">Preview</Link>
<Link to="/pricing" className="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors">
  Pricing
</Link>
<a href="/#docs" className="text-sm font-medium ...">Documentation</a>

Add the same link inside the mobile menu block (the md:hidden div) so it appears consistently across all screen sizes.

Creating a new UI component in Slik’s style

When you need a reusable component that does not yet exist in your components/ folder, follow Slik Dev’s conventions: TypeScript props interface, Tailwind for styling, Framer Motion for animation, and Lucide React for icons. Here is a minimal example — a Badge component that signals plan status:

// components/ui/Badge.tsx
"use client";

import { motion } from "framer-motion";
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

interface BadgeProps {
  label: string;
  variant?: "success" | "info" | "warning";
}

export function Badge({ label, variant = "success" }: BadgeProps) {
  const colors = {
    success: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
    info: "bg-cyan-500/10 text-cyan-500 border-cyan-500/20",
    warning: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
  };

  return (
    <motion.span
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.2 }}
      className={twMerge(
        clsx(
          "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border",
          colors[variant]
        )
      )}
    >
      {label}
    </motion.span>
  );
}

Place new components in components/ui/ for generic elements (buttons, badges, modals) and in components/layout/ for structural elements (Navbar, Footer, Sidebar). This matches the folder convention Slik Dev generates.

Get Started

Configuration

Guides

Reference

Add New Pages to Your Slik Dev-Generated App

How Next.js App Router file-based routing works

Step-by-step: creating a Pricing page

Creating a new UI component in Slik’s style

​How Next.js App Router file-based routing works

​Step-by-step: creating a Pricing page

​Creating a new UI component in Slik’s style

How Next.js App Router file-based routing works

Step-by-step: creating a Pricing page

Creating a new UI component in Slik’s style