Installation

Three ways to add @attestto/verify to your project. Pick whichever fits your stack.

CDN (fastest)

Add a single script tag. No build step, no bundler. Components register themselves automatically.

index.html 
 <script type="module"
  src="https://unpkg.com/@attestto/[email protected]/dist/attestto-verify.js"
  integrity="sha384-v5irXGJ3QL+rHxekFY6LC4PsECPYYAtLt4L7qA30edAvB+/Ah+ZS8IvSXoxqmctW"
  crossorigin="anonymous"
></script>

<!-- Both components are now available -->
<attestto-verify></attestto-verify>
<attestto-sign></attestto-sign>

npm

Install the package and import it in your application entry point.

Terminal 
 npm install @attestto/verify

Then import the library to register the components:

main.js 
 import '@attestto/verify'

// <attestto-verify> and <attestto-sign> are now registered globally

Individual imports

If you only need one component, import it directly to reduce bundle size:

verify-only.js 
 // Only registers <attestto-verify>
import '@attestto/verify/verify'

// Only registers <attestto-sign>
import '@attestto/verify/sign'

Framework integration

Web Components are native HTML elements. They work in every framework without wrappers or adapters. Shadow DOM encapsulation means they will never conflict with your existing styles or CSS framework.

React

App.jsx 
 import '@attestto/verify'

export default function App() {
  return (
    <div>
      <h1>Document Verification</h1>
      <attestto-verify></attestto-verify>
    </div>
  )
}
💡
React 19+ handles Custom Elements natively. For React 18 and below, string attributes work fine. If you need to pass objects or listen to custom events, use a ref.

Vue

App.vue 
 <script setup>
import '@attestto/verify'
</script>

<template>
  <attestto-verify
    @verification-complete="onResult"
  />
</template>
💡
Add attestto- to compilerOptions.isCustomElement in your vite.config.ts to silence Vue's unknown-component warning.

Svelte

App.svelte 
 <script>
  import '@attestto/verify'
</script>

<attestto-verify
  on:verification-complete="{handleResult}"
/>

Shadow DOM & style isolation

Both components render inside Shadow DOM. This means:

  • Your page CSS cannot accidentally break the component
  • The component CSS cannot leak into your page
  • Tailwind, Bootstrap, or any CSS reset will not affect it
  • You can still customize appearance with CSS custom properties and ::part() selectors

Next steps