Reusable components
Compose forms, layouts, links, social actions, and content blocks without rebuilding UI for every flow.
UI DESIGNER / AHAM
Design the experience users see when they sign in.
Build reusable authentication, account, and email templates with the visual Aham UI Designer. Try the editor below, then install the component in your own Vue application.
Try the Designer
This debug workspace is embedded directly in the page. Add components, change properties, and explore responsive screens.
One workspace for every surface
Responsive by default
Design desktop, tablet, and mobile screens together while keeping synchronized properties consistent.
Brand once, reuse everywhere
Publish the same visual language across login, registration, OAuth, and email templates.
Install in a Vue app
Install the published package and render the Designer with your own save and publish handlers.
npm install @aham.ro/ui-designer@0.1.17<script setup lang="ts">
import { Designer, type WorkspaceData } from '@aham.ro/ui-designer';
import '@aham.ro/ui-designer/style.css';
const templates = [
{ id: 'login', name: 'Sign in', version: '1', channel: 'web', icon: 'login', changed: false },
];
const moreItems = [
{ id: 'duplicate', label: 'Duplicate', icon: 'content_copy' },
{ id: 'delete', label: 'Delete', icon: 'delete' },
];
const links = { docs: '/docs', support: '/support' };
const workspace: WorkspaceData = { templates: [] };
function saveWorkspace(data: WorkspaceData, done: (versionId?: string) => void) {
// Persist data, then call done with the saved version ID.
done('draft-version-id');
}
function publishTemplate(templateId: string, versionId: string, done: (response?: unknown) => void) {
// Publish through your API, then call done after it succeeds.
done({ templateId, versionId });
}
</script>
<template>
<Designer
value="project-branding"
:debug="true"
:options="{
subject: 'My Designer',
templates,
shared: true,
size: 'large',
theme: { mode: 'default', darkModeChangeable: true },
moreItems,
links,
value: workspace
}"
@save="saveWorkspace"
@publish="publishTemplate"
@more-select="console.info"
@screen-select="console.info"
@screen-add="console.info"
@screen-rename="console.info"
@translation-update="console.info"
@theme-update="console.info"
@component-drop="console.info"
@notify="console.info"
@dirty-change="console.info"
/>
</template>For production, connect the save and publish events to your API and provide the templates and workspace data for your project.