Instalasi

Menyiapkan proyek supaya bisa menarik komponen dari registry glc-ui.

Prasyarat

React 19 dan sebuah framework yang mendukungnya — Next.js, Vite, Remix, semuanya bisa.
Tailwind CSS v4. Tokennya memakai @theme inline dan @custom-variant, yang tidak ada di v3.
TypeScript dengan alias path @/*. CLI shadcn membaca tsconfig.json untuk menentukan tujuan berkas dan akan berhenti kalau aliasnya tidak ada.

Langkah instalasi

Jalankan init shadcn

Lewati kalau proyekmu sudah punya components.json.

npx shadcn@latest init

Daftarkan registry @glc

Tambahkan blok registries ke components.json. Ini yang membuat @glc/… bisa diresolusi.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@glc": "https://ui.togrow.id/r/{name}.json"
  }
}

Pastikan alias path ada

Tanpa ini CLI berhenti dengan Failed to load tsconfig.json.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Pasang tema

Selalu yang pertama. Perintah ini menaruh seluruh token Company Books plus jembatan ke variabel shadcn di styles/glc/, dan memasang clsx, tailwind-merge, serta class-variance-authority.

npx shadcn@latest add @glc/glc-theme

Impor temanya

Di CSS utama proyekmu. Urutannya penting — token harus dibaca sebelum Tailwind mengekspansi utilitasnya.

@import "tailwindcss";
@import "../styles/glc/theme.css";

Tambahkan komponen pertama

npx shadcn@latest add @glc/button

Pakai komponennya

Setelah itu ia jadi berkas biasa di repositorimu. Impor seperti komponen lokal lainnya:

import { Button } from "@/components/ui/button"

export default function Page() {
  return <Button>Simpan jurnal</Button>
}

Tambah beberapa sekaligus

npx shadcn@latest add @glc/button @glc/input @glc/card — dependensi antar-komponen ikut tertarik sendiri, jadi tidak perlu menyebut @glc/glc-theme setiap kali.

Mode gelap

Dua nama kelas, satu sumber kebenaran.

Sistem desainnya memakai .theme-dark; komponen shadcn dari hulu memancarkan varian dark:. Berkas theme.css mendeklarasikan keduanya, jadi salah satu saja sudah cukup — tapi menyetel keduanya adalah yang paling aman:

const root = document.documentElement
root.classList.toggle("theme-dark", dark)
root.classList.toggle("dark", dark)

Detail lengkapnya, termasuk kenapa hanya lapisan GLC yang didefinisikan ulang di tema gelap, ada di Theming.

Kalau bermasalah

Failed to load tsconfig.json — alias @/* belum ada. Lihat langkah 3.
Komponen muncul tapi tanpa gaya — impor theme.css belum ada di CSS utama, atau Tailwind tidak memindai components/ui/. Tambahkan @source yang menunjuk ke sana.
Warnanya bukan indigo — kemungkinan @glc/glc-theme belum dipasang, atau ada globals.css lain yang menimpa variabelnya belakangan.
Registry tidak ditemukan — cek blok registries dan pastikan https://ui.togrow.id/r/button.json bisa diakses dari mesinmu.