cpod-theme

One package, three frameworks. Production-ready components for React, Vue, and Svelte.

Features

• Multi-Framework -- React 18+, Vue 3.4+, Svelte 5. One install, identical visual output.
• Accessible -- WCAG 2.1 AA on every component. Keyboard, screen reader, voice control.
• Design Tokens -- W3C DTCG format (v2025.10). Three-tier architecture with automatic dark mode.
• Tree-Shakeable -- ESM-only. Import one component, pay only for that component (<5KB gzip typical).
• TypeScript-First -- Strict mode, no any. Full type inference across all frameworks.
• Secure by Default -- DOMPurify sanitization on all content. CSP-compliant. No opt-out.
• Zag.js Powered -- Cross-framework behavior parity via state machines. Keyboard nav, focus management, ARIA -- tested once, works everywhere.
• Tailwind CSS v4 -- Token-backed utilities. Consumer styles always win (cascade layers). No !important needed.

Quick Start

Install

npm install cpod-theme

Usage

React

import { Button, Card } from 'cpod-theme/react'
import 'cpod-theme/styles.css'

export default function App() {
  return (
    <Card>
      <Card.Header>Welcome</Card.Header>
      <Card.Body>Get started with cpod-theme.</Card.Body>
      <Card.Footer>
        <Button variant="primary">Get Started</Button>
      </Card.Footer>
    </Card>
  )
}

Vue

<script setup>
import { Button, Card } from 'cpod-theme/vue'
import 'cpod-theme/styles.css'
</script>

<template>
  <Card>
    <CardHeader>Welcome</CardHeader>
    <CardBody>Get started with cpod-theme.</CardBody>
    <CardFooter>
      <Button variant="primary">Get Started</Button>
    </CardFooter>
  </Card>
</template>

Svelte

<script>
  import { Button, Card } from 'cpod-theme/svelte'
  import 'cpod-theme/styles.css'
</script>

<Card>
  <Card.Header>Welcome</Card.Header>
  <Card.Body>Get started with cpod-theme.</Card.Body>
  <Card.Footer>
    <Button variant="primary">Get Started</Button>
  </Card.Footer>
</Card>

Same components, same visual output, framework-idiomatic DX.

Components

| Category | Components | Status | |----------|-----------|--------| | Foundation | Button, Input, Typography, Card, Badge | Done | | Navigation | Tabs, Breadcrumb, Pagination, Menu, Command Palette, Navbar | Done | | Data Display | Table, List, Avatar, AvatarGroup, Tag, Divider, CopyButton | Done | | Feedback | Toast, Dialog, Drawer, Popover, Tooltip | Done | | Progress | Progress, Spinner, Skeleton | Done | | Forms | Checkbox, Radio, Switch, Select, Slider, FileUpload | Done | | Chat | MessageBubble, MessageList, TextInput, TypingIndicator, StreamingMessage | Planned | | Voice | VoiceRecorder, WaveformVisualizer, AudioPlayer, AssistantOrb | Planned | | AI Safety | ActionApprovalCard, ReasoningTrace, ConfidenceBadge, FeedbackControls | Planned | | Marketplace | AppCard, AppDetailLayout, RatingDisplay, InstallButton | Planned | | Enterprise | Command Palette, Audit Log, Permission Matrix, Bulk Actions | Planned |

Package Exports

Core

| Import Path | Description | |---|---| | cpod-theme/react | React components | | cpod-theme/vue | Vue components | | cpod-theme/svelte | Svelte components | | cpod-theme/tokens | Design tokens -- CSS, JS, JSON (W3C DTCG format) | | cpod-theme/tailwind | Tailwind CSS v4 preset | | cpod-theme/icons | Tree-shakeable icon set (Lucide-powered) | | cpod-theme/styles.css | Base stylesheet with cascade layers |

Platform

| Import Path | Description | |---|---| | cpod-theme/content | Content pipeline -- Markdown, LaTeX (KaTeX), code highlighting (Shiki), streaming | | cpod-theme/providers | CpodProvider -- configure AI, voice, and upload backends via adapters |

Viewers

| Import Path | Description | |---|---| | cpod-theme/viewers/json | Collapsible JSON tree with search and copy-path | | cpod-theme/viewers/code | Code viewer (Shiki) and editor (CodeMirror 6) | | cpod-theme/viewers/diff | Split/unified diff with word-level highlighting | | cpod-theme/viewers/pdf | PDF viewer with pages, zoom, search, and print | | cpod-theme/viewers/media | Image gallery and video player | | cpod-theme/viewers/log | Streaming log viewer with ANSI color support | | cpod-theme/viewers/terminal | Terminal emulator (xterm.js) |

Utilities

| Import Path | Description | |---|---| | cpod-theme/enterprise | Command palette, audit log viewer, permission matrix, bulk actions | | cpod-theme/ai-safety | Approval cards, reasoning traces, confidence badges, moderation | | cpod-theme/charts | Chart adapters for Recharts, Chart.js, ECharts | | cpod-theme/dnd | Drag-and-drop utilities -- sortable lists, kanban, file drop zones |

Documentation

| Guide | Description | |-------|-------------| | Architecture | System layers, content pipeline, security model | | Design Philosophy | Core principles, component API design | | Plan of Action | Phased roadmap and milestones | | PRD | Product requirements and priorities |

Contributing

We welcome contributions! Please read our Contributing Guide before submitting a PR.

• Code of Conduct
• Security Policy
• Bug Reports
• Feature Requests

Acknowledgments

Built with Zag.js state machines, Tailwind CSS v4, and Style Dictionary v5. Design tokens follow the W3C DTCG specification.

Inspired by Radix UI, Ark UI, shadcn/ui, and Chakra UI.

License

MIT