Theme Your Website

💡

Customizing the NextSaaS boilerplate is simple. We've made everything configurable without overengineering the boilerplate.

Site Configuration

The site.ts file provides a single configuration file to customize various aspects of your site, such as the site name, description, URL, contact information, creator details, menus, and SEO keywords. Here's an example snippet from src/config/site.ts:

src/config/site.ts

...
export const SITE = {
  name: "NextSaaS",
  description:
    "The ultimate open source SaaS starter built with your favourite tech stack",
  url: ENV.NEXT_PUBLIC_APP_URL,
  address: "",
  email: "hello@nextsaas.live",
  creator: "xjasonsong",
  keywords: [
    "Next.js starter",
    "SaaS boilerplate",
    "SaaS starter",
    "React starter",
  ],
};
...
export const MENUS = {
  mainNavigation: [ROUTES.features, ROUTES.pricing, ROUTES.faq, ROUTES.docs],
  dashboardNavigation: [ROUTES.dashboard, ROUTES.subscription, ROUTES.settings],
  footNavigation: [
    ROUTES.features,
    ROUTES.pricing,
    ROUTES.faq,
    ROUTES.docs,
    ROUTES.terms,
    ROUTES.privaryPolicy,
  ],
};
...

Themes

The NextSaaS boilerplate comes with built-in support for light and dark themes. By default, it uses the system's default theme. However, users can manually change the theme preference, which will be persisted in their local storage.

Thanks to Tailwind CSS and DaisyUI, there are over 30 themes available for immediate use. You can find more information about these themes here (opens in a new tab).

Themes

One Time or Recurring Payment Internationalization