Shared Components

Overview

Linch Desktop Core provides some reusable business components.

Logo

Application Logo component, displays a simple icon by default.

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

<Logo className="h-6 w-6" />

Custom Logo:

// src/config.ts
import { MyLogo } from './components/Logo';

brand: {
  logo: MyLogo,
},

PageHeader

Page header component.

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

<PageHeader
  title="Page Title"
  description="Page description text"
/>

// With action button
<PageHeader
  title="User Management"
  description="Manage all users in the system"
>
  <Button>Add User</Button>
</PageHeader>

Props:

interface PageHeaderProps {
  title: string;
  description?: string;
  children?: ReactNode;  // Right action area
  className?: string;
}

ThemeSwitcher

Theme switcher component, toggles between light/dark/system themes.

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

<ThemeSwitcher />

Displayed on the right side of TitleBar by default, can also be used standalone.

LanguageSwitcher

Language switcher component, changes application language.

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

<LanguageSwitcher />

Shows available language options based on i18n.supportedLanguages configuration.

WindowControls

Window control buttons component (minimize, maximize, close).

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

<WindowControls />

Usually not needed standalone, built into TitleBar. Import this component when customizing TitleBar.

Usage Examples

Page Layout

import { ScrollArea, PageHeader, Button } from '@linch-tech/desktop-core';

function UsersPage() {
  return (
    <ScrollArea className="flex-1">
      <div className="p-6">
        <PageHeader
          title="User Management"
          description="View and manage system users"
        >
          <Button>Add User</Button>
        </PageHeader>

        <div className="mt-6">
          {/* Page content */}
        </div>
      </div>
    </ScrollArea>
  );
}

Custom Title Bar

import { WindowControls, ThemeSwitcher, LanguageSwitcher } from '@linch-tech/desktop-core';

function CustomTitleBar() {
  return (
    <header className="flex h-10 items-center justify-between border-b px-3" data-tauri-drag-region>
      <div className="flex items-center gap-2">
        <MyLogo className="h-5 w-5" />
        <span className="font-semibold">My App</span>
      </div>

      <div className="flex items-center gap-1">
        <LanguageSwitcher />
        <ThemeSwitcher />
        <WindowControls />
      </div>
    </header>
  );
}

Shared Components

On this page