Customize

This guide provides instructions on customizing our application.

Page

Start customization your project with /components folder. Because of all the home page components inside in this folder.

Check /public path for all the images of project like logo, icon, og-image, default avatar and etc.

Title, description and icon

To change title, description and icon of the project edit your /app/layout.tsx file:

layout.tsx
export const metadata: Metadata = {
  title: 'NeoSaaS - Modern SaaS Starter',
  description: 'A modern SaaS starter kit built with Next.js, TypeScript, Supabase and Tailwind CSS',
  icons: {
    icon: '/icon.png',}
  }

Open-Graph Image

To change og-image of the project edit your /app/layout.tsx file:

layout.tsx
openGraph: {
    title: 'NeoSaaS - Modern SaaS Starter',
    description: 'A modern SaaS starter kit built with Next.js, TypeScript, Supabase and Tailwind CSS',
    images: [
      {
        url: '/og-image.png',
        width: 1200,
        height: 630,
        alt: 'NeoSaaS Preview',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'NeoSaaS - Modern SaaS Starter',
    description: 'A modern SaaS starter kit built with Next.js, TypeScript, Supabase and Tailwind CSS',
    images: ['/og-image.png'],
    creator: '@neosaas',
  },

Theme

If you want to change complete theme of the project we recommend to use Shadcn UI Theme Generator.

 https://zippystarter.com/tools/shadcn-ui-theme-generator