TachUI Components

Complete reference for all TachUI components. Each component provides SwiftUI-compatible APIs with web-optimized implementations.

Window Management

Multi-platform window and scene management:

• App - Application container for window management
• Window - Single-instance windows (settings, about dialogs)
• WindowGroup - Multi-instance window management (documents)

User Interface

Interactive components for user interface:

• Text - Typography component with reactive content and extensive styling
• Button - Interactive buttons with press states and variants
• Image - 🖼️ NEW: Image display with loading states, content modes, and lazy loading
• Symbol - SwiftUI-inspired icon system with animations and rendering modes
• Alert - Modal dialogs with backdrop and animations (from @tachui/mobile-patterns)
• ActionSheet - Mobile-style action selection (from @tachui/mobile-patterns)
• Menu - Dropdown menus with keyboard navigation
• DatePicker - Date and time selection (from @tachui/advanced-forms)
• Stepper - Numeric input with increment/decrement (from @tachui/advanced-forms)

Dynamic Rendering

Components for conditional and list rendering:

• Show - Reactive conditional rendering with fallback support
• ForEach - Efficient list rendering with automatic updates
• For - SolidJS-compatible list rendering syntax

Input Components

Components for collecting user input:

• BasicInput - Lightweight text input for Core-only applications

Layout & Structure

Core layout components for organizing content:

• Layout Components - 📐 NEW: VStack, HStack, ZStack - fundamental layout containers
• Grid Components - 🔲 NEW: SwiftUI-style Grid, LazyVGrid, LazyHGrid with CSS Grid performance
• Spacer - 🫧 NEW: Flexible space component for layout spacing

Navigation & Routing

Components for organizing and navigating content:

• NavigationStack - SwiftUI-compatible stack navigation
• NavigationLink - Declarative navigation links
• SimpleTabView - SwiftUI-compatible tab navigation
• Divider - Visual separators with styling options
• Link - Web-specific navigation links

Component Categories

Window Management

Window management components provide SwiftUI-style multi-window support:

// App container
const MyApp = App({
  children: [
    Window({ id: 'main', ... }),
    WindowGroup({ id: 'documents', for: Document, ... })
  ]
})

// Single window
const SettingsWindow = Window({
  id: 'settings',
  title: 'Settings',
  modal: true,
  children: () => SettingsView()
})

// Document windows
const DocumentWindows = WindowGroup({
  id: 'text-editor',
  for: TextDocument,
  children: (doc) => TextEditor({ document: doc })
})

Interactive Components

Components that respond to user interaction:

import { Alert, ActionSheet } from '@tachui/mobile-patterns'

// Alert dialog
Alert({
  title: 'Confirmation',
  message: 'Are you sure?',
  primaryButton: { title: 'Yes', action: confirm },
  secondaryButton: { title: 'Cancel', role: 'cancel' }
})

// Action sheet
ActionSheet({
  title: 'Choose Action',
  actions: [
    { title: 'Edit', action: editItem },
    { title: 'Delete', action: deleteItem, destructive: true }
  ]
})

// Date picker
DatePicker({
  selection: selectedDate,
  displayedComponents: [.date, .hourAndMinute]
})

// Basic text input
const [text, setText] = createSignal('')
BasicInput({
  text,
  setText,
  placeholder: 'Enter your name...',
  onChange: (value) => console.log('Input changed:', value),
  onSubmit: (value) => handleSubmit(value)
})

Navigation Components

Components for organizing and navigating content:

// Menu with items
Menu({
  title: 'Options',
  children: [
    MenuButton({ title: 'New File', action: createFile }),
    MenuButton({ title: 'Open...', action: openFile }),
    Divider(),
    MenuButton({ title: 'Quit', action: quit })
  ]
})

// Navigation link
Link({
  destination: '/profile',
  children: [Text({ content: 'View Profile' })]
})

Platform Adaptations

TachUI components automatically adapt to different platforms:

Desktop (Electron)

• Native window management
• Desktop-style menus and dialogs
• Keyboard shortcuts and accelerators

Web Browser

• Modal overlays and popups
• Responsive design patterns
• Web accessibility standards

Mobile

• Touch-optimized interactions
• Sheet presentations and action sheets
• Gesture-based navigation

Usage Patterns

Modal Dialogs

// Settings modal
const showSettings = async () => {
  await openWindow('settings', SettingsView(), {
    modal: true,
    width: 500,
    height: 400
  })
}

// Confirmation alert
const confirmDelete = () => {
  Alert({
    title: 'Delete Item',
    message: 'This action cannot be undone.',
    primaryButton: { 
      title: 'Delete', 
      action: deleteItem,
      role: 'destructive' 
    },
    secondaryButton: { 
      title: 'Cancel', 
      role: 'cancel' 
    }
  })
}

Document Management

// Document-based app
const DocumentApp = App({
  children: [
    WindowGroup({
      id: 'textDocument',
      for: TextDocument,
      children: (doc) => TextEditor({ document: doc })
    }),
    
    Window({
      id: 'browser',
      title: 'Document Browser',
      children: () => DocumentBrowser()
    })
  ]
})

// Open document
await DocumentApp.openScene('textDocument', myDocument)

Utility Windows

// Inspector palette
const InspectorWindow = Window({
  id: 'inspector',
  title: 'Inspector',
  width: 300,
  height: 500,
  alwaysOnTop: true,
  children: () => PropertyInspector()
})

// Tool palette
const ToolPalette = Window({
  id: 'tools',
  title: 'Tools',
  width: 250,
  height: 400,
  alwaysOnTop: true,
  children: () => ToolSelector()
})

Best Practices

1. Choose Appropriate Components

• Use Window for singleton windows (settings, about)
• Use WindowGroup for document-based applications
• Use Alert for simple confirmations
• Use ActionSheet for action selection on mobile

2. Handle Platform Differences

import { PlatformUtils } from '@tachui/core/viewport'

if (PlatformUtils.isMobile()) {
  // Use ActionSheet
  ActionSheet({ ... })
} else {
  // Use Menu
  Menu({ ... })
}

3. Manage Component Lifecycle

// Clean up resources
useEffect(() => {
  const cleanup = () => {
    // Dispose of heavy components
  }
  
  return cleanup
})

4. Optimize Performance

// Lazy load heavy components
const LazyEditor = lazy(() => import('./HeavyTextEditor'))

Window({
  id: 'editor',
  children: () => LazyEditor()
})

Component Development

Creating custom components that integrate with TachUI:

// Custom component with TachUI integration
function MyCustomComponent(props: MyProps) {
  const openWindow = useOpenWindow()
  const viewportInfo = useViewportInfo()
  
  // Adapt to platform
  if (viewportInfo.platform === 'mobile') {
    return MobileVersion(props)
  }
  
  return DesktopVersion(props)
}

Related Guides

• Viewport Management Guide - Complete window management system
• Component Development - Creating custom components
• State Management - Managing component state
• Performance Guide - Optimizing component performance