Ketekny UI Kit

Vue 3 UI component library styled with Tailwind CSS.

Installation

1. Install the package:

npm install ketekny-ui-kit

2. Ensure required peer/runtime dependencies exist in your app:

npm install vue tailwindcss postcss autoprefixer

If your project already has Vue + Tailwind configured, you can skip step 2.

CI Publish Auth (NPM Token)

To publish from GitLab CI, create an npm granular token and store it in the runner/project CI variables.

1. Create npm token

1. Open npm -> Access Tokens -> Generate New Token (Granular).
2. Set permissions to Read and write.
3. Under package access, allow ketekny-ui-kit.
4. Enable Bypass two-factor authentication (2FA).
5. Create token and copy it (shown only once).

2. Save token in GitLab CI/CD variables

1. Open GitLab project -> Settings -> CI/CD -> Variables.
2. Add variable:

• Key: NPM_TOKEN
• Value: <your npm token>
• Type: Variable
• Masked: true
• Protected: true (if publishing only from protected branches, e.g. main)

3. Save and rerun pipeline.

3. Verify runner/tag

• Ensure the runner used by publish jobs has the required tag (currently front).
• Ensure the project can use that runner.

Tailwind Setup (Required)

Use the provided Tailwind preset so semantic colors and component color tokens are always available.

tailwind.config.js (ESM)

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)

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}",
  ],
};

Notes:

• The preset contains the semantic color definitions and safelist patterns used by dynamic classes (alerts/toasts/button intents).
• If you replace safelist in your own config, keep equivalent patterns or dynamic semantic classes may be purged.

App CSS Setup

Import the kit stylesheet in your app entry (main.js / main.ts):

import "ketekny-ui-kit/styles.css";

Vue Setup

main.js / main.ts example:

import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";

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

const app = createApp(App);

app.component("kButton", kButton);
app.component("kInput", kInput);
app.component("kSelect", kSelect);
app.component("kDateSelector", kDateSelector);
app.component("kToggle", kToggle);

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

app.mount("#app");

Available 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

Available Exports

Components

• kMessage
• kButton
• kChip
• kCode
• kDialog
• kDrawer
• kInput
• kDateSelector
• kToolbar
• kSelect
• kTable
• kTabs
• kToggle
• kUploader
• kEditor
• kSpinner
• kSelectButton
• kDatatable
• kIcon
• kMenu
• kTags
• kSearch
• kArrayList
• kSkeleton
• kAppHeader
• kAppFooter
• kAppMain
• kHero

Tailwind preset export

• tailwindPreset

License

ISC

Links

• npm