Katalyst

Appearance

App Layouts Pattern ​

Katalyst provides a powerful layout system that allows you to switch between multiple application structures instantly. The AppLayout component serves as the central orchestrator, rendering the appropriate layout family and variant based on the current configuration.

Overview ​

The layout system is built around:

  • Layout Families: High-level structures (Vertical vs Horizontal)
  • Layout Variants: Visual styles within a family (Boxed, Edge, Dark, Gradient, etc.)
  • Layout Context: dynamic state management via useLayout hook

The AppLayout Component ​

The AppLayout component is the main entry point. it wraps your application and automatically renders the selected layout variant.

tsx
// src/App.tsx
import { AppLayout } from '@/shared/ui/layouts/app/AppLayout';

export default function App() {
  return (
      <AppLayout />
  );
}

Layout Variants ​

Katalyst includes 8 production-ready layout variants across 2 families.

Vertical Family ​

Traditional sidebar-based layouts, perfect for complex applications with deep navigation.

| Variant | Key | Description | | by | --- | --- | | Vertical Boxed | vertical-boxed | Compact container with detached sidebar. Modern and focused. | | Vertical Edge | vertical-edge | Full-width edge-to-edge layout. Classic admin dashboard feel. | | Vertical Two Columns | vertical-two-columns | Double sidebar for managing massive navigation trees. |

Horizontal Family ​

Top-navigation layouts, ideal for data-heavy views or consumer-facing apps where vertical space is premium.

VariantKeyDescription
Horizontal Solidhorizontal-solidClean white top navigation. Minimalist.
Horizontal Darkhorizontal-darkInverted dark top navigation. High contrast.
Horizontal Gradienthorizontal-gradientBranded gradient header. visually striking.
Horizontal Herohorizontal-heroLarge header with blended background. Marketing-friendly.
Horizontal Stackedhorizontal-stackedDouble-decker header for separating primary/secondary nav.

Switching Layouts ​

You can switch layouts programmatically using the useLayout hook. This is often used in settings panels or for role-based layouts.

tsx
import { useLayout } from '@/shared/layouts/app';

export function LayoutSwitcher() {
  const { layoutMode, setLayoutMode } = useLayout();

  return (
    <div className="flex gap-2">
      <Button 
        variant={layoutMode === 'vertical-boxed' ? 'default' : 'outline'}
        onClick={() => setLayoutMode('vertical-boxed')}
      >
        Vertical
      </Button>
      
      <Button 
        variant={layoutMode === 'horizontal-solid' ? 'default' : 'outline'}
        onClick={() => setLayoutMode('horizontal-solid')}
      >
        Horizontal
      </Button>
    </div>
  );
}

Structure & Customization ​

The layout system is file-system based, making it easy to add or modify variants.

src/shared/ui/layouts/
├── app/
│   ├── AppLayout.tsx       # Main orchestrator
│   └── LayoutContext.ts    # State management
├── families/
│   ├── vertical/
│   │   └── variants/
│   │       ├── boxed/
│   │       ├── edge/
│   │       └── two-columns/
│   └── horizontal/
│       └── variants/
│           ├── solid/
│           ├── dark/
│           ├── gradient/
│           └── ...

Adding a New Layout ​

  1. Create the component: Add a new directory in families/vertical/variants/ (e.g., modern).
  2. Register the type: Update LayoutMode type in behaviors/types.ts.
  3. Add to AppLayout: Import and add a case to the switch statement in AppLayout.tsx.
tsx
// behaviors/types.ts
export type LayoutMode = 
  | 'vertical-boxed' 
  // ...
  | 'vertical-modern'; // New!

// AppLayout.tsx
case 'vertical-modern':
  return <VerticalModernLayout />;