Customization

Site Configuration

Edit src/config/site.ts to change your app's name, description, and behavior:

export const siteConfig = {
  name: 'Your App Name',
  description: 'Your app description',
  supportEmail: 'support@yourdomain.com',

  theme: {
    default: 'system',
    lightTheme: 'corporate',
    darkTheme: 'business',
  },

  locale: {
    default: 'en',
    supported: [
      { value: 'en', label: 'English' },
      { value: 'zh', label: 'Chinese' },
    ],
  },
}

Styling

TikShip uses TailwindCSS + DaisyUI:

• Global styles: src/app/globals.css
• DaisyUI themes: 33 built-in themes available

Switch themes by changing lightTheme / darkTheme in siteConfig. All DaisyUI theme names are supported.

UI Components

Base components live in src/components/ui/. Prefer using them instead of raw HTML elements:

import { Button } from '@/components/ui/Button'

<Button variant="primary" loading={isSubmitting}>
  Save
</Button>

Available components: Button, Input, Card, Modal, Table, Pagination, Alert, Badge, and more.

Translations

All user-visible text lives in src/locales/. Add new keys to both en.json and zh.json:

// src/locales/en.json
{
  "header": {
    "my_new_item": "My New Item"
  }
}

const t = useTranslations('header')
t('my_new_item') // "My New Item"

Logo & Branding

Replace public/logo.svg and public/favicon.svg with your own assets. The Logo component at src/components/ui/Logo.tsx will pick them up automatically.