Mulai

Instalasi

Circca HIG terdiri dari dua paket: @divistant/circca-tokens (variabel CSS + preset Tailwind v4) dan @divistant/circca-react (komponen). Keduanya dipublikasikan di GitHub Packages organisasi Divistant.

1. Pasang paket

Tambahkan registry GitHub Packages untuk scope @divistant di .npmrc proyek, lalu pasang paket. Ikon memakai Phosphor — set yang sama dengan library Figma Circca HIG · Icons.

.npmrc

@divistant:registry=https://npm.pkg.github.com

Terminal

npm install @divistant/circca-tokens @divistant/circca-react @phosphor-icons/react

2. Impor gaya

Untuk aplikasi Tailwind CSS v4, cukup satu baris setelah Tailwind. Font Inter dan Manrope dimuat lewat next/font, lalu dipetakan ke token.

app/globals.css

@import "tailwindcss";
@import "@divistant/circca-react/styles.css";

:root {
  --circca-font-family-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --circca-font-family-display: var(--font-manrope), var(--font-inter), sans-serif;
}

3. Brand & tema

Pasang data-brand dan data-theme di <html> agar warna benar sejak tampilan pertama. CirccaProvider menjaga atribut itu tetap sinkron bila pengguna mengganti tema.

app/layout.tsx

import { CirccaProvider } from '@divistant/circca-react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="id" data-brand="bizops" data-theme="system" suppressHydrationWarning>
      <body>
        <CirccaProvider brand="bizops">{children}</CirccaProvider>
      </body>
    </html>
  );
}

data-theme	Tampilan
light	Terang (default)
dark	Gelap
light-contrast	Terang · kontras tinggi
dark-contrast	Gelap · kontras tinggi
system	Ikuti sistem operasi, termasuk kontras tinggi (prefers-contrast)

4. Komponen pertama

app/po/page.tsx

'use client';
import { Button, FormField, Input } from '@divistant/circca-react';
import { Plus } from '@phosphor-icons/react';

export default function BuatPO() {
  return (
    <form className="grid max-w-md gap-4">
      <FormField label="Nomor PO customer" required>
        <Input placeholder="PO/2026/0001" />
      </FormField>
      <Button variant="primary" leadingVisual={Plus}>Buat PO</Button>
    </form>
  );
}

Ikon

Prop ikon (leadingVisual, trailingVisual) menerima komponen (leadingVisual={Plus}) atau elemen. Dari Server Component Next.js, oper elemen dari @phosphor-icons/react/ssr — fungsi tidak bisa dikirim dari server ke client.

tsx

import { Plus } from '@phosphor-icons/react/ssr';

<Button leadingVisual={<Plus />}>Buat PO</Button>

Kelas Tailwind

Palet bawaan Tailwind dimatikan; yang tersedia hanya token Circca. Nama kelas mengikuti nama token di Figma.

Token Figma	Kelas	Contoh
bg/*	bg-*	bg-canvas, bg-subtle
fg/*	text-*	text-default, text-muted
border/*	border-*	border-default, border-control
lainnya	nama lengkap	bg-accent-emphasis, text-danger-fg, bg-dataviz-cat-1
Text style	type-*	type-body-default, type-headline-default, type-footnote-default
Material	material-* / glass-*	material-chrome, glass-regular
Tinggi kontrol	h-control-*	h-control-sm (24), h-control-md (28), h-control-lg (36)

Untuk asisten AI

Ringkasan seluruh design system tersedia di /llms.txt. Tiap halaman komponen punya tombol Salin sebagai Markdown untuk ditempel ke Claude atau Cursor sebelum meminta kode.