dashboard-01

New tab Full preview

Installation

pnpm dlx kliping@latest add dashboard-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 dashboard-01.vue setelah dipasang.

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

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

• Responsive: menyesuaikan lebar layar lewat breakpoint sm:, md:, lg:.
• Dark mode: ikut kelas .dark lewat token tema, ditambah beberapa kelas dark: khusus.

Sample content

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

Data	Berkas	Butir	Bentuk butir
data	dashboard-01.vue	30	id, header, type, status, target, limit, reviewer
chartData	components/ChartAreaInteractive.vue	91	date, desktop, mobile

• Gambar/aset dari host luar: github.com (1) — ganti dengan aset Anda sendiri.
• 1 tautan masih href="#" — arahkan ke halaman 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	@dnd-kit/abstract@^0.1.21, @tabler/icons-vue@^3.46.0, @tanstack/vue-table@^9.1.2, @unovis/vue@^1.6.7, dnd-kit-vue@^0.0.2, zod@^3.25.76
Kliping items	avatar, badge, button, card, chart, checkbox, dropdown-menu, label, select, separator, sidebar, table, tabs
Files	components/blocks/dashboard-01/dashboard-01.vue components/blocks/dashboard-01/app-sidebar.vue components/blocks/dashboard-01/chart-area-interactive.vue components/blocks/dashboard-01/data-table.vue components/blocks/dashboard-01/section-cards.vue components/blocks/dashboard-01/site-header.vue components/blocks/dashboard-01/nav-documents.vue components/blocks/dashboard-01/nav-main.vue components/blocks/dashboard-01/nav-secondary.vue components/blocks/dashboard-01/nav-user.vue components/blocks/dashboard-01/draggable-row.vue components/blocks/dashboard-01/drag-handle.vue components/blocks/dashboard-01/features.ts

Changelog

• 19 Okt 2026 · Fixed — Aksesibilitas: nama tombol ikon dan kontras teks.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.

Full preview

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