Khwarizmi UI

Koleksi komponen UI Svelte 5 + Tailwind CSS v4 dengan gaya "pressable" — border tebal, box-shadow berwarna sebagai alas, dan efek tekan dua tahap. Dua cara pakai: CLI yang menyalin source code ke project kamu (bebas diubah), atau library npm biasa yang tinggal di-import.

Situs dokumentasi & preview: https://ui.khwarizmi.co.id

Struktur repo

src/               Situs dokumentasi (SvelteKit) sekaligus sumber komponen
  lib/components/ui/     Source semua komponen (.svelte) — source of truth
  lib/registry.ts         Metadata tiap komponen: deskripsi, contoh, props
  routes/r/[name].json/   Endpoint registry yang dibaca CLI (format shadcn registry)
cli/               Paket npm `@khwarizmi/cli`, CLI buat instalasi komponen
packages/svelte-ui/  Paket npm `@khwarizmi/svelte-ui`, library import biasa
                      (di-build dari src/lib/components/ui/ lewat svelte-package)

Pakai di project kamu

Prasyarat: Svelte 5 (runes) dan Tailwind CSS v4.

Opsi 1 — CLI (salin kode ke project)

# pasang semua komponen
npx @khwarizmi/cli@latest add --all

# atau pilih yang perlu saja
npx @khwarizmi/cli add button card input

# lihat semua yang tersedia
npx @khwarizmi/cli list

File-nya mendarat di src/lib/components/khwarizmi-ui/ di project kamu. Dependency eksternal seperti lucide-svelte dipasang otomatis bila komponen yang dipilih membutuhkannya.

Opsi 2 — npm install (library biasa)

npm install @khwarizmi/svelte-ui lucide-svelte

<script lang="ts">
  import { Button, Card } from '@khwarizmi/svelte-ui';
</script>

Tidak ada kode yang mendarat di project kamu; update lewat versi package seperti library pada umumnya. Detail lengkap ada di packages/svelte-ui/README.md.

Warna primary

Stylesheet komponen membuat seluruh aksen utama dari dua variabel. Timpa nilainya setelah import:

@import '@khwarizmi/svelte-ui/styles.css';

:root {
  --primary: var(--color-green-400);
  --primary-shade: var(--color-green-600);
}

CLI menambahkan stylesheet tersebut otomatis. Warna status dan tone="orange" tetap independen.

Pengembangan situs ini

npm install
npm run dev       # jalankan situs dokumentasi di localhost:5173
npm run check     # type-check (svelte-check)
npm run build     # build statis ke ./build
npm run deploy    # build + wrangler deploy

Menambah komponen baru

1. Buat file komponen di src/lib/components/ui/, mengikuti gaya visual dan pola props komponen yang sudah ada (lihat Button.svelte, Select.svelte untuk referensi pola umum).
2. Daftarkan di src/lib/registry.ts: import source-nya lewat ?raw, lalu tambahkan RegistryEntry (slug, deskripsi, usage, examples, props).
3. Tambahkan preview-nya di src/lib/components/gallery/Demos.svelte.

Halaman dokumentasi (/components/<slug>), sidebar navigasi, dan endpoint /r/<slug>.json yang dipakai CLI semuanya digerakkan otomatis dari isi registry.ts — tidak perlu bikin route baru.

packages/svelte-ui (paket @khwarizmi/svelte-ui) juga ambil source dari folder yang sama (src/lib/components/ui/), jadi komponen baru otomatis ikut ke situ di build berikutnya — tidak perlu langkah tambahan, tapi package itu perlu di-npm publish ulang secara manual kalau kamu mau rilis versi barunya ke npm.