UI Component Library & Design System
Relevant source files
The following files were used as context for generating this wiki page:
Archivum utilizes a cohesive UI component library and design system built on React, Tailwind CSS, and Radix UI primitives. The system is designed to provide a "self-hosted Obsidian alternative" experience, emphasizing a clean, technical aesthetic that facilitates both manual editing and AI-driven knowledge management.
The design system architecture follows a three-panel layout strategy, incorporating a collapsible file sidebar, a central editor or active view, and a contextual panel for backlinks and metadata. It leverages a custom color palette defined via CSS variables to support consistent branding across the web UI, including specialized treatments for AI-authored content.
Sources: archivum-prd-v1.0.md:468-476, apps/frontend/src/index.css:1-60
Visual Identity and Styling
The visual identity is defined through a combination of Tailwind CSS configurations and global CSS variables. The system uses a specific typography stack featuring Manrope for UI elements and JetBrains Mono for code and editor views.
Core Color Palette
The design system uses HSL-based CSS variables to define its color tokens. This allows for dynamic adjustments and consistent application across components.
| Token | HSL Value | Purpose |
|---|---|---|
--background | 42 36% 95% | Primary app background |
--foreground | 210 24% 18% | Main text color |
--primary | 31 58% 57% | Primary action/brand color |
--accent | 34 72% 88% | Highlights and interactive states |
--border | 30 18% 81% | UI borders and dividers |
--ring | 31 58% 57% | Focus indicators |
Sources: apps/frontend/src/index.css:6-34
Thematic Panels
The layout is composed of distinct panel types, each with specific background treatments and shadow profiles:
- Surface Panel: A prominent white-to-cream gradient (
rgba(255,255,255,0.88)torgba(250,246,239,0.9)) with a deep shadow for elevated content like the main editor. - Rail Panel: A dark blue gradient (
#203444to#172733) typically used for deep-level navigation or sidebars. - Page Header: A translucent, blurred card header (
bg-card/80withbackdrop-blur) that contains page titles and metadata.
Sources: apps/frontend/src/index.css:127-147
Layout Architecture
Archivum implements a structured layout designed for knowledge work. The primary WikiPage view utilizes a header-and-content structure where the main editor is contained within a "surface panel."
The diagram above illustrates the hierarchy of the primary wiki viewing and editing interface.
Sources: apps/frontend/src/pages/WikiPage.tsx:135-212, archivum-prd-v1.0.md:468-476
Core Components
Editor (CodeMirror 6)
The editor is the central component of the design system. It is implemented using CodeMirror 6 and customized with extensions for the Archivum environment.
- Extensions: Includes support for Markdown highlighting,
[[wikilink]]decorations, and history. - Styling: Custom themes provide a dark background (
#1e1e2e), specific line heights (1.7), and active line wrapping. - Wikilinks: Custom decorations distinguish between existing links (colored with
--ringand underlined) and missing links (muted-foreground with dotted underlines).
Sources: apps/frontend/src/components/Editor/Editor.tsx:75-125, apps/frontend/src/index.css:97-120
Ingest & Search Panels
Interaction panels provide functional entry points for adding and finding knowledge.
- NotesInteractionPanel: Provides a search-first interface with a results list displayed in Cards.
- Result Cards: Each search result is rendered in a
Cardcontaining the title, slug, a text excerpt, and action buttons (Open, Edit, Copy).
Sources: apps/frontend/src/components/NotesInteractionPanel.tsx:88-142
Component Specifications
| Component | Features | Source File |
|---|---|---|
| Badge | Supports variants like info (for "AI-authored" labels) and standard accent. | WikiPage.tsx:156 |
| Dialog | Used for destructive actions (Delete) and sharing URLs. | WikiPage.tsx:214-257 |
| DropdownMenu | Houses secondary page actions like Export (HTML/PDF) and Sharing. | WikiPage.tsx:279-307 |
| Input | Borderless variants for titles; rounded-2xl variants for tag entry. | WikiPage.tsx:162-182 |
Markdown Rendering & Sanitization
Archivum maintains a consistent rendering style for Markdown across the main editor and the public sharing interface.
Public Rendering Pipeline
The PublicWikiPage utilizes a specialized renderMarkdown function to convert raw text into styled HTML elements. This process is paired with DOMPurify to ensure security.
This flow ensures that user-generated or agent-generated content is sanitized before being rendered in the browser.
Sources: apps/frontend/src/pages/PublicWikiPage.tsx:7-53
Content Styles
- Headers: H1 (xl, bold), H2 (lg, semibold), H3 (base, semibold).
- Code Blocks: Mono font with specialized background colors (
#2a2a3a) and text colors (#cdd6f4). - Blockquotes: Indented with a blue border (
#4B91F1) and italicized text.
Sources: apps/frontend/src/pages/PublicWikiPage.tsx:7-22
Conclusion
The Archivum UI Component Library & Design System provides a robust foundation for a self-hosted knowledge base. By combining flexible Tailwind utility classes with high-performance components like CodeMirror 6 and a strict visual hierarchy, the system effectively bridges the gap between manual human editing and automated AI knowledge synthesis.