npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

vael-ui

v0.2.9

Published

Animation-agnostic Vue 3 UI library with full Vue Vapor support.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

mini-sylarmini-sylar

Keywords

animation-agnosticcomponent-librarydesign-systemheadless-uiuiui-libraryvaporvuevue3

Readme

vael-ui

A Vue 3 UI library with a real, first-class Vue Vapor build, plain CSS by default, animation-agnostic when you want more. One component per primitive, no compound-component sprawl, fully native to Vue's own APIs.

Docs & full component reference → vael-ui.dev

Vue Vapor support

Vue Vapor compiles templates straight to fine-grained reactive DOM updates instead of the classic virtual DOM (render → VNodes → diff → patch) — smaller runtime, faster updates. vael-ui ships both builds from the same package: every component is written once as a normal VDOM SFC, then compiled a second time through Vapor's compiler into a separate entry point.

import { Button } from 'vael-ui' // classic VDOM build
import { Button } from 'vael-ui/vapor' // compiled Vapor build, same props/API

playground/vapor is a live showcase of the Vapor build with nothing else in the tree, every mounted component there is genuinely Vapor, verified via Vue's own __vapor flag in packages/vapor-ui/tests.

Install

pnpm add vael-ui

Usage

// main.ts
import 'vael-ui/style.css' // import before your own global/Tailwind CSS
<script setup lang="ts">
import { Button, ConfigProvider } from 'vael-ui'
</script>

<template>
  <ConfigProvider :theme="{ primary: '#6366f1', radius: '12px' }">
    <Button @click="save">Save</Button>
  </ConfigProvider>
</template>

Dark mode is CSS-only, the library responds to <html data-theme="dark"> and, absent that, prefers-color-scheme. useColorScheme() handles the state part (persistence, applying the attribute, live OS-preference updates) if you want a toggle:

import { useColorScheme } from 'vael-ui'
const { mode, setMode } = useColorScheme({
  persist: {
    get: () => localStorage.getItem('theme'),
    set: (m) => localStorage.setItem('theme', m ?? ''),
  },
})

Full theming/i18n/ConfigProvider setup: Global Setup guide.

Directives

v-tooltip and v-scroll-mask need global registration unless imported directly as vTooltip/vScrollMask inside the same <script setup> that uses them:

import { createApp } from 'vue'
import { vTooltip, vScrollMask } from 'vael-ui'

const app = createApp(App)
app.directive('tooltip', vTooltip)
app.directive('scroll-mask', vScrollMask)

v-tooltip also needs a single <TooltipHost /> mounted once anywhere in your app (a shared singleton every tooltip target renders through). Skipping either step is what causes a Failed to resolve directive warning, or a tooltip that silently never shows.

Vapor apps import the same names from vael-ui/vapor instead. Full options and the Vapor-specific directive shape: Animation Integration guide.

Structure

packages/
  ui/         the library — publishes "vael-ui" + "vael-ui/vapor" from the same dist/
              the only place any component is hand-authored
  vapor-ui/   Vapor build/test tooling: compiles the generated tree into
              packages/ui/dist/vapor, plus Vapor browser tests
  scripts/    generate-vapor.mjs — copies each listed component into
              vapor-ui/src/generated, marks it `vapor`, rewrites imports

playground/
  vdom/             every primitive in CSS / motion-v / imperative flavors
  vapor-interop/    a VDOM + Vapor mixed app
  vapor/            standalone Vapor build showcase (vael-ui/vapor only)

docs/         the vael-ui.dev site — generated component reference + guides

Scripts

| Script | What it does | | ------------------------------------------------- | ---------------------------------------------------------------------------- | | pnpm build | Builds the library (packages/ui/dist) and the Vapor variant (dist/vapor) | | pnpm typecheck | Builds, then vue-tsc over every workspace package | | pnpm test | Browser tests for the library (vitest + Playwright, real Chromium) | | pnpm test:vapor / test:vapor-interop | Vapor build and interop verification | | pnpm play / play:vapor / play:vapor-interop | Dev servers for each playground | | pnpm lint / pnpm format | oxlint + eslint / oxfmt write | | pnpm changeset | Describe a pending change for the next release |

The library depends on vael-ui's built dist/, not src/ — pnpm play alone silently serves a stale build the moment you edit library source. Run pnpm --filter vael-ui dev (tsdown --watch) alongside it, or rebuild after each change.

Contributing

  1. pnpm install
  2. Make your change, add tests where it makes sense
  3. pnpm typecheck && pnpm test before opening a PR
  4. Commits follow Conventional Commits — enforced by a commit-msg hook
  5. If your change affects the published vael-ui package, run pnpm changeset

Releases are automated: merging to main opens or updates a "Version Packages" PR from any pending changesets; merging that PR publishes to npm.

License

MIT