5 Koleksi Komponen Copy-Paste yang Bisa Langsung Dipakai di Claude / Codex
Kalau kamu sering minta Claude atau Codex bikinin UI, kamu pasti tau rasanya: hasilnya kadang generik, kadang "AI slop". Solusinya bukan prompt yang lebih panjang — tapi kasih referensi komponen yang sudah crafted.
Ini 5 situs favorit gue yang isinya komponen copy-paste siap pakai. Tinggal copy, paste ke Claude/Codex, bilang "pakai komponen ini", jadi.
1. beautifului.dev — Beautiful UI yang Beneran Beautiful
Kurasi komponen premium yang fokus ke taste. Bukan sekadar shadcn clone — tiap komponen punya micro-detail: border halus, shadow tipis, motion yang nggak norak.
Pakai buat: Landing page, pricing, feature section yang butuh kesan mahal.
Stack: React + Tailwind + Framer Motion
Pro tip untuk Claude: Copy komponen Hero dari beautifului.dev, ganti copy jadi tentang [produkmu], keep dark slate #0F1217
2. aicss.dev — AI-friendly CSS
Ini bukan library, ini playground buat generate utility & pattern CSS yang AI ngerti. Cocok buat yang mau komponen tetap ringan tanpa install deps berat.
Pakai buat: Layout hack, grid pattern, glass effect yang kamu mau Claude yang nulis ulang.
3. transitions.dev — Transisi yang Bikin App Terasa Mahal
Koleksi transisi page & view-transitions yang super halus. Dari fade, slide, sampai shared element transition ala Native App.
Pakai buat: Portfolio, blog, atau app yang butuh page feel — bukan cuma ganti route.
Pro tip: Implement view transition dari transitions.dev #12 untuk navigasi /blogs -> /blogs/:slug
4. amicro.vercel.app — Micro-interactions Kecil yang Bikin Nagih
Tombol yang mantul pas diklik, toggle yang satisfying, checkbox yang playful. Kecil, tapi yang bikin user bilang "wah halus banget".
Pakai buat: Button, toggle, checkbox, card hover di portfolio/dashboard.
5. canvasui.dev — Canvas & Visual Eksperimen
Butuh background grid, noise, dot pattern, atau canvas art yang nggak bikin berat? Di sini tempatnya. Ornamen grid + radial fade di dev.abuamar.online inspirasinya dari pattern kayak gini.
Pakai buat: Hero background, ornamen section, empty state yang nggak kosong.
Gimana Cara Pakai di Claude / Codex?
Paling efektif kayak gini:
- Buka salah satu situs di atas
- Copy code komponen
- Di Claude/Codex, paste + prompt:
"Pakai komponen ini dari [nama situs] sebagai basis. Adaptasi ke Vue 3 + Tailwind v4 project gue. Keep dark slate #0F1217, max-w-[1280px], font Inter + JetBrains Mono 11px. Jangan ubah logic, cuma styling."
Hasilnya 10x lebih konsisten daripada suruh AI ngarang dari nol.
What would you add?
Gue baru pakai 5 ini. Kalau kamu punya koleksi lain yang wajib masuk list — kayak shadcn/ui, aceternity, magicui, atau buatanmu sendiri — drop di komentar. Mau gue bikinin part 2 versi khusus Vue + Tailwind v4?