kliping.pro
  • Docs
  • Directory
  • Colors
  • Typeset
Variants
    • Introduction
    • Installation
    • Credits
  • Accordion12
  • Alert10
  • Alert Dialog6
  • Avatar16
  • Badge17
  • Breadcrumb15
  • Button23
  • Card13
  • Carousel11
  • Checkbox16
  • Collapsible4
  • Dropdown Menu8
  • Input12
  • Input OTP7
  • Navigation Menu8
  • Pagination15
  • Progress12
  • Radio Group9
  • Select11
  • Separator7
  • Slider15
  • Spinner11
  • Switch7
  • Table11
  • Tabs18
  • Textarea7
  • Tooltip7

Installation

PreviousNext

Menyiapkan project sekali, lalu memasang varian dengan satu perintah.

Item di sini dipasang dengan CLI kliping — CLI yang sama untuk komponen, block, varian, grafik, dan hook. Tidak ada paket yang perlu di-install; perintahnya dijalankan lewat npx.

Siapkan project ​

Jalankan init sekali di project Anda. Di project Vite dan Nuxt, perintah ini juga menyiapkan Tailwind CSS v4 dan alias @/ kalau belum ada, lalu menulis components.json:

pnpm dlx kliping@latest init

Untuk framework lain, ikuti Installation.

Pasang ​

Tiap halaman varian menuliskan perintahnya sendiri. Bentuknya seperti ini:

pnpm dlx kliping@latest add button-01

Ke mana berkasnya mendarat ​

Berkas variannya mendarat di components/variants/<nama>/ — misalnya components/variants/button-01/button-01.vue — dan komponen dasarnya ikut terpasang di components/ui/. Komponen yang sudah ada tidak ditimpa tanpa ditanya.

Setelah itu ​

Berkasnya milik Anda. Tidak ada versi yang perlu diikuti dan tidak ada pembaruan yang datang sendiri — ubah sesuka Anda.

PreviousIntroductionNext Credits

On This Page

Siapkan projectPasangKe mana berkasnya mendaratSetelah itu
Dirilis di bawah lisensi MIT. Ditulis ulang untuk Vue dari shadcn-vue, shadcn-ui-blocks, dan shadcn-hooks. Copyright © 2026 Kliping