HTM Components

A compact Vue 3 component library with shared tokens and base application styles.

AI-First Docs

• docs/ai.md for a machine-readable overview.
• docs/components.md for a quick component reference.
• manifest export for programmatic discovery.

import { manifest } from 'htm-components'

Install

npm install htm-components

Usage

import { createApp } from 'vue'
import App from './App.vue'

import HtmComponents, { HtmButton, HtmAuthPanel } from 'htm-components'
import 'htm-components/style.css'

const app = createApp(App)
app.use(HtmComponents)
app.component('HtmButton', HtmButton)
app.component('HtmAuthPanel', HtmAuthPanel)
app.mount('#app')

Components

• HtmButton: primary, secondary, and ghost variants with size modifiers.
• HtmInput: labeled input with v-model support.
• HtmCheckbox: checkbox control for simple boolean fields.
• HtmAuthPanel: login/register panel with built-in fields and toggle.

<HtmButton>Primary</HtmButton>
<HtmButton variant="secondary">Secondary</HtmButton>
<HtmButton variant="ghost">Ghost</HtmButton>

<HtmInput v-model="email" label="Email" type="email" />
<HtmCheckbox v-model="remember" label="Remember me" />

<HtmAuthPanel v-model:mode="mode" />

Tokens and Styles

SCSS tokens and mixins are exposed for direct use.

@import 'htm-components/styles/variables';
@import 'htm-components/styles/mixins';

CSS variables are emitted via style.css for runtime theming.

:root {
  --htm-color-accent: #7dd3ff;
}

Development

npm run dev

Build

npm run build