Component Library & Base UI
Relevant source files
The following files were used as context for generating this wiki page:
The KamehaDB UI architecture is built on a modern, "local-first" desktop stack leveraging Tauri v2 and React 19. The UI system is designed for high-density information display, professional database management workflows, and cross-platform compatibility across macOS, Windows, and Linux. It utilizes a combination of standard primitive libraries and custom-built components to provide a responsive, keyboard-friendly experience.
Sources: README.md:104-106, PLAN.md:12-25, AGENTS.md:21-25
Architecture & Frameworks
The UI system is distributed across the workspace, with core logic and styling defined in the packages/ui package and implementation occurring primarily within apps/desktop. The styling is driven by Tailwind CSS (v4 in desktop, standard in landing) and custom CSS variables for theme support.
UI Stack Overview
| Layer | Technology | Purpose |
|---|---|---|
| Framework | React 19 | Component-based UI logic |
| Desktop Shell | Tauri v2 | Native window management and sidecar orchestration |
| Styling | Tailwind CSS v4 | Utility-first styling and design tokens |
| Component Primitives | @base-ui/react | Unstyled, accessible UI components |
| Specialized UI | shadcn/ui | Pre-styled, accessible components |
| Icons | lucide-react | Unified vector icon set |
| Animation | motion (motion/react) | Orchestrated UI transitions and effects |
Sources: apps/desktop/package.json:16-50, README.md:104-110, PLAN.md:213-217
Component Data Flow
The UI components interact with a local Node.js sidecar via a typed API. State is managed using the TanStack ecosystem, ensuring a consistent flow between remote data and local UI state.
Sources: PLAN.md:100-112, AGENTS.md:111-118
Core Component Modules
Base UI & shadcn/ui Implementation
KamehaDB utilizes @base-ui/react for accessible primitives and shadcn/ui for high-level components. Components are designed to be "dense" and "compact" to suit developer workflows.
Key components identified in the codebase include:
- Navigation & Layout:
Tabs,Resizable panels,ScrollArea,Sidebar. - Overlays:
Dialog,Sheet,DropdownMenu,Tooltip,ContextMenu. - Inputs:
Button,Input,Select,Switch,Textarea. - Display:
Badge,Separator,Command,Card.
Sources: PLAN.md:231-255, apps/desktop/package.json:16-30
Specialized Database Components
The library includes custom components tailored for database interaction:
- SQL Editor: A Monaco-based editor providing syntax highlighting and autocomplete.
- AI Chat Panel: A slide-out interface (
ai-chat-panel.tsx) using@tanstack/ai-reactfor schema-aware query generation. - Data Grids: Implementation of
TanStack Tablefor high-performance result rendering. - ER Diagram: Visual graph visualization using
@xyflow/reactanddagre.
Sources: README.md:107-111, apps/desktop/src/components/ai-chat-panel.tsx:17-45
Design System & Theme
The UI follows a strict set of design defaults intended for professional use:
- Density: Compact desktop UI with dense tables.
- Borders: Clear, defined borders with small radii (6px to 8px).
- Theming: Support for Light, Dark, and System modes using
next-themes. - Color System: Custom color badges for connection profiles, including a native color picker for connection categorization.
Sources: PLAN.md:257-265, CHANGELOG.md:43-45, apps/desktop/src/components/ai-chat-panel.tsx:50-60
Connection Profile Badges
Connection profiles are visually distinguished by color badges, which are used throughout the sidebar and headers to indicate the active context.
Sources: PLAN.md:143-156, CHANGELOG.md:44-45
Implementation Details
Shared UI Package
The packages/ui directory acts as a library for shared UI primitives and utilities used across the workspace. It depends on @kamehadb/shared for type safety.
{
"name": "@kamehadb/ui",
"dependencies": {
"@kamehadb/shared": "workspace:*",
"react": "^19.1.0",
"lucide-react": "^0.400",
"zod": "^3"
}
}
Sources: packages/ui/package.json:1-18
Complex Component Example: AI Chat Panel
The AIChatPanel component demonstrates the integration of multiple UI technologies, including custom hooks (useChat), UI primitives (DropdownMenu, Tooltip), and markdown rendering (ReactMarkdown).
// apps/desktop/src/components/ai-chat-panel.tsx
export function AIChatPanel({ connectionId, onClose, width = 360 }: AIChatPanelProps) {
// ... state for resizing, inputs, and history ...
const chat = useChat({ connection, forwardedProps });
return (
<aside className="border-l border-border bg-background flex shrink-0 h-full" style={{ width: panelWidth }}>
<div onMouseDown={handleMouseDown} className="..." />
<div className="flex h-full min-w-0 flex-1 flex-col">
{/* Header with connection details and DropdownMenu */}
{/* Scrollable area for MessageBubble components */}
{/* Input area with Textarea and Send Button */}
</div>
</aside>
);
}
Sources: apps/desktop/src/components/ai-chat-panel.tsx:325-345
Summary
The Component Library and Base UI of KamehaDB provide a robust foundation for a local-first database administrator. By combining unstyled primitives for accessibility with powerful styling tools like Tailwind CSS and specialized libraries like Monaco and ReactFlow, the system achieves a balance between performance, usability, and developer productivity. The architecture ensures that UI components remain synchronized with the underlying database state through the TanStack ecosystem.