widget-01

New tab Full preview

Installation

pnpm dlx kliping@latest add widget-01

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

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

Atau langsung sebagai halaman bersama block lain, sesuai urutan — sama dengan Builder: npx kliping@latest add navbar-01 widget-01 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
Files	components/blocks/widget-01/widget-01.vue components/blocks/widget-01/focus-timer.vue components/blocks/widget-01/timer.ts

In this family

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

widget-02 · widget-03 · widget-04

Changelog

• 23 Okt 2026 · Added — Kategori baru Widgets (desain orisinal Kliping): widget-01 timer fokus (waktu disimpan sebagai jam selesai, tetap benar setelah halaman dibuka lagi) dan widget-02 gerak ringan tanpa alat.

Full preview

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