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

JavaScript

SebelumnyaBerikutnya

Cara memakai Kliping tanpa TypeScript.

Komponen di Kliping ditulis dalam TypeScript, dan kami menyarankan Anda memakai TypeScript juga di project Anda. Tipe yang jelas membuat props dan emit setiap komponen langsung terbaca oleh editor, tanpa perlu bolak-balik membuka dokumentasi.

Meski begitu, versi JavaScript tetap tersedia. CLI bisa mengonversi komponen ke JavaScript saat menambahkannya ke project Anda — lihat halaman CLI.

Untuk keluar dari TypeScript, atur flag typescript di file components.json:

json
{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "typescript": false,
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Alias import tetap perlu didaftarkan supaya path seperti @/components/ui/button bisa diselesaikan. Tanpa TypeScript, tempatnya di jsconfig.json:

json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}
1
2
3
4
5
6
7
components.jsonFigma
Dirilis di bawah lisensi MIT. Ditulis ulang untuk Vue dari shadcn-vue, shadcn-ui-blocks, dan shadcn-hooks. Hak cipta © 2026 Kliping