Prasyarat

Sebelum mulai, pastikan project kamu udah punya:

Node 20+ atau Bun 1.2+ — versi lebih lama belum ditest.
Tailwind CSS v4 — Lapaktoto UI sepenuhnya bergantung ke v4 (CSS-in-CSS dengan @theme inline).
TypeScript direkomendasi — meskipun versi JSX juga tersedia (lihat opsi --jsx di CLI).

Inisialisasi project

Belum punya project? Scaffold dari template kami yang udah pre-configured:

Terminal

bunx create-lapaktoto-app@latest my-app
cd my-app
bun install
bun run dev

Sudah punya project? Cukup jalankan init:

Terminal

bunx lapaktoto-ui@latest init -d

Flag -d pakai default config supaya CLI tidak nge-prompt interaktif (cocok untuk CI dan agen otomatis).

components.json

init akan generate file components.json di root project. File ini ngasih tahu CLI mau nyalin komponen ke mana, mana aliases TypeScript yang dipakai, dan setup Tailwind kamu.

components.json

{
  "$schema": "https://lapaktoto.dev/schema.json",
  "style": "lapaktoto-default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

Plus update ke app/globals.css (atau src/styles/globals.css untuk Vite):

app/globals.css

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --radius-lg: var(--radius);
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.62 0.19 28);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.135 0 0);
  --foreground: oklch(0.97 0 0);
  --primary: oklch(0.7 0.19 28);
}

Tambah komponen

Sekarang tinggal pilih komponen. CLI nyalin file .tsx + update dependency package.json kalau perlu.

Terminal

# Satu komponen
bunx lapaktoto-ui add button

# Beberapa sekaligus
bunx lapaktoto-ui add button card dialog input

# Semua komponen
bunx lapaktoto-ui add --all

# Preview tanpa nulis file
bunx lapaktoto-ui add badge --dry-run

Setelah komponen ditambah, dia akan muncul di components/ui/:

components/
  ui/
    button.tsx
    card.tsx
    dialog.tsx
    input.tsx
lib/
  utils.ts

Catatan per framework

Next.js (App Router)

Direkomendasi karena 80% komponen kami testing di Next.js. RSC support sudah otomatis — komponen yang butuh interactivity ada "use client".

Vite + React

Set "rsc": false di components.json supaya CLI nyalin versi non-server komponen.

Astro

Pakai integrasi @astrojs/react. Komponen interaktif harus ditandai dengan client:load atau client:visible.

Remix / React Router 7

Bekerja out of the box. Tidak ada konfigurasi khusus.

Next step

Lanjut ke Theming untuk kustomisasi warna, atau langsung lompat ke komponen pertama.