@pantograph/vue

The core Vue 3 component library for the Pantograph design system. Provides 80+ WAI-ARIA accessible, themeable, and tree-shakeable UI components built on top of reka-ui.

Installation

npm i @pantograph/vue

Quick Usage

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

<template>
  <Button variant="primary">Get Started</Button>
  <Input placeholder="Enter your email" />
  <Modal v-model:open="isOpen">
    <template #header>Modal Title</template>
    <p>Modal content goes here.</p>
  </Modal>
</template>

Key Features

• 80+ WAI-ARIA components built on top of reka-ui for robust accessibility
• Base → Public pattern: Internal primitives (BaseButton) styled and wrapped into public components (Button)
• CSS-in-JS option: Dynamic style loading via useCssInJs from useConfig()
• Dark mode support: Class-based toggling (pantograph-dark / pantograph-light) on the root element
• Strict exports: Named exports only (subpath imports like @pantograph/vue/Button are disallowed)

Documentation & Resources

• Monorepo Architecture Layout
• Engineering Guidelines
• AI Navigation Map
• Component Contracts: .ai/component-contracts/vue.json