# ketekny-ui-kit

> A Vue 3 UI component library with Tailwind CSS styling

Latest version **1.0.155** (published 2026-10-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install ketekny-ui-kit
pnpm add ketekny-ui-kit
yarn add ketekny-ui-kit
bun add ketekny-ui-kit
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.0.155 |
| Published | 2026-10-01 |
| First published | 2026-01-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 531.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ketekny-admin |
| Keywords | vue, ui, components, tailwind, library |

## Links

- npm: https://www.npmjs.com/package/ketekny-ui-kit
- npm.io page: https://npm.io/package/ketekny-ui-kit

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 1.0.155 (latest) — 2026-10-01
- 1.0.154 — 2026-09-30
- 1.0.153 — 2026-09-28
- 1.0.152 — 2026-09-17
- 1.0.151 — 2026-09-17
- 1.0.150 — 2026-09-09
- 1.0.149 — 2026-09-09
- 1.0.148 — 2026-09-09
- 1.0.147 — 2026-09-02
- 1.0.146 — 2026-08-10
- 1.0.145 — 2026-08-10
- 1.0.144 — 2026-07-28
- 1.0.143 — 2026-07-22
- 1.0.142 — 2026-07-20
- 1.0.141 — 2026-07-20
- … 138 more at https://npm.io/package/ketekny-ui-kit/versions

## README

# ketekny-ui-kit

Vue 3 UI component library with Tailwind CSS styling and utility plugins.

## Requirements

- `vue`: `^3.0.0` (peer dependency)
- Tailwind CSS 3 build pipeline in your app (`tailwindcss`, `postcss`, `autoprefixer`)
- This package is built and tested against Tailwind CSS 3.x; Tailwind CSS 4 is not supported by the current setup

## Consumer Dependencies

Install these in the consuming app:

```bash
npm install vue @lucide/vue class-variance-authority clsx dayjs element-plus moment reka-ui simple-code-editor tailwind-merge vue-router vue3-easy-data-table
```

If the app does not already include Tailwind CSS 3:

```bash
npm install -D tailwindcss@^3 postcss autoprefixer
```

## Installation

Needed packages (install what is missing)

```bash
npm install ketekny-ui-kit
```

## Quick Start

In your app entry (`main.js` / `main.ts`):

```js
import { createApp } from "vue";
import App from "./App.vue";
import "ketekny-ui-kit/styles.css";

import {
  kButton,
  kInput,
  kRange,
  kSelect,
  kDateSelector,
  kCommandMenu,
  kToggle,
  kCheckbox,
  kPage,
  twoColLayout,
  toastPlugin,
  confirmPlugin,
  alertPlugin,
  inputDialogPlugin,
  tooltipPlugin,
} from "ketekny-ui-kit";

const app = createApp(App);

app.component("kButton", kButton);
app.component("kInput", kInput);
app.component("kRange", kRange);
app.component("kSelect", kSelect);
app.component("kDateSelector", kDateSelector);
app.component("kToggle", kToggle);
app.component("kCheckbox", kCheckbox);
app.component("kPage", kPage);
app.component("twoColLayout", twoColLayout);
app.component("kCommandMenu", kCommandMenu);

app.use(toastPlugin);
app.use(confirmPlugin);
app.use(alertPlugin);
app.use(inputDialogPlugin);
app.use(tooltipPlugin);

app.mount("#app");
```

Example component usage:

```vue
<template>
  <div class="p-6 space-y-3">
    <kInput v-model="name" label="Name" />
    <kButton label="Save" success @click="save" />
  </div>
</template>

<script setup>
import { ref } from "vue";

const name = ref("");

function save() {
  console.log("Saved:", name.value);
}
</script>
```

`kCommandMenu` is a presentation wrapper. The parent owns the categories and results through slots, while the menu exposes the current query and an `onEntryClick` helper:

```vue
<kCommandMenu
  v-model:visible="menuVisible"
  v-model:query="query"
  @on-entry-click="openResult"
>
  <template #categories="{ query }">
    <!-- category controls -->
  </template>
  <template #list="{ query, onEntryClick }">
    <button v-for="entry in entries" :key="entry.id" @click="onEntryClick(entry)">
      {{ entry.title }}
    </button>
  </template>
</kCommandMenu>
```

The `update` event emits the query after it reaches `minSearchLength` (default `3`), and emits an empty string when the query is cleared.

By default, `kCommandMenu` renders a `kSearch` trigger. Use the `trigger` slot when another control should open the menu:

```vue
<kCommandMenu v-model:visible="menuVisible">
  <template #trigger>
    <kSearch placeholder="Search everything..." />
  </template>
</kCommandMenu>
```

Two-column layout usage:

```vue
<template>
  <twoColLayout
    title="App title"
    :main-menu="menu"
    :account="account"
    @select-menu="handleSelect"
  >
    <kPage app-title="Demo" page-title="Dashboard">
      <div class="p-6">Page content</div>
    </kPage>
  </twoColLayout>
</template>

<script setup>
import { ref } from "vue";
import { kPage } from "ketekny-ui-kit";

const account = ref({
  loggedIn: true,
  firstName: "Demo",
  lastName: "User",
  email: "demo@ketekny.gr",
});

const menu = [
  { id: "dashboard", label: "Dashboard", icon: "LayoutDashboard" },
  {
    id: "reports",
    label: "Reports",
    icon: "BarChart3",
    notification: { chip: "New", icon: "Sparkles", tone: "info" },
  },
];

function handleSelect(id) {
  console.log("Selected menu item:", id);
}
</script>
```

Main-menu items may show a notification icon, chip, or both. Use
`notification: { icon, chip, tone }`, where `icon` is a Lucide icon name and
`tone` is `neutral`, `info`, `success`, `warning`, or `danger`. The existing
`badge` field remains supported as a chip value; `chip`, `notificationIcon`,
and `chipTone` are also available as shorthand fields. Notifications remain
visible when the sidebar is collapsed.

## Tailwind Setup

Use the provided preset to include semantic tokens and safelist patterns used by dynamic component classes.

This README assumes Tailwind CSS 3. The `tailwind.config.js` / `tailwind.config.cjs` examples below are the supported integration path for this kit.

`tailwind.config.js` (ESM):

```js
import tailwindPreset from "ketekny-ui-kit/tailwind-preset.js";

/** @type {import('tailwindcss').Config} */
export default {
  presets: [tailwindPreset],
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/ketekny-ui-kit/**/*.{vue,js,ts,jsx,tsx}",
  ],
};
```

`tailwind.config.cjs` (CommonJS):

```js
const tailwindPreset = require("ketekny-ui-kit/tailwind-preset.js").default;

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [tailwindPreset],
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/ketekny-ui-kit/**/*.{vue,js,ts,jsx,tsx}",
  ],
};
```

## Plugins

- `toastPlugin`: adds `$toast.success|error|warning|info|show(...)`
- `confirmPlugin`: adds `$confirm(options)`
- `alertPlugin`: adds `$alert.success|warning|error|info(...)`
- `inputDialogPlugin`: adds `$prompt(options)`
- `tooltipPlugin`: registers `v-tooltip`

### Plugin API (quick reference)

- `$toast.success(message, options?)`
- `$toast.error(message, options?)`
- `$toast.warning(message, options?)`
- `$toast.info(message, options?)`
- `$toast.show({ type?, message, duration?, ... })`
- `$confirm({ title?, message, onConfirm?, onCancel? })`
- `$alert.success(message)`
- `$alert.error(message)`
- `$alert.warning(message)`
- `$alert.info(message)`
- `$prompt({ title?, message?, placeholder?, onConfirm? })`

Note: exact option keys may vary by component/plugin implementation version.

## Integer Range

`kRange` is a dual-handle slider that selects two integers. Its `v-model` is a
two-item array in `[from, to]` order.

```vue
<template>
  <kRange
    v-model="range"
    label="Allowed age"
    :min="18"
    :max="80"
    :step="1"
  />
</template>

<script setup>
import { ref } from "vue";
import { kRange } from "ketekny-ui-kit";

const range = ref([25, 65]);
</script>
```

The configured minimum and maximum appear at the slider ends. Selected values
appear below their handles.

Props:

- `modelValue` (`Number[]`, default `[0, 100]`): selected `[from, to]` integers.
- `min` (`Number`, default `0`): minimum selectable value.
- `max` (`Number`, default `100`): maximum selectable value.
- `step` (`Number`, default `1`): positive integer increment.
- `label`, `info`, `error`, `id`: standard field metadata.
- `disabled`: disables the slider.
- `showStops`: shows every step along the slider.
- `showTooltip`: shows handle tooltips while dragging.

Events:

- `update:modelValue`: emitted while either handle moves.
- `change`: emitted when the selected range changes.

## Exports

Components:

- `kMessage`, `kCode`, `kToolbar`, `kTable`, `kTabs`, `kChip`
- `kSpinner`, `kDatatable`, `kIcon`, `kMenu`, `kSkeleton`
- `kProgressBar`, `kPagination`, `kTree`, `kButton`, `kSelect`, `kUploader`
- `kToggle`, `kCheckbox`, `kInput`, `kRange`, `kDateSelector`, `kEditor`
- `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
- `kDialog`, `kDrawer`
- `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`
- `kPage`, `Page`, `kSinglePage`, `kSingleColPage`, `kMultiColPage`, `kTwoColPage`, `twoColLayout`, `legacyTwoColLayout`

Other exports:

- `toastPlugin`, `confirmPlugin`, `alertPlugin`, `tooltipPlugin`, `inputDialogPlugin`
- `tailwindPreset`

## Common Issues

- Styles look missing:
  - Confirm `import "ketekny-ui-kit/styles.css";` is in your app entry file.
- Tailwind classes from the kit are not applied:
  - Confirm `tailwind.config` includes `./node_modules/ketekny-ui-kit/**/*.{vue,js,ts,jsx,tsx}` in `content`.
  - Confirm `presets: [tailwindPreset]` is present.
- Date/time pickers fail to resolve `dayjs/plugin/customParseFormat.js`:
  - Upgrade to `ketekny-ui-kit` `1.0.36` or newer.
- Vue peer dependency warning:
  - Install/update Vue 3 in your app: `npm install vue@^3`.
- Dynamic semantic classes are purged:
  - Keep the provided preset safelist patterns, or replicate them in your own Tailwind config.

## Development

```bash
npm run dev
npm run build
npm run preview
```

## License

ISC

## Links

- Live demo/docs: https://ui.ketekny.gr
- npm: https://www.npmjs.com/package/ketekny-ui-kit

---
_Source: https://npm.io/package/ketekny-ui-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._