Welcome to EVA DevKit
Get started with EVA Sovereign UI components in minutes. This guide will walk you through installation, basic usage, and integration with your favorite framework.
Installation
EVA components are distributed as standard Web Components and can be used in any modern web application.
Option 1: npm (Recommended)
npm install @eva-sovereign/web-components
Option 2: CDN
<script type="module" src="https://unpkg.com/@eva-sovereign/web-components"></script>
Quick Start
Follow these steps to create your first EVA-powered application:
-
Import the componentsjavascript
import '@eva-sovereign/web-components'; -
Use components in your HTMLhtml
<eva-button variant="primary">Click Me</eva-button> <eva-input type="email" placeholder="Enter your email"></eva-input> -
Handle events with JavaScriptjavascript
const button = document.querySelector('eva-button'); button.addEventListener('eva-click', () => { console.log('Button clicked!'); });
Available Components
EVA provides 11 production-ready components, all WCAG AAA compliant and GC Design System certified.
6 variants: supertask, primary, secondary, danger, link, contextual-signin
Text, email, password, tel, url, number with validation
Dropdown with keyboard navigation and error states
Custom styled with 44px touch targets
Mutual exclusion with arrow navigation
Tabbed interface with Home/End shortcuts
3 sizes with focus trap and Esc close
Default, bordered, elevated variants
Success, info, warning, danger (dismissible)
Message bubbles, typing indicator, RAG-ready
React Integration
EVA components work seamlessly with React. Use refs and addEventListener for event handling:
import { useRef, useEffect, useState } from 'react';
import '@eva-sovereign/web-components';
function LoginForm() {
const buttonRef = useRef(null);
const inputRef = useRef(null);
const [email, setEmail] = useState('');
useEffect(() => {
const button = buttonRef.current;
const input = inputRef.current;
const handleClick = () => {
console.log('Email:', email);
};
const handleInput = (e) => {
setEmail(e.detail.value);
};
button.addEventListener('eva-click', handleClick);
input.addEventListener('eva-input', handleInput);
return () => {
button.removeEventListener('eva-click', handleClick);
input.removeEventListener('eva-input', handleInput);
};
}, [email]);
return (
<div>
<eva-input ref={inputRef} type="email" placeholder="Email"></eva-input>
<eva-button ref={buttonRef} variant="primary">Sign In</eva-button>
</div>
);
}
Vue Integration
Configure Vue to recognize EVA components as custom elements:
vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('eva-')
}
}
})
]
});
Component Usage
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import '@eva-sovereign/web-components';
const email = ref('');
const buttonRef = ref(null);
onMounted(() => {
buttonRef.value?.addEventListener('eva-click', () => {
console.log('Email:', email.value);
});
});
</script>
<template>
<eva-input v-model="email" type="email" placeholder="Email" />
<eva-button ref="buttonRef" variant="primary">Sign In</eva-button>
</template>
Vanilla JavaScript
Using EVA components with vanilla JavaScript is straightforward:
<!DOCTYPE html>
<html>
<head>
<script type="module" src="path/to/eva-components.js"></script>
</head>
<body>
<eva-input id="emailInput" type="email"></eva-input>
<eva-button id="submitBtn" variant="primary">Submit</eva-button>
<script>
const input = document.getElementById('emailInput');
const button = document.getElementById('submitBtn');
button.addEventListener('eva-click', () => {
console.log('Email:', input.value);
});
</script>
</body>
</html>
Theming
EVA components use CSS custom properties for theming. Override these variables to customize appearance:
:root {
/* GC Design System Colors */
--eva-color-primary: #26374a;
--eva-color-secondary: #2b8a3e;
--eva-color-danger: #c92a2a;
/* Spacing */
--eva-spacing-sm: 0.5rem;
--eva-spacing-md: 1rem;
--eva-spacing-lg: 1.5rem;
/* Typography */
--eva-font-family: "Noto Sans", Arial, sans-serif;
--eva-font-size-base: 1rem;
/* Borders */
--eva-border-radius: 4px;
--eva-border-width: 1px;
}
Internationalization (i18n)
EVA components support EN-CA and FR-CA out of the box. Switch locales globally:
import { setGlobalLocale } from '@eva-sovereign/web-components';
// Switch to French
setGlobalLocale('fr-CA');
// Switch back to English
setGlobalLocale('en-CA');
Or set locale per component:
<eva-button locale="fr-CA">Soumettre</eva-button>
Accessibility
All EVA components meet WCAG 2.2 AAA standards:
Tab, Enter, Space, Arrow keys, Home/End shortcuts
ARIA labels, live regions, semantic HTML
7:1 contrast ratio, visible focus indicators
44px minimum size (WCAG AAA)