Website Configuration

The main configuration file that contains the core settings for the website.

TanStarter has already set up the default core settings for you, and you can customize the core settings in this file src/config/website.ts.

src/config/website.ts

export const websiteConfig: WebsiteConfig = {
  ui: {
    // UI settings
  },
  metadata: {
    // Metadata settings
  },
  social: {
    // Social media settings
  },
  auth: {
    // Auth settings
  },
  blog: {
    // Blog settings
  },
  affiliates: {
    // Affiliates settings
  },
  mail: {
    // Mail settings
  },
  newsletter: {
    // Newsletter settings
  },
  notification: {
    // Notification settings
  },
  storage: {
    // Storage settings
  },
  payment: {
    // Payment settings
  },
};

UI

Controls the appearance of your website.

Mode

Controls the light/dark mode settings:

Property	Type	Description
`defaultMode`	`'light' \| 'dark' \| 'system'`	Sets the default display mode
`enableSwitch`	`boolean`	When true, allows users to toggle between light/dark modes

Example:

src/config/website.ts

ui: {
  mode: {
    defaultMode: 'system', // Choose from: light, dark, system
    enableSwitch: true,    // Allow users to switch modes
  },
}

Metadata

Controls the metadata of your website. The metadata configuration consists of several subsections:

Basic Information

Defines the basic metadata for the website:

Property	Type	Description
`name`	`string`	Website name, used for branding
`title`	`string`	Website title, used for browser tabs and SEO
`description`	`string`	Website description, used for search engines and social media previews

Example:

src/config/website.ts

metadata: {
  name: messages.site.name,
  title: messages.site.title,
  description: messages.site.description,
  // ...
}

Images

Defines the images used for branding and social sharing:

Property	Type	Description
`ogImage`	`string`	URL to the Open Graph image used for social media previews
`logoLight`	`string`	URL to your logo image for light mode
`logoDark`	`string`	URL to your logo image for dark mode

Example:

src/config/website.ts

metadata: {
  images: {
    ogImage: '/og.png',      // Open Graph image for social sharing
    logoLight: '/logo.png',  // Logo displayed in light mode
    logoDark: '/logo-dark.png', // Logo displayed in dark mode
  },
  // ...
}

You can find more about customizing the images in the Images documentation.

Configure links to your social media profiles. In TanStarter, social is a top-level key in websiteConfig (not nested under metadata):

Property	Type	Description
`github`	`string`	URL to GitHub profile or repository
`twitter`	`string`	URL to Twitter/X profile
`blueSky`	`string`	URL to Bluesky profile
`discord`	`string`	URL to Discord server
`mastodon`	`string`	URL to Mastodon profile
`linkedin`	`string`	URL to LinkedIn profile
`youtube`	`string`	URL to YouTube channel
`facebook`	`string`	URL to Facebook page
`instagram`	`string`	URL to Instagram profile
`tiktok`	`string`	URL to TikTok profile
`telegram`	`string`	URL to Telegram group or channel

Example:

src/config/website.ts

social: {
  github: 'https://github.com/YourOrganization',
  twitter: 'https://x.com/YourHandle',
  discord: 'https://discord.gg/your-invitation-code',
  youtube: 'https://youtube.com/@YourChannel',
}

These social media links are used by the Social Media Configuration to generate the appropriate links across the website.

Auth

Configure authentication options for your website:

Property	Type	Description
`enable`	`boolean`	When true, enables authentication
`enableGoogleLogin`	`boolean`	When true, enables Google login
`enableCredentialLogin`	`boolean`	When true, enables credential login
`enableDeleteAccount`	`boolean`	When true, allows users to delete their account

Example:

src/config/website.ts

auth: {
  enable: true,
  enableGoogleLogin: true,
  enableCredentialLogin: true,
  enableDeleteAccount: true,
}

TanStarter supports Google OAuth and email/password authentication. You can selectively disable specific providers using these configuration options:

Set enableGoogleLogin to false to remove Google login option
Set enableCredentialLogin to false to remove credential login

Note: Please ensure at least one login method is enabled, otherwise users will not be able to log in.

You can find more about authentication options in the Authentication documentation.

Blog

Configure the blog functionality:

Property	Type	Description
`enable`	`boolean`	Whether to enable the blog or not, default is `true`
`paginationSize`	`number`	Number of posts to display per page

Example:

src/config/website.ts

blog: {
  enable: true,
  paginationSize: 6,
}

If you don't need the blog functionality, you can set enable to false, then the blog menus will not be shown in the navbar and footer, and the blog related pages will not be included in the sitemap.

You can find more about blog configuration in the Blog documentation.

Mail

Configure email services:

Property	Type	Description
`enable`	`boolean`	Whether to enable email functionality, default is `true`
`provider`	`'resend'`	Email service provider (currently only Resend is supported)
`fromEmail`	`string`	Contact email for sending emails
`supportEmail`	`string`	Contact email for receiving emails

Example:

mail: {
  enable: true,
  provider: 'resend',
  fromEmail: 'contact@example.com',
  supportEmail: 'support@example.com',
}

You can find more about mail configuration in the Email documentation.

Configure newsletter services:

Property	Type	Description
`enable`	`boolean`	Whether to enable the newsletter or not, default is `true`
`provider`	`'resend'`	Newsletter service provider (currently only Resend is supported)
`autoSubscribeAfterSignUp`	`boolean`	Whether to automatically subscribe users after sign up

Example:

src/config/website.ts

newsletter: {
  enable: true,
  provider: 'resend',
  autoSubscribeAfterSignUp: true,
}

If you don't need the newsletter functionality, you can set enable to false, then the subscription status will not be shown in the notification settings page.

You can find more about newsletter configuration in the Newsletter documentation.

Storage

Configure file storage:

Property	Type	Description
`enable`	`boolean`	Whether to enable the storage or not, default is `true`
`provider`	`'r2'`	Storage provider (currently only R2 is supported)
`maxFileSize`	`number`	Maximum file size in bytes
`allowedTypes`	`string[]`	Allowed file MIME types
`userFilesFolder`	`string`	Folder name for user uploaded files

Example:

src/config/website.ts

storage: {
  enable: true,
  provider: 'r2',
  maxFileSize: DEFAULT_MAX_FILE_SIZE,
  allowedTypes: DEFAULT_ALLOWED_TYPES,
  userFilesFolder: DEFAULT_USER_FILES_FOLDER,
}

If you don't need the storage functionality, you can set enable to false, then the update avatar functionality in the settings page will not be available.

You can find more about storage configuration in the Storage documentation.

Notification

Configure notification services:

Property	Type	Description
`enable`	`boolean`	Whether to enable notification functionality, default is `true`
`provider`	`'discord'`	Notification provider (currently only Discord is supported)

Example:

src/config/website.ts

notification: {
  enable: true,
  provider: 'discord',
}

You can find more about notification configuration in the Notification documentation.

Affiliates

Configure affiliate program settings:

Property	Type	Description
`enable`	`boolean`	Whether to enable affiliate functionality, default is `false`
`provider`	`'affonso' \| 'promotekit'`	The affiliate provider to use

Example:

src/config/website.ts

affiliates: {
  enable: true,
  provider: 'affonso', // or 'promotekit'
}

You can find more about affiliates configuration in the Affiliates documentation.

Payment

Configure payment processing services. The payment section includes both the payment provider settings and price plan configuration:

Property	Type	Description
`enable`	`boolean`	Whether to enable the payment or not, default is `true`
`provider`	`'stripe'`	Payment processor (currently only Stripe is supported)
`price`	`object`	Price plans configuration (see below)

Example:

src/config/website.ts

payment: {
  enable: true,
  provider: 'stripe',
  price: {
    plans: {
      // ... price plans
    },
  },
}

You can find more about payment configuration in the Payment documentation.

Price Plans

Each price plan in the payment.price.plans object can have the following properties:

Property	Type	Description
`id`	`string`	Unique identifier for the plan
`name`	`string?`	Display name of the plan
`description`	`string?`	Description of the plan features
`features`	`string[]?`	List of features included in this plan
`limits`	`string[]?`	List of limits for this plan
`prices`	`Price[]`	List of price options for the plan (monthly, yearly, one-time, etc.)
`isFree`	`boolean`	Whether this is a free plan
`isLifetime`	`boolean`	Whether this is a lifetime (one-time payment) plan
`popular`	`boolean?`	Whether to highlight this plan as popular
`disabled`	`boolean?`	Whether to disable this plan in UI

The prices array contains objects with the following structure:

Property	Type	Description
`type`	`'subscription' \| 'one_time'`	Type of payment (subscription or one-time)
`priceId`	`string`	Stripe price ID (not product ID)
`amount`	`number`	Price amount in currency units (dollars, euros, etc.)
`currency`	`string`	Currency code (e.g., USD)
`interval`	`'month' \| 'year'?`	Billing interval for recurring payments
`trialPeriodDays`	`number?`	Free trial period in days
`allowPromotionCode`	`boolean?`	Whether to allow promotion code for this price
`disabled`	`boolean?`	Whether to disable this price in UI

TanStarter uses three price plans by default: Free plan, Pro subscription plan (monthly/yearly), and Lifetime plan (one-time payment), as shown in the website configuration:

src/config/website.ts

price: {
  plans: {
    free: {
      id: 'free',
      prices: [],
      isFree: true,
      isLifetime: false,
    },
    pro: {
      id: 'pro',
      prices: [
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_MONTHLY!,
          amount: 990,
          currency: 'USD',
          interval: 'month',
          trialPeriodDays: 7,
        },
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_YEARLY!,
          amount: 9900,
          currency: 'USD',
          interval: 'year',
          trialPeriodDays: 7,
        },
      ],
      isFree: false,
      isLifetime: false,
      popular: true,
    },
    lifetime: {
      id: 'lifetime',
      prices: [
        {
          type: 'one_time',
          priceId: clientEnv.VITE_STRIPE_PRICE_LIFETIME!,
          amount: 19900,
          currency: 'USD',
          allowPromotionCode: true,
        },
      ],
      isFree: false,
      isLifetime: true,
    },
  },
},

When to set price plans or prices as disabled?

Set a price plan to disabled: true when the price plan is not available for new customers, but you need to keep it for existing users who have already purchased it.
Set a price to disabled: true when that specific price is not available anymore, but existing subscribers on that price should still be able to see it in the billing page.

You can find more about price configuration in the Payment documentation.

Next Steps

Now that you understand the website configuration, explore these related topics:

Navbar Configuration

Configure the navigation menu in the header

Footer Configuration

Configure the links in the website footer

Payment Integration

Set up payment processing with Stripe

Sidebar Configuration

Configure the navigation menu for dashboard

The main configuration file that contains the core settings for the website.

TanStarter has already set up the default core settings for you, and you can customize the core settings in this file src/config/website.ts.

src/config/website.ts

export const websiteConfig: WebsiteConfig = {
  ui: {
    // UI settings
  },
  metadata: {
    // Metadata settings
  },
  social: {
    // Social media settings
  },
  auth: {
    // Auth settings
  },
  blog: {
    // Blog settings
  },
  affiliates: {
    // Affiliates settings
  },
  mail: {
    // Mail settings
  },
  newsletter: {
    // Newsletter settings
  },
  notification: {
    // Notification settings
  },
  storage: {
    // Storage settings
  },
  payment: {
    // Payment settings
  },
};

UI

Controls the appearance of your website.

Mode

Controls the light/dark mode settings:

Property	Type	Description
`defaultMode`	`'light' \| 'dark' \| 'system'`	Sets the default display mode
`enableSwitch`	`boolean`	When true, allows users to toggle between light/dark modes

Example:

src/config/website.ts

ui: {
  mode: {
    defaultMode: 'system', // Choose from: light, dark, system
    enableSwitch: true,    // Allow users to switch modes
  },
}

Metadata

Controls the metadata of your website. The metadata configuration consists of several subsections:

Basic Information

Defines the basic metadata for the website:

Property	Type	Description
`name`	`string`	Website name, used for branding
`title`	`string`	Website title, used for browser tabs and SEO
`description`	`string`	Website description, used for search engines and social media previews

Example:

src/config/website.ts

metadata: {
  name: messages.site.name,
  title: messages.site.title,
  description: messages.site.description,
  // ...
}

Images

Defines the images used for branding and social sharing:

Property	Type	Description
`ogImage`	`string`	URL to the Open Graph image used for social media previews
`logoLight`	`string`	URL to your logo image for light mode
`logoDark`	`string`	URL to your logo image for dark mode

Example:

src/config/website.ts

metadata: {
  images: {
    ogImage: '/og.png',      // Open Graph image for social sharing
    logoLight: '/logo.png',  // Logo displayed in light mode
    logoDark: '/logo-dark.png', // Logo displayed in dark mode
  },
  // ...
}

You can find more about customizing the images in the Images documentation.

Configure links to your social media profiles. In TanStarter, social is a top-level key in websiteConfig (not nested under metadata):

Property	Type	Description
`github`	`string`	URL to GitHub profile or repository
`twitter`	`string`	URL to Twitter/X profile
`blueSky`	`string`	URL to Bluesky profile
`discord`	`string`	URL to Discord server
`mastodon`	`string`	URL to Mastodon profile
`linkedin`	`string`	URL to LinkedIn profile
`youtube`	`string`	URL to YouTube channel
`facebook`	`string`	URL to Facebook page
`instagram`	`string`	URL to Instagram profile
`tiktok`	`string`	URL to TikTok profile
`telegram`	`string`	URL to Telegram group or channel

Example:

src/config/website.ts

social: {
  github: 'https://github.com/YourOrganization',
  twitter: 'https://x.com/YourHandle',
  discord: 'https://discord.gg/your-invitation-code',
  youtube: 'https://youtube.com/@YourChannel',
}

These social media links are used by the Social Media Configuration to generate the appropriate links across the website.

Auth

Configure authentication options for your website:

Property	Type	Description
`enable`	`boolean`	When true, enables authentication
`enableGoogleLogin`	`boolean`	When true, enables Google login
`enableCredentialLogin`	`boolean`	When true, enables credential login
`enableDeleteAccount`	`boolean`	When true, allows users to delete their account

Example:

src/config/website.ts

auth: {
  enable: true,
  enableGoogleLogin: true,
  enableCredentialLogin: true,
  enableDeleteAccount: true,
}

TanStarter supports Google OAuth and email/password authentication. You can selectively disable specific providers using these configuration options:

Set enableGoogleLogin to false to remove Google login option
Set enableCredentialLogin to false to remove credential login

Note: Please ensure at least one login method is enabled, otherwise users will not be able to log in.

You can find more about authentication options in the Authentication documentation.

Blog

Configure the blog functionality:

Property	Type	Description
`enable`	`boolean`	Whether to enable the blog or not, default is `true`
`paginationSize`	`number`	Number of posts to display per page

Example:

src/config/website.ts

blog: {
  enable: true,
  paginationSize: 6,
}

You can find more about blog configuration in the Blog documentation.

Mail

Configure email services:

Property	Type	Description
`enable`	`boolean`	Whether to enable email functionality, default is `true`
`provider`	`'resend'`	Email service provider (currently only Resend is supported)
`fromEmail`	`string`	Contact email for sending emails
`supportEmail`	`string`	Contact email for receiving emails

Example:

mail: {
  enable: true,
  provider: 'resend',
  fromEmail: 'contact@example.com',
  supportEmail: 'support@example.com',
}

You can find more about mail configuration in the Email documentation.

Configure newsletter services:

Property	Type	Description
`enable`	`boolean`	Whether to enable the newsletter or not, default is `true`
`provider`	`'resend'`	Newsletter service provider (currently only Resend is supported)
`autoSubscribeAfterSignUp`	`boolean`	Whether to automatically subscribe users after sign up

Example:

src/config/website.ts

newsletter: {
  enable: true,
  provider: 'resend',
  autoSubscribeAfterSignUp: true,
}

If you don't need the newsletter functionality, you can set enable to false, then the subscription status will not be shown in the notification settings page.

You can find more about newsletter configuration in the Newsletter documentation.

Storage

Configure file storage:

Property	Type	Description
`enable`	`boolean`	Whether to enable the storage or not, default is `true`
`provider`	`'r2'`	Storage provider (currently only R2 is supported)
`maxFileSize`	`number`	Maximum file size in bytes
`allowedTypes`	`string[]`	Allowed file MIME types
`userFilesFolder`	`string`	Folder name for user uploaded files

Example:

src/config/website.ts

storage: {
  enable: true,
  provider: 'r2',
  maxFileSize: DEFAULT_MAX_FILE_SIZE,
  allowedTypes: DEFAULT_ALLOWED_TYPES,
  userFilesFolder: DEFAULT_USER_FILES_FOLDER,
}

If you don't need the storage functionality, you can set enable to false, then the update avatar functionality in the settings page will not be available.

You can find more about storage configuration in the Storage documentation.

Notification

Configure notification services:

Property	Type	Description
`enable`	`boolean`	Whether to enable notification functionality, default is `true`
`provider`	`'discord'`	Notification provider (currently only Discord is supported)

Example:

src/config/website.ts

notification: {
  enable: true,
  provider: 'discord',
}

You can find more about notification configuration in the Notification documentation.

Affiliates

Configure affiliate program settings:

Property	Type	Description
`enable`	`boolean`	Whether to enable affiliate functionality, default is `false`
`provider`	`'affonso' \| 'promotekit'`	The affiliate provider to use

Example:

src/config/website.ts

affiliates: {
  enable: true,
  provider: 'affonso', // or 'promotekit'
}

You can find more about affiliates configuration in the Affiliates documentation.

Payment

Configure payment processing services. The payment section includes both the payment provider settings and price plan configuration:

Property	Type	Description
`enable`	`boolean`	Whether to enable the payment or not, default is `true`
`provider`	`'stripe'`	Payment processor (currently only Stripe is supported)
`price`	`object`	Price plans configuration (see below)

Example:

src/config/website.ts

payment: {
  enable: true,
  provider: 'stripe',
  price: {
    plans: {
      // ... price plans
    },
  },
}

You can find more about payment configuration in the Payment documentation.

Price Plans

Each price plan in the payment.price.plans object can have the following properties:

Property	Type	Description
`id`	`string`	Unique identifier for the plan
`name`	`string?`	Display name of the plan
`description`	`string?`	Description of the plan features
`features`	`string[]?`	List of features included in this plan
`limits`	`string[]?`	List of limits for this plan
`prices`	`Price[]`	List of price options for the plan (monthly, yearly, one-time, etc.)
`isFree`	`boolean`	Whether this is a free plan
`isLifetime`	`boolean`	Whether this is a lifetime (one-time payment) plan
`popular`	`boolean?`	Whether to highlight this plan as popular
`disabled`	`boolean?`	Whether to disable this plan in UI

The prices array contains objects with the following structure:

Property	Type	Description
`type`	`'subscription' \| 'one_time'`	Type of payment (subscription or one-time)
`priceId`	`string`	Stripe price ID (not product ID)
`amount`	`number`	Price amount in currency units (dollars, euros, etc.)
`currency`	`string`	Currency code (e.g., USD)
`interval`	`'month' \| 'year'?`	Billing interval for recurring payments
`trialPeriodDays`	`number?`	Free trial period in days
`allowPromotionCode`	`boolean?`	Whether to allow promotion code for this price
`disabled`	`boolean?`	Whether to disable this price in UI

TanStarter uses three price plans by default: Free plan, Pro subscription plan (monthly/yearly), and Lifetime plan (one-time payment), as shown in the website configuration:

src/config/website.ts

price: {
  plans: {
    free: {
      id: 'free',
      prices: [],
      isFree: true,
      isLifetime: false,
    },
    pro: {
      id: 'pro',
      prices: [
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_MONTHLY!,
          amount: 990,
          currency: 'USD',
          interval: 'month',
          trialPeriodDays: 7,
        },
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_YEARLY!,
          amount: 9900,
          currency: 'USD',
          interval: 'year',
          trialPeriodDays: 7,
        },
      ],
      isFree: false,
      isLifetime: false,
      popular: true,
    },
    lifetime: {
      id: 'lifetime',
      prices: [
        {
          type: 'one_time',
          priceId: clientEnv.VITE_STRIPE_PRICE_LIFETIME!,
          amount: 19900,
          currency: 'USD',
          allowPromotionCode: true,
        },
      ],
      isFree: false,
      isLifetime: true,
    },
  },
},

When to set price plans or prices as disabled?

Set a price plan to disabled: true when the price plan is not available for new customers, but you need to keep it for existing users who have already purchased it.
Set a price to disabled: true when that specific price is not available anymore, but existing subscribers on that price should still be able to see it in the billing page.

You can find more about price configuration in the Payment documentation.

UI

Mode

Metadata

Basic Information

Images

Auth

Blog

Mail

Storage

Notification

Affiliates

Payment

Price Plans

Next Steps

Navbar Configuration

Footer Configuration

Payment Integration

Sidebar Configuration

Table of Contents

Website Configuration

UI

Mode

Metadata

Basic Information

Images

Auth

Blog

Mail

Storage

Notification

Affiliates

Payment

Price Plans

Next Steps

Navbar Configuration

Footer Configuration

Payment Integration

Sidebar Configuration

Table of Contents