kilo-ui

shadcn-style Vue 3 registry for team CRUD apps.

This package does not work like a normal UI runtime dependency. It works like shadcn: the CLI copies component source code into the project that needs it. After that, the project owns the code and can edit it.

Use In A Project

From any Vue project:

After you publish this project to npm, install the exact name from its package.json (for example @lyda/kilo-ui).
Do not run npm install -D kilo-ui expecting this Vue CLI — the public npm name kilo-ui is already used by a different project.

npm install -D @lyda/kilo-ui@latest
npx kilo-ui add data-table

First install in a new project: the package postinstall runs kilo-ui init once (unless kilo.config.ts already exists). That creates kilo.config.ts in your app root (next to package.json) — not inside node_modules. Edit ui.componentsDir (or componentsPrefix) for the install folder (e.g. ki → src/components/ki/...). If the folder is not ui, kilo-ui add injects defineOptions({ name: "KiCardBox" }) so you can use <KiCardBox /> (prefix + file name). Use ui.componentTagPrefix: false to skip that. An annotated example ships at node_modules/@lyda/kilo-ui/config/kilo.config.example.ts. If install used --ignore-scripts, run npx kilo-ui init once yourself.

You can still run npx kilo-ui init anytime to add missing scaffold files; use init --force to reset kilo.config.ts to defaults (back up first if you customized it).

Note: The public npm name kilo-ui may point to a different project (not this Vue CLI). If npm install -D kilo-ui pulls SvelteKit or other wrong peers, use a scoped name or install from file: / Git. See Installation in the docs site.

What init Creates

npx kilo-ui init creates:

• kilo.config.ts - TypeScript project config (defineConfig from @lyda/kilo-ui/config), aliases, and ui.componentsDir (subfolder for installed components, default ui)
• src/styles/teamwork-ui.css - Tailwind v4 import + Kilo UI theme tokens
• src/lib/utils.ts - shared helper utilities
• env.d.ts (project root) - Vue + Vite TypeScript declarations for *.vue modules (skip if the file already exists); init also updates tsconfig.app.json / tsconfig.json with paths for @/* when possible

Add the stylesheet once in your app entry, usually src/main.ts:

import './styles/teamwork-ui.css'

Your app should also have the normal Vue @ alias pointing to src. Most Vite Vue projects already do. If not, add this to vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url)),
  },
}

What add Creates

npx kilo-ui add data-table copies source into your app:

src/components/ui/data-table/DataTable.vue
src/composables/useSortedFilteredList.ts
src/types/teamwork-ui.ts

Then use it from your own source files:

<script setup lang="ts">
import DataTable from '@/components/ui/data-table/DataTable.vue'
import type { DataTableColumn } from '@/types/teamwork-ui'

type User = { id: string; name: string; email: string }

const columns: DataTableColumn<User>[] = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true },
]

const users: User[] = [
  { id: '1', name: 'Ashiba', email: '[email protected]' },
]
</script>

<template>
  <DataTable :columns="columns" :rows="users" />
</template>

Available Components

npx kilo-ui list

Current registry items:

• data-table - searchable, sortable CRUD table
• app-navbar - responsive web/mobile navbar
• activity-log - user/activity log

Customize

Because components are copied into the app, your team can edit them directly:

src/components/ui/data-table/DataTable.vue

Theme tokens live in src/styles/teamwork-ui.css:

@theme {
  --color-twui-accent: #16a34a;
  --radius-twui: 0.5rem;
}

Documentation Site

A shadcn-style docs site lives in docs/ and is built with VitePress.

npm install
npm run docs:dev      # http://localhost:5174
npm run docs:build    # static build in docs/.vitepress/dist
npm run docs:preview  # preview the production build

It includes:

• A landing page
• Get Started (Introduction, Installation, CLI, Theming)
• Components index + per-component pages with live preview, source tab, and props tables
• Live previews import directly from registry/ so docs and what the CLI ships never drift

Repository Layout

bin/             # The kilo-ui CLI (Node, zero-dep)
registry/        # Source-of-truth for components copied by the CLI
docs/            # VitePress docs site (mirrors ui.shadcn.com style)

Editing a component? Update the file in registry/. The CLI and docs both pick it up automatically.

Publish to npm (so others can install your CLI)

1. Create an npm account and log in: npm login

2. Use a scoped package name you control (recommended). The unscoped npm name kilo-ui is already taken by a different project.

3. Bump version when you ship changes: npm version patch (or minor / major)

4. From this repo root:

   npm publish --access public

   For a scoped public package: npm publish --access public
   For private paid npm org: npm publish --access restricted

5. Consumers install with:

   npm install -D @lyda/kilo-ui
   npx kilo-ui init
   npx kilo-ui add data-table

Note: This package only ships bin/, registry/, and README.md (files in package.json). Docs and devDependencies are not published. Host the docs site separately (npm run docs:build → upload docs/.vitepress/dist).