Craftkit Documentation
Built on top of the battle-tested shadcn/ui architecture and Radix UI Primitives, customized with Jeri Dark Foundation, Electric Lime (#d3ff5e), and React 19 Server Component (RSC) patterns.
Design Tokens & Colors
Color foundations and visual design tokens from DESIGN.md.
Typography & Font Families
5 standardized typography fonts from DESIGN.md: Satoshi, Instrument Serif, Montserrat, Comfortaa, and JetBrains Mono.
.font-satoshiPrimary geometric sans-serif for main application headlines, buttons, form inputs, navigation labels, and structured data tables.
.font-instrumentHigh-contrast classical serif with elegant italic ligatures for display headlines, editorial quotes, and high-impact hero statements.
.font-montserratCrisp, wide geometric proportions optimized for large financial figures, stat card metric numerals, uppercase subheadings, and tracking badges.
.font-comfortaaSoft, rounded modern typeface designed for playful pill tags, onboarding highlights, notification counters, and friendly conversational microcopy.
.font-monoHigh-legibility developer monospace font with distinct programming ligatures for code blocks, JSON payloads, API key tokens, and terminal CLI outputs.
Proportional font sizing, line heights, and weight tokens across breakpoints.
| Scale Level | Font Size | Default Font | Preview Example |
|---|---|---|---|
| Display Title | 36px / 2.25rem | font-satoshi | Building Digital Architecture |
| Heading 1 | 24px / 1.5rem | font-satoshi | Interactive Component Library |
| Editorial Italic | 22px / 1.375rem | font-instrument | The standard for modern aesthetic craft |
| Metric Value | 18px / 1.125rem | font-montserrat | $1,250,400.00 (+18.4%) |
| Body Regular | 14px / 0.875rem | font-sans | Clean, legible body text for documentation and long-form prose. |
| Code / Key | 12px / 0.75rem | font-mono | pk_live_092a83bd78e024 |
Icons Library (Lucide React)
Curated icon library re-exported directly by Craftkit. Click any tile to copy its JSX snippet.
Form & Input Controls
Text fields, select dropdowns, search inputs, switches, checkboxes, and range sliders.
Inputs, search field, textareas, switch toggles, checkboxes, and sliders
Feedback & Overlays
Sonner-style toast notifications, confirm popups, alert callouts, dialogs, and tooltips.
Sonner toasts, modal dialogs, confirm popups, alerts, tooltips, and empty states
System Operational
Deployment Successful
API Key Expiring Soon
Database Sync Interrupted
No Documents Found
Get started by creating your first document or importing existing assets.
Layout & Surfaces
Stat cards, surface cards, structured data tables, and collapsible accordions.
StatCards, metric cards, and collapsible FAQ accordion panels
Total Projects
128
Active API Keys
24
Team Members
8
Layout Shells (Navbar, Sidebar, Footer)
Scaffolding and app shell layouts featuring headers, collapsible sidebars, and footers.
Top navigation headers, collapsible sidebar drawers, and bottom footer bars
Modern hero banner with badge, headline, glow effect, lead description, and CTA actions.
Top-level navigation header with brand identity, nav links, and action slots.
Responsive drawer sidebar with sections, active state badges, and user profile footer.
Bottom footer bar with copyright, navigation links, and legal policy links.
Dashboard & Page Widgets
10 specialized compound widgets commonly used across admin portals, SaaS overview pages, analytics dashboards, and monitoring surfaces. 100% adaptive to Light and Dark modes.
StatCard, QuickStats, ActivityFeed, RecentList, ProgressWidget, QuickActions, UserWidget, NotificationWidget, DataWidget
Total Revenue
Rp 128.4M
Artikel Terbit
342
Pengguna Aktif
14.280
Uptime Tracekit
99.99%
Ringkasan Performa Hari Ini
24.5K
Kunjungan
342
Pendaftaran Baru
4.8%
Konversi Transaksi
32%
Bounce Rate
Target Kuartal Q3 Jerilab
Aksi Cepat Admin
Aktivitas Terbaru
Iwan mempublikasikan artikel baru
5m laluPanduan Arsitektur Next.js 15 App Router
AdminkitMember baru bergabung
1j lalualex@jerilab.com bergabung ke tim Engineering
TeamDeployment Production Selesai
3j laluRelease v0.1.6 sukses melalui Guardkit CI/CD
GuardkitTransaksi Terbaru
Langganan Pro Bulanan
Acme Corp (ID: #9482)
BerhasilRp 299.000Upgrade Tier Enterprise
PT Jeri Nusantara (ID: #9483)
BerhasilRp 2.499.000Top-up Kuota Mailkit
CV Digital Jaya (ID: #9484)
BerhasilRp 150.000
Iwan Jeriatno
Super Admin
iwan@jeriproject.com
Notifikasi Sistem
1SSL Berhasil Diperbarui
Domain jeriproject.com aktif hingga 2027.
10m lalu
Database Backup Selesai
Snapshot harian PostgreSQL tersimpan aman.
2j lalu
Spesifikasi Runtime
Lingkungan eksekusi aktif
- Framework
- Next.js 15 (App Router)
- React Version
- React 19.0
- Design System
- Craftkit v0.1.6
- System Status
- Operational (99.99%)
Login Page Template
Full-page sign-in form built entirely from Craftkit primitives. Includes email & password inputs, password visibility toggle, remember-me checkbox, social login (Google / GitHub), and a link to the register page.
Sign-in screen with social login, password toggle, and remember-me
Sign in
Welcome back to Jeri Ecosystem
Don't have an account? Create one free
Register Page Template
Multi-field sign-up form with full name, email, password strength meter (4-bar indicator), terms checkbox, and a submit button that enables only when the user agrees to terms.
Sign-up form with password strength meter, terms agreement, and social sign-up
Create account
Join the Jeri Ecosystem today
Strong
Already have an account? Sign in instead
Forgot Password Page Template
Two-state password reset flow: an email input form and a success confirmation screen. The success state shows the recipient address and security guidance. Both states support animated transitions.
Two-state password reset flow: input form + success confirmation
State 1 — Email Input
Reset password
Enter your email to receive a secure reset link
We'll send a link if it matches an account.
State 2 — Email Sent
Check your inbox
Reset link sent to
alex@jeriproject.com