@pantograph/vue

Pantograph's Vue 3 component library, built with TypeScript and token-based design. Ready to use in your apps with light/dark token switching and simple, consistent APIs.

Install

npm i @pantograph/vue

Quick usage

<script setup lang="ts">
import { Button } from '@pantograph/vue'
import '@pantograph/styles'
</script>

<template>
  <Button variant="primary">Click me</Button>
</template>

Key Features

• 80+ WAI-ARIA components built on top of reka-ui for robust accessibility
• Base → Public pattern: Internal base components (e.g., BaseButton) are wrapped and styled into public Pantograph components (e.g., Button)
• CSS-in-JS styling: Style imports are handled via useCssInJs from useConfig() — no <style> tags required for component styling
• Dark mode: Activated via CSS class (pantograph-dark or pantograph-light) on the root element; never uses .dark CSS rules
• Token system: All CSS variables use the --pt-* prefix for consistent theming
• Strict exports: Named exports only; no default exports and no subpath imports (e.g., @pantograph/vue/Button is not allowed)
• Component structure: Each component follows a standardized layout: .vue + index.ts + types.ts + constant.ts + model.ts + context.ts

Navigation

For a complete map of all packages, components, and import paths, refer to the centralized navigation index:

• .ai/NAVIGATION.md

Documentation

For full documentation and live examples, visit the Pantograph docs:

• Docs: Introduction & Stories
• Component APIs: .ai/component-contracts.json
• Import paths: .ai/symbol-map.json
• Run npm run ai:index to regenerate indexes after structural changes