- 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
Instalasi
Cara memasang dependensi dan menata struktur aplikasi Anda.
Pilih Framework Anda
Mulai dengan memilih framework yang Anda pakai, lalu ikuti langkahnya untuk memasang dependensi dan menata struktur aplikasi. Kliping dirancang agar bisa jalan di semua framework berbasis Vue.
Kalau Anda belum yakin mau pakai apa, Vite adalah titik awal paling ringan, sedangkan Nuxt cocok kalau Anda butuh routing dan SSR sejak awal.
Ekstensi VSCode
Kalau Anda memakai Visual Studio Code, ada ekstensi shadcn-vue buatan @selemondev yang mempercepat proses menambahkan komponen. Karena Kliping memakai CLI yang sama, ekstensi ini juga bekerja di sini.
Fitur yang ditawarkan:
- Menjalankan inisialisasi CLI.
- Memasang komponen tanpa mengetik perintah manual.
- Membuka dokumentasi langsung dari editor.
- Melompat ke halaman dokumentasi komponen tertentu dari dalam IDE.
- Snippet untuk import dan markup komponen secara cepat.
Catatan soal sumber komponen
Ekstensi dan CLI ini mengambil komponen dari registry shadcn-vue. Untuk saat ini isinya sama persis dengan komponen Kliping, karena Kliping di-fork dari shadcn-vue v2.8.2 dan belum mengubah komponen primitifnya. Kalau Anda ingin menarik dari registry Kliping secara eksplisit, arahkan lewat variabel lingkungan SHADCN_VUE_URL:
SHADCN_VUE_URL=https://kliping.pro npx shadcn-vue@latest add button