Kewti components are CLI-driven and copy-paste ready. When you install a component, npx kewti-cli downloads the source code directly into your project's src/kewti/ui/ directory, giving you full ownership and control.

Prerequisites

Ensure your project meets the following requirements:

• React: >= 18.0.0
• Node.js: >= 20.0.0
• Tailwind CSS: >= 3.0.0 — Installed and configured in your application (see below).

0. Install Tailwind CSS

All Kewti components are styled with Tailwind CSS utility classes, so Tailwind must be set up before adding any component.

npm install tailwindcss @tailwindcss/postcss postcss

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

@import "tailwindcss";

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

@tailwind base;
@tailwind components;
@tailwind utilities;

1. Configure Import Aliases

Kewti uses the @/* path alias convention for clean imports (e.g., import { KewtiInput } from "@/kewti/ui").

TypeScript / Next.js (tsconfig.json or jsconfig.json)

Ensure your tsconfig.json contains the paths mapping:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Note: If your application does not use a src/ directory, set "@/*": ["./*"] instead.

Vite Projects (vite.config.ts)

If you are using Vite, install @types/node and update vite.config.ts to resolve the @ alias:

import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

2. Add Components

Use the npx kewti-cli CLI to add components directly to your project codebase:

# Add Input with Amharic transliteration support
npx kewti-cli add input

# Add Calendar & DatePicker
npx kewti-cli add calendar

# Add Ethiopian Time Picker
npx kewti-cli add time

# Add Ethiopian Location Selector
npx kewti-cli add location-selector

The CLI automatically:

1. Copies self-contained component source files into src/kewti/ui/.
2. Installs required npm dependencies (e.g., kenat, lucide-react, clsx, tailwind-merge).
3. Updates src/kewti/ui/index.ts with barrel exports.

3. Add Fonts

Kewti provides optimized Ge'ez and Amharic web fonts stored directly in your workspace.

# Install a font (e.g., Selam, Balderasu, Bela Bereka, Loga Comic)
npx kewti-cli font selam

Or using the full command:

npx kewti-cli install font selam

Register Font in CSS

Create or update your CSS file (e.g., fonts.css or globals.css) and register the installed font using @font-face:

@font-face {
  font-family: 'Selam_regular';
  src: url('/src/kewti/fonts/Selam/Selam_Regular_a59259475e.otf') format('opentype');
  font-display: swap;
}

Import your CSS file at the root of your app:

import "./globals.css";

4. Add AI Skill to your Assistant

You can equip your AI coding assistant (Antigravity, Cursor, GitHub Copilot, Claude) with complete knowledge of Kewti components, Ethiopian calendar rules, and cyclical time logic in one command:

# Add skill for all supported AI agents
npx kewti-cli skill

# Or configure specifically for your editor:
npx kewti-cli skill cursor
npx kewti-cli skill antigravity
npx kewti-cli skill copilot
npx kewti-cli skill claude

Learn more in the AI Agent Skills documentation.

5. Usage

Import and use the added components inside your project using your import alias:

import { KewtiInput, KewtiCalendar, KewtiTime } from "@/kewti/ui";

export default function Page() {
  return (
    <div className="p-8 space-y-6 max-w-md">
      <KewtiInput placeholder="ስምዎን ያስገቡ..." />
      <KewtiCalendar calendarPref="ethiopian" />
      <KewtiTime />
    </div>
  );
}

Package Managers

The CLI automatically detects your project's package manager (pnpm, npm, yarn, or bun) and runs the appropriate install command for dependencies.