@kundancool/simple-ui

Simple UI

Minimal dashboard components with Vue and native HTML editions. Existing design, shared styles, seven shared field/button sizes, scoped themes and services. No required chart runtime; use your own Vue or Alpine runtime for the edition you choose.

npm install @kundancool/simple-ui

For Vue, use your existing Vue 3.5+ app:

import SimpleUI from '@kundancool/simple-ui/vue'
import '@kundancool/simple-ui/styles.css'
app.use(SimpleUI)

<s-provider>
  <s-card>
    <s-input label="Customer" name="customer" />
    <s-button>Save</s-button>
  </s-card>
  <s-toast-container />
</s-provider>

Individual exports are available from /vue; direct component imports from /vue/components/button. The optional resolver is /vue/resolver and includes the stylesheet side effect. No resolver dependency is required for ordinary imports.

For HTML, supply Alpine 3 from your existing app or a pinned module:

import { registerSimpleUI } from '@kundancool/simple-ui/html'
import '@kundancool/simple-ui/styles.css'
registerSimpleUI(Alpine) // before the host starts Alpine; safe to call again

<main x-data="simpleRoot()">
  <label x-data="simpleInput({label: 'Customer', name: 'customer'})">
    <span x-text="label"></span>
    <input class="simple-input" :name="name" :value="value" @input="input($event)">
  </label>
  <button type="button" class="simple-button simple-btn-primary">Save</button>
</main>

Copy complete templates from /html/templates/*.html or src/html/components/. HTML uses native elements and Alpine providers; native composition entries require no JavaScript. HTML guide explains binding, composition and browser/runtime requirements.

Field/button defaults are md (36px), with text-base. Heights: xs 28, sm 32, md 36, lg 40, xl 44, 2xl 48, 3xl 56px. Set size on the Vue provider/form or HTML root; explicit component size wins. Glyph sizes and dialog widths have separate meanings.

Themes stay within [data-simple-root]; use theme="dark" on the Vue provider or simpleRoot({theme: 'dark'}). Override --s-* tokens on your root. Styles use standard Tailwind utilities and semantic colors such as bg-primary / bg-secondary with scoped Tailwind Preflight. Portal target and overlay base are configurable for embedding in another app. Migration and integration notes cover breaking import, class and service changes.

Run the local-data starters after npm ci:

npm run dev:vue-dashboard
npm run dev:html-dashboard

The HTML starter supplies its own pinned Alpine module from a CDN; self-host that file for offline use. Neither starter needs a backend, router or store. Example setup.

For repository development, see local setup. Run npm test, npm run typecheck, npm run build, npm run build:examples, npm run build:docs, and npm run check:package. Component requirements and generated API references live in docs/spec; the persistent implementation plan records decisions and verification.