widget-03

New tab Full preview

Installation

pnpm dlx kliping@latest add widget-03

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-03.vue setelah dipasang.

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

Atau langsung sebagai halaman bersama block lain, sesuai urutan — sama dengan Builder: npx kliping@latest add navbar-01 widget-03 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

Teksnya ditulis langsung di template — ganti sesuai kebutuhan; tidak ada data contoh terpisah.

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, input, label
Files	components/blocks/widget-03/widget-03.vue components/blocks/widget-03/water-tracker.vue components/blocks/widget-03/water.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-04

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-03 selebar layar — tab Preview dengan ukuran Desktop, Tablet, dan Mobile, seluruh berkasnya di tab Code, dan Previous/Next ke block lain di Blocks.