Rujukan & standar desain
Pratinjau lengkap themekit classroom.
Satu bahasa desain untuk seluruh area dalam aplikasi — warna, jarak, huruf, dan setiap komponen dari sistem aslinya, dipindahkan ke HTML, CSS, dan JavaScript murni. Tanpa React, tanpa Tailwind, tanpa langkah build.
Halaman komponen
42
dengan galeri hidup
Pola halaman
5
kerangka siap pakai
Token desain
138
satu sumber kebenaran
Dependensi
0
tanpa build step
Cara membaca pratinjau ini
Setiap kartu di bawah membuka halaman hidup — bukan gambar. Semua komponen di halaman itu benar-benar berjalan: klik, tab, modal, tabel yang bisa diurutkan. Kalau butuh aturan dan nilai teknisnya, buka dokumentasi.
Pratinjau semua halaman
42 halaman komponen dan pola, dikelompokkan seperti di sidebar.
Mulai
Token & tema
138 token warna, jarak, radius, dan bayangan.
Ikon
Set ikon SVG sebaris, warisan lucide-react.
Dasar
Tombol
8 varian, 7 ukuran, keadaan memuat & nonaktif.
Lencana
Label status ringkas untuk daftar dan kartu.
Kartu
Wadah isi dengan kepala, badan, dan kaki.
Kartu statistik
Angka besar dengan tren dan ikon.
Peringatan
Pesan kontekstual empat nada.
Avatar
8 warna deterministik, dengan lencana status.
Progres
Bilah dan lingkaran kemajuan.
Kerangka muat
Placeholder selama data dimuat.
Keadaan kosong
Tampilan saat belum ada data.
Formulir
Input & label
Kendali formulir dengan bantuan dan galat.
Centang & radio
Pilihan tunggal dan jamak.
Sakelar
Nilai hidup/mati instan.
Pilihan cari
Dropdown dengan penyaring ketikan.
Kekuatan sandi
Meter kekuatan dan syarat sandi.
Navigasi
Tab
Panel bertukar dengan peran ARIA lengkap.
Akordeon
Bagian yang bisa dibuka-tutup.
Menu dropdown
Menu melayang dengan navigasi papan ketik.
Remah
Jejak posisi halaman.
Paginasi
Pindah halaman daftar panjang.
Langkah
Alur bertahap dengan status.
Sidebar
Navigasi samping aplikasi.
Topbar
Bilah atas dengan aksi dan pencarian.
Umpan balik
Modal
Dialog terfokus dengan jebakan fokus.
Laci
Panel geser dari sisi layar.
Toast
Notifikasi sementara.
Tooltip
Keterangan singkat saat disinggahi.
Data
Tabel
Tabel data dengan urut dan pilih-semua.
Daftar
Daftar isi campuran.
Garis waktu
Riwayat kejadian berurutan.
Peringkat
Papan peringkat dengan medali.
Khas classroom
Kartu mapel
Kartu mata pelajaran bergradien.
Pilihan jawaban
Opsi ujian beserta penanda benar/salah.
Navigasi soal
Grid nomor soal dan statusnya.
Bar ujian
Bilah kemajuan pengerjaan ujian.
Pita peran
Penanda peran pengguna di atas halaman.
Pola halaman
Dokumentasi
Aturan yang mengikat, nilai token, dan cara menambah komponen baru.
Mulai cepat
Pakai kit di halaman baru dalam lima menit.
Pemasangan
Berkas apa saja, urutan pemuatan, dan cara memasangnya.
Standar desain
Aturan warna, jarak, huruf, dan keadaan yang mengikat.
Token & variabel
Daftar lengkap 138 token beserta nilainya.
Aturan komponen
Penamaan, struktur, dan yang dilarang.
Aksesibilitas
Sasaran WCAG dan cara memeriksanya.
Migrasi dari Tailwind
Peta kelas Tailwind lama ke kelas ck-.
Menambah komponen
Alur kerja dan penjaga otomatisnya.
Ikhtisar dokumentasi
Peta isi dan urutan bacanya.
Yang TIDAK termasuk di kit ini
Halaman pemasaran/landing page, halaman hukum (privasi & ketentuan), dan seluruh logika aplikasi (panggilan API, penyimpanan, otentikasi). Kit ini hanya lapisan tampilan area dalam aplikasi.