Kliping
KlipingBerandaDokumentasiKomponenBlocksVariasiTemplateDice UIHooks
Bagian
  • Pengenalan
  • Komponen
  • Instalasi
  • Tema & Kustomisasi
  • Mode Gelap
  • CLI
  • RTL
  • Skills
  • Server MCP
  • Form
  • Catatan Perubahan
Instalasi
  • Vite
  • Nuxt
  • Astro
  • Laravel
  • Manual
Mode Gelap
  • Vite
  • Nuxt
  • Vitepress
  • Astro
Form
  • VeeValidate
  • TanStack Form
  • Formisch
Registry
  • Ikhtisar
  • Memulai
  • Contoh
  • registry.json
  • registry-item.json
  • Tanya Jawab
Utilitas
  • scroll-fade
  • shimmer
Lainnya
  • components.json
  • JavaScript
  • Figma
  • Direktori Registry
  • Warna
  • Typeset
  • Dokumentasi Lama
  • Tentang
  • Kredit
  • Kontribusi
Komponen
  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Attachment
  • Avatar
  • Badge
  • Breadcrumb
  • Bubble
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Form
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kbd
  • Label
  • Marker
  • Menubar
  • Message
  • Message Scroller
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Pin Input
  • Popover
  • Progress
  • Questionnaire
  • Radio Group
  • Range Calendar
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tags Input
  • Textarea
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Typography

Kredit

SebelumnyaBerikutnya

Dari mana isi registry ini berasal, dan kewajiban lisensi yang menyertainya.

Semua yang ada di sini ditulis dengan Vue. Tidak ada satu baris pun kode React di dalamnya, dan tidak ada paket React yang ikut terpasang — silakan periksa sendiri package.json.

Yang tidak ditulis dari nol adalah keputusan desainnya: susunan tiap block, nama tiap varian, nama dan bentuk opsi tiap composable, serta tampilan yang dijanjikan masing-masing. Semua itu diambil dari karya yang sudah lebih dulu ada.

Meminjam bentuk dari karya berlisensi MIT menjadikan hasilnya karya turunan, dan MIT meminta satu hal sebagai gantinya: pemberitahuan hak ciptanya ikut disertakan. Halaman ini dan berkas LICENSE adalah tempat kewajiban itu dipenuhi.

Rantainya ​

BagianSumber langsungHak cipta
Komponen primitifshadcn-vueCopyright (c) 2023 unovue
Block dan varian komponenshadcn-ui-blocksCopyright 2025 Shadcn UI Blocks
Komponen berperilakuDice UICopyright (c) 2024 Sadman Sakib
Composableshadcn-hooksCopyright (c) 2025 Brendan Dash
Templateempat repo terpisah milik akash3444lihat tabel di bawah

Empat baris pertama MIT, dan sebagiannya sendiri punya hulu. Baris kelima — template — berbeda, dan bagiannya sendiri ada di bawah. shadcn-vue berbasis pada shadcn/ui (Copyright (c) 2023 shadcn); shadcn-hooks meminjam bentuk API dari ahooks, usehooks-ts, dan react-use — ketiganya MIT juga.

Rantai lengkapnya tidak boleh diputus hanya karena kodenya ditulis ulang ke Vue. Itu bukan sopan santun, itu syarat lisensinya.

Apa yang berubah dalam perpindahannya ​

Yang diangkut adalah bentuk dan susunannya. Yang ditulis ulang adalah caranya bekerja, dan di beberapa tempat perbedaannya nyata:

  • Keadaan komponen dipegang ref dan computed, bukan useState dan useMemo. Yang di React perlu dibungkus useCallback di sini tidak perlu dibungkus apa-apa.
  • Prop terkendali Radix — value, checked, pressed, open — disatukan Reka UI di bawah v-model.
  • Pustaka animasi React digantikan animasi CSS. Lima primitif magicui — marquee, border-beam, dot-pattern, particles, animated-grid-pattern — ditulis ulang tanpa satu pun pustaka animasi.
  • Beberapa hook yang dibawa block sumbernya tidak ikut, karena padanannya sudah ada sebagai composable di registry ini.

Satu block sengaja tidak diangkut: cta-06, yang latarnya digambar pustaka shader WebGL tanpa port Vue. Alasannya tercatat di skrip/blok-dilewati.json.

Komponen Dice UI: satu lapisan yang hilang seluruhnya ​

Yang diangkut dari Dice UI bukan susunan halaman melainkan primitif berperilaku — satu berkas memuat delapan sampai lima belas bagian yang saling bicara. Di React percakapan itu ditempuh dengan createContext ditambah sebuah store luar yang dilanggan tiap bagian lewat useSyncExternalStore dengan selektornya masing-masing.

Store itu ada untuk satu alasan: supaya bagian yang tidak memakai sebuah nilai tidak ikut render ulang ketika nilai itu berubah. Reaktivitas Vue sudah melacak ketergantungan per nilai, jadi seluruh lapisan itu runtuh jadi provide/inject di atas satu computed. Yang tersisa dari kode aslinya perilakunya, dan perilakunya tidak berubah.

Beberapa komponen Dice UI dibangun di atas paket React @diceui/* yang tidak punya padanan Vue. Yang begitu tidak dibungkus: bagian headless-nya ditulis ulang, atau — kalau ekosistem Vue sudah punya jawabannya sendiri — diserahkan ke sana. Daftar di /dice disusun dari isi src/dice/ yang sesungguhnya, bukan dari daftar niat.

Yang diserahkan ke pustaka Vue yang sudah ada, dan pustaka mana:

KomponenLapisan headless-nyaMilik
color-picker, color-swatchkeluarga warna Reka UI — penguraian dan pengubahan ruang warnaReka UI, MIT
rating, editable, tags-input, listbox, checkbox-group, stepper, combobox, time-pickerprimitif Reka UI yang sepadanReka UI, MIT
sortable, kanbanseret dan lepasdnd-kit-vue di atas @dnd-kit/abstract, MIT
data-table, data-gridpenyaringan, pengurutan, penghalamanTanStack Table, MIT
qr-codepenyusunan matriks QRqrcode, MIT

Menyerahkannya bukan jalan pintas. Pemilih warna Dice UI menulis pengurai dan penukar ruang warnanya sendiri — sekitar seribu tujuh ratus baris — dan menulis ulang seribu tujuh ratus baris perhitungan warna ke Vue hanya untuk berhenti memakai yang sudah ada, teruji, dan sudah terpasang di repo ini bukan kesetiaan pada sumbernya, melainkan pemborosan yang menanggung bug-nya sendiri.

Yang tetap ditulis di sini bagian yang memang tidak bisa dipinjam dari mana pun. Sembilan berkas perhitungan murni, semuanya beruji:

BerkasYang dihitungnya
cropper/potong.tsskala, jepitan geseran, dan kotak potong dengan putaran
data-grid/petak.tskemudi kursor, rentang pilihan, dan penguraian papan klip
media-player/waktu.tspenulisan waktu, sisa durasi, dan persen penyangga
phone-input/negara.tstebakan negara dari kode telepon, 239 baris data
mask-input/pola.tspola masukan bertopeng, termasuk Luhn untuk kartu
masonry/susun.tspenempatan batu bata ke kolom terpendek
file-upload/berkas.tspencocokan accept, batas ukuran, ukuran terbaca
key-value/tempel.tspenguraian tempelan NAMA=nilai berbaris banyak
sortable/pindah.tspemindahan item di dalam dan antar daftar

Uji itu bukan hiasan. Beberapa cacat memang baru ketahuan lewatnya — pelepas kutip yang merusak "a" dan "b", dan +44 yang dikembalikan sebagai Guernsey alih-alih Britania Raya karena delapan kode telepon dipakai lebih dari satu negara.

Template: statusnya berbeda, dan itu perlu disebut ​

Template tidak datang dari shadcn-ui-blocks. Yang ada di sana cuma metadatanya — nama, tangkapan layar, dan tautan; kodenya tinggal di empat repo terpisah. Ketiganya diperiksa satu per satu, dan hasilnya tidak seragam:

TemplateRepo asalLisensi
HomeGuardianakash3444/homeguardian-shadcn-landing-pageMIT — Copyright (c) 2025 HomeGuardian
Minimalist Landing Pageakash3444/shadcn-ui-landing-pagetidak disebutkan
PureLandingakash3444/pure-landing-shadcnui-templatetidak disebutkan
Minimal Portfolioakash3444/portfolio-templatetidak disebutkan

"Tidak disebutkan" berarti persis itu: tidak ada berkas LICENSE, tidak ada kolom license di package.json, dan tidak ada satu kalimat pun tentang lisensi di README-nya. Ketiganya dibagikan penulisnya sebagai template yang memang dimaksudkan untuk dipakai orang, tapi maksud dan lisensi bukan hal yang sama, dan kami tidak akan berpura-pura sebaliknya.

Yang kami lakukan sementara statusnya begitu:

  • Asal tiap template disebut di kartunya masing-masing di /templates, lengkap dengan tautan ke repo aslinya.
  • Statusnya dicatat di skrip/template.json dan ikut terbawa ke katalog yang dibaca situs ini.
  • Kalau penulisnya keberatan, satu pesan cukup — ketiganya kami cabut dari sini tanpa perlu ditanya dua kali. Silakan hubungi lewat issue di repo ini.

Yang akan menyelesaikannya untuk seterusnya cuma satu hal: penulisnya menambahkan berkas lisensi di repo aslinya.

Rincian per composable ​

Tiap composable menyebut hulunya masing-masing — sebagian dari ahooks, sebagian dari usehooks-ts, sebagian ditulis shadcn-hooks sendiri. Tabelnya ada di halaman kredit composable.

Lisensi Kliping sendiri ​

MIT, Copyright (c) 2026 Kliping. Silakan diangkut, ditulis ulang, dan didistribusikan ulang — dengan syarat yang sama: pemberitahuan hak ciptanya ikut dibawa.

TentangKontribusi

Di halaman ini

RantainyaApa yang berubah dalam perpindahannyaKomponen Dice UI: satu lapisan yang hilang seluruhnyaTemplate: statusnya berbeda, dan itu perlu disebutRincian per composableLisensi Kliping sendiri
Dirilis di bawah lisensi MIT. Ditulis ulang untuk Vue dari shadcn-vue, shadcn-ui-blocks, dan shadcn-hooks. Hak cipta © 2026 Kliping