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

@kisaki3/extension-ui-vue

v0.0.10

Published

Vue UI kit for Kisaki extension webview documents

Vulnerabilities

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

Links

Git

Maintainers

ximu3ximu3

Keywords

kisakiextensionwebviewuivue

Readme

@kisaki3/extension-ui-vue

Vue UI kit for Kisaki extension webview documents. Implements the Kisaki design language on top of the mirrored app theme, so extension UI stays visually consistent with the app without copying app code.

Setup

Install the SDK and the kit, plus the iconify Tailwind plugin and an icon-set data package (the kit renders icons via iconify mask classes; mdi covers the built-in glyphs). Then assemble the webview document stylesheet:

@import 'tailwindcss';
@import '@kisaki3/extension-sdk/base.css'; /* shared base layer (framework-agnostic) */
@import '@kisaki3/extension-sdk/tailwind.css'; /* Tailwind token mapping */
@import '@kisaki3/extension-ui-vue/style.css'; /* kit component layer */
@plugin "@iconify/tailwind4"; /* required: renders the kit's icon classes */
pnpm add -D @iconify/tailwind4 @iconify-json/mdi

The kit relies on the semantic tokens (--kisaki-*) that the webview client mirrors onto the document root, and on base.css for the shared base layer (typography, colors, scrollbars). It works inside any webview opened through kisaki.webviews.open(). Without the iconify plugin the components render but their icons (dialog close, select chevron, checkbox tick, spinner) are blank.

Usage

<script setup lang="ts">
import { Button, Field, FieldGroup, Input, Switch } from '@kisaki3/extension-ui-vue'
</script>

<template>
  <FieldGroup>
    <Field
      label="API token"
      description="Stored in extension storage."
    >
      <Input v-model="token" />
    </Field>
    <Field
      orientation="horizontal"
      label="Enable sync"
    >
      <Switch v-model="enabled" />
    </Field>
    <Button>Save</Button>
  </FieldGroup>
</template>

Components

Alert, AlertDialog, Badge, Button, Checkbox, Dialog, Field, Form, Icon, Input, Label, Progress, RadioGroup, Select, Separator, Spinner, Switch, Table, Tabs, Textarea, Tooltip, plus the cn class utility.

Icon mirrors the app's API — <Icon icon="icon-[mdi--home]" class="size-4" /> — and works with any iconify set installed in the consuming project.

Standalone preview

The kit reads the --kisaki-* tokens the host injects at runtime, so it has no colors of its own. To preview components outside the host (Storybook, a gallery), import the SDK's default-token sheet to supply a neutral light/dark default:

@import 'tailwindcss';
@import '@kisaki3/extension-sdk/preview.css'; /* preview-only default tokens */
@import '@kisaki3/extension-sdk/base.css';
@import '@kisaki3/extension-sdk/tailwind.css';
@import '@kisaki3/extension-ui-vue/style.css';
@plugin "@iconify/tailwind4";

Toggle dark with data-kisaki-theme="dark" on <html>. Don't ship preview.css in a published extension — the host owns the real values at runtime.