Installation

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: Installed and configured in your application.

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. Usage

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

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

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