Components Overview
Available Packages
Section titled “Available Packages”@cairn/ui
Section titled “@cairn/ui”Shared React components for LongtermWiki sites.
shadcn/ui Components
Section titled “shadcn/ui Components”Import from @cairn/ui/components:
import { Button, Card, Tabs } from '@cairn/ui/components';Available components:
- Accordion
- Badge
- Button
- Card
- Collapsible
- DataTable
- HoverCard
- Input
- Popover
- Select
- Separator
- Table
- Tabs
- Tooltip
Graph Components
Section titled “Graph Components”Note: The CauseEffectGraph component is currently tightly coupled to the longterm app’s data layer. It’s planned for full extraction in a future phase.
The CauseEffectGraph component (in @cairn/ui/graph) provides:
- Interactive node-based visualizations
- Multiple layout algorithms (Dagre, ELK)
- Multiple view modes (Graph, List, Data, Mermaid)
Mermaid Components
Section titled “Mermaid Components”Import from @cairn/ui/mermaid:
import { Mermaid } from '@cairn/ui/mermaid';The Mermaid component provides:
- Dynamic diagram rendering from Mermaid syntax
- Automatic dark mode support
- Error handling with syntax preview
@cairn/tailwind
Section titled “@cairn/tailwind”Shared Tailwind CSS theme tokens.
@import "@cairn/tailwind/theme.css";@import "tailwindcss";Provides consistent colors, typography, and spacing across sites.