@a24z/alexandria-ui

React UI library for Alexandria components with themed-markdown support. This library provides a complete set of UI components for building Alexandria-based applications that can be used across web and Electron environments.

Installation

npm install @a24z/alexandria-ui @a24z/core-library themed-markdown
# or
yarn add @a24z/alexandria-ui @a24z/core-library themed-markdown
# or
pnpm add @a24z/alexandria-ui @a24z/core-library themed-markdown

Quick Start

Web Application

import { Alexandria, AlexandriaThemeProvider } from '@a24z/alexandria-ui';
import {
  ReadingRecordManager,
  LocalStorageReadingRecordAdapter
} from '@a24z/core-library';

function App() {
  const storageManager = new ReadingRecordManager({
    adapter: new LocalStorageReadingRecordAdapter()
  });

  return (
    <AlexandriaThemeProvider theme="github-dark">
      <Alexandria
        storageManager={storageManager}
        apiUrl="https://api.alexandria.com"
      />
    </AlexandriaThemeProvider>
  );
}

Electron Application

import { Alexandria, AlexandriaThemeProvider } from '@a24z/alexandria-ui';
import {
  ReadingRecordManager,
  ElectronStorageAdapter
} from '@a24z/core-library';

function ElectronApp() {
  const storageManager = new ReadingRecordManager({
    adapter: new ElectronStorageAdapter()
  });

  return (
    <AlexandriaThemeProvider theme="github-dark">
      <Alexandria
        storageManager={storageManager}
        apiUrl="http://localhost:8741"  // Local server
      />
    </AlexandriaThemeProvider>
  );
}

Available Components

Core Components

• Alexandria - Complete Alexandria application
• AlexandriaThemeProvider - Theme provider wrapper using themed-markdown

Individual Components

• RepositoryViewer - Repository content viewer
• RepositoryCard - Repository information card
• BookmarkedDocuments - Bookmarked documents manager
• ViewDisplay - Content display component
• ThemeToggle - Theme switching component
• EmptyState - Empty state display
• AnimatedBookIcon - Animated book icon
• FontScaleControls - Font size controls
• ProductShowcase - Product showcase component

UI Primitives

All base UI components from components/ui are exported and available for use.

Theming

This library uses themed-markdown for consistent theming. All components automatically adapt to the theme provided through AlexandriaThemeProvider.

Available Themes

• github-dark
• github-light
• monokai
• dracula
• And more from themed-markdown

Custom Theme Usage

import { AlexandriaThemeProvider } from '@a24z/alexandria-ui';

function App() {
  return (
    <AlexandriaThemeProvider theme="monokai">
      {/* Your app content */}
    </AlexandriaThemeProvider>
  );
}

Development

Setup

# Install dependencies
npm install

# Run development build with watch
npm run dev

# Build library
npm run build

# Run Storybook for component development
npm run storybook

# Run tests
npm test

# Type checking
npm run typecheck

# Linting
npm run lint

Project Structure

@a24z/alexandria-ui/
├── src/
│   ├── components/          # React components
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Utilities and API clients
│   └── index.ts            # Main exports
├── stories/                # Storybook stories
├── .storybook/            # Storybook configuration
└── dist/                  # Build output

Architecture

See alexandria-library-architecture.md for detailed architecture documentation.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.