widget-04

New tab Full preview

Installation

pnpm dlx kliping@latest add widget-04

Belum ada project? Jalankan npx kliping@latest init dulu — lihat Installation.

Usage

Block ini satu section selebar halaman, tanpa props: teks dan datanya diubah langsung di widget-04.vue setelah dipasang.

• Impor: import Widget04 from '@/components/blocks/widget-04/widget-04.vue'
• Render: <Widget04 />

Atau langsung sebagai halaman bersama block lain, sesuai urutan — sama dengan Builder: npx kliping@latest add navbar-01 widget-04 footer-01 --page src/LandingPage.vue

• Responsive: tata letaknya sama di semua lebar layar (tanpa breakpoint).
• Dark mode: ikut kelas .dark sepenuhnya lewat token tema.

Sample content

Data contoh ada di konstanta berikut — ganti isinya dengan data Anda dengan bentuk butir yang sama:

Data	Berkas	Butir	Bentuk butir
LISTS	components/RoutineChecklist.vue	2	key, label

• Form sudah punya handler @submit contoh — sambungkan ke API Anda.

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0
Kliping items	button, checkbox, input, label
Files	components/blocks/widget-04/widget-04.vue components/blocks/widget-04/routine-checklist.vue components/blocks/widget-04/checklist.ts

In this family

Block lain di kategori Widget — bentuk section-nya sama, jadi bisa saling ditukar di halaman Anda (atau di Builder):

widget-01 · widget-02 · widget-03

Changelog

• 23 Okt 2026 · Added — Kategori Widgets bertambah (desain orisinal Kliping): widget-03 pencatat air minum (target sendiri, grafik per jam, pengingat lembut opsional) dan widget-04 rutinitas pagi/malam yang direset tiap hari.

Full preview

Buka widget-04 selebar layar — tab Preview dengan ukuran Desktop, Tablet, dan Mobile, seluruh berkasnya di tab Code, dan Previous/Next ke block lain di Blocks.