Basic Configuration

This page covers the brand and locale settings in config.ts: application name, logo, theme, and internationalization.

Application basics

Set these before you ship. They show up in the header, page titles, and email templates.

Application name

// config.ts
export const config = {
  app: {
    name: 'TinyShip',  // Your product name
  }
}

The checked-in value has a leading space (' TinyShip'). Trim it if you do not want that gap next to the logo.

Logo

Use an icon plus the app name, or a full logo image.

// config.ts — values currently in the repo
export const config = {
  app: {
    logo: {
      /**
       * Path under public/, or an absolute URL.
       * Square icon, about 40x40.
       */
      iconUrl: '/logo.svg',

      /**
       * Optional full lockup (icon + wordmark), about 200x40.
       * Empty string keeps icon + app.name.
       */
      fullLogoUrl: '' as string | undefined,

      /**
       * Tailwind classes on the icon container.
       */
      iconClassName: 'bg-brand-action rounded-md p-2' as string,
    },
  }
}

Replace the files

1. Prepare an icon (about 40x40, SVG preferred) and, if you want it, a 200x40 lockup.
2. Copy the same files into:
   • apps/next-app/public/
   • apps/nuxt-app/public/
   • apps/tanstack-app/public/
   • apps/docs-app/public/
3. Point iconUrl (and fullLogoUrl if you use it) at those paths.

Theme

config.ts sets the default mode, color scheme, and the localStorage key:

// config.ts
export const config = {
  app: {
    theme: {
      defaultTheme: 'light' as const,                 // 'light' | 'dark'
      defaultColorScheme: 'coss-orange' as const,     // shipped default
      storageKey: 'tinyship-ui-theme-v6'              // browser persistence key
    }
  }
}

Color schemes that exist both in the config.ts union and under libs/ui/styles/themes/:

default, claude, cursor, vermilion-ink, black-cherry, brass-ledger, planetscale, coss-orange, cosmic-night, modern-minimal, ocean-breeze, perplexity.

coss-orange is the default in config.ts.

Custom theme

1. Open the tweakcn theme editor.
2. Adjust colors and export CSS.
3. Add a file under libs/ui/styles/themes/.
4. Register the new scheme name anywhere defaultColorScheme is typed.

Internationalization

Supported locales are English and Simplified Chinese.

• English (en) — default for gettinyship.dev
• 简体中文 (zh-CN) — use this for a China host such as tinyship.cn

libs/i18n/index.ts exports defaultLocale = 'en'. config.ts resolves the app default in this order: DEFAULT_LOCALE, then SALES_REGION, then the APP_BASE_URL host, then 'en'. A host of gettinyship.dev resolves to English. A host of tinyship.cn resolves to zh-CN.

For the English site, the value you want is:

// config.ts — gettinyship.dev
export const config = {
  app: {
    i18n: {
      defaultLocale: 'en' as const,       // 'en' | 'zh-CN'
      locales: ['en', 'zh-CN'] as const,
      cookieKey: 'NEXT_LOCALE',           // shared by Next.js and Nuxt
      autoDetect: false                   // cookie wins once set; no browser sniffing when false
    }
  }
}

To force Chinese on a China deploy, set DEFAULT_LOCALE=zh-CN or point APP_BASE_URL at a tinyship.cn host. Do not hardcode 'zh-CN' for gettinyship.dev.

Add a translation

1. Add the English string in libs/i18n/locales/en.ts (this file drives the types).
2. Add the same key in libs/i18n/locales/zh-CN.ts.
3. Restart the dev server.

Usage notes live in libs/i18n/README_EN.md.

Summary

• Name and logo live on config.app and must be copied into each app's public/ folder.
• Theme defaults to light + coss-orange, persisted as tinyship-ui-theme-v6.
• Locale defaults to defaultLocale: 'en' for gettinyship.dev.

config.ts keeps name, theme, and i18n. Payments, auth, storage, and the other services live in files under config/.