Configuration Overview

Configuration Approach

All configuration is centralized in the src/config.ts file, defined by the LinchDesktopConfig type:

import type { LinchDesktopConfig } from '@linch-tech/desktop-core';

export const config: Partial<LinchDesktopConfig> = {
  brand: { ... },
  nav: [...],
  features: { ... },
  theme: { ... },
  layout: { ... },
  slots: { ... },
  components: { ... },
  i18n: { ... },
  database: { ... },
  sentry: { ... },
};

Pass the configuration object to LinchDesktopProvider:

import { LinchDesktopProvider } from '@linch-tech/desktop-core';
import { config } from './config';

function App() {
  return (
    <LinchDesktopProvider config={config}>
      {/* App content */}
    </LinchDesktopProvider>
  );
}

Complete Type Definition

interface LinchDesktopConfig {
  // Brand configuration (required)
  brand: BrandConfig;

  // Navigation configuration (required)
  nav: NavItem[];

  // Feature toggles
  features?: FeaturesConfig;

  // Theme configuration
  theme?: ThemeConfig;

  // Layout configuration
  layout?: LayoutConfig;

  // Slots configuration
  slots?: SlotsConfig;

  // Component overrides
  components?: ComponentOverrides;

  // i18n configuration
  i18n?: I18nConfig;

  // Database configuration
  database?: DatabaseConfig;

  // Sentry configuration
  sentry?: SentryConfig;
}

Configuration Overview

Option	Required	Description
`brand`	Yes	App brand info (name, logo, version)
`nav`	Yes	Sidebar navigation items
`features`	No	Feature toggles (database, updater, Sentry)
`theme`	No	Theme customization (colors, radius, fonts)
`layout`	No	Layout settings (sidebar, title bar)
`slots`	No	Content slot injection
`components`	No	Component overrides
`i18n`	No	Internationalization settings
`database`	No	Database configuration
`sentry`	No	Error monitoring configuration

Minimal Configuration Example

Only brand and nav are required to run:

import { Home } from 'lucide-react';
import type { LinchDesktopConfig } from '@linch-tech/desktop-core';

export const config: Partial<LinchDesktopConfig> = {
  brand: {
    name: 'My App',
  },
  nav: [
    { title: 'Home', path: '/', icon: Home },
  ],
};

Complete Configuration Example

import { Home, Settings, Database } from 'lucide-react';
import type { LinchDesktopConfig } from '@linch-tech/desktop-core';
import { MyLogo } from './components/Logo';

export const config: Partial<LinchDesktopConfig> = {
  brand: {
    name: 'app.name',
    logo: MyLogo,
    version: `v${__APP_VERSION__}`,
  },

  nav: [
    { title: 'app.home', path: '/', icon: Home },
    { title: 'app.database', path: '/database', icon: Database },
    { title: 'settings.title', path: '/settings', icon: Settings },
  ],

  features: {
    updater: true,
    database: true,
    sentry: false,
  },

  theme: {
    colors: {
      primary: '#3b82f6',
    },
    radius: 'md',
  },

  layout: {
    sidebar: {
      width: 200,
      position: 'left',
    },
    titleBar: {
      height: 40,
      showWindowControls: true,
      draggable: true,
    },
  },

  i18n: {
    defaultLanguage: 'zh',
    supportedLanguages: ['zh', 'en'],
    resources: {
      en: {
        app: {
          name: 'My App',
          home: 'Home',
          database: 'Database',
        },
      },
      zh: {
        app: {
          name: '我的应用',
          home: '首页',
          database: '数据库',
        },
      },
    },
  },

  database: {
    name: 'app.db',
    migrations: [],
  },
};

Accessing Configuration

Use the useConfig hook to access current configuration in components:

import { useConfig } from '@linch-tech/desktop-core';

function MyComponent() {
  const config = useConfig();
  return <div>{config.brand.name}</div>;
}

Configuration Overview

Configuration Approach

Complete Type Definition

Configuration Overview

Minimal Configuration Example

Complete Configuration Example

Accessing Configuration

Next Steps

Brand Configuration

Navigation Configuration

Feature Toggles

On this page