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
WYSIWYG rich text editor powered by react-quill-new with dark theme styling and customizable toolbars
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
Wizard & Stepper
Responsive step cards, preserved drafts, validation and a persistent action footer.
Switch the indicator style and try moving between steps.
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
Interactive sidebar & user menu
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.
Tables & DataTables
Semantic tabular components for presenting structured datasets. Includes raw lightweight HTML-semantic tables and full-featured interactive DataTables with live search, column sorting, row selection, bulk actions, and pagination.
Table, TableHeader, TableBody, TableHead, TableRow, TableCell, DataTable
Search, filters & pagination
| Sample package | Status |
|---|---|
| Starter | Published |
| Team | Published |
Lightweight tabular view for transactions, server logs, and static records.
| Invoice ID | Organization | Billing Plan | Issue Date | Status | Total Amount |
|---|---|---|---|---|---|
| #INV-9482 | Acme Global | Enterprise | Aug 15, 2026 | Paid | $2,499.00 |
| #INV-9483 | Devta CMS Portal | Pro Tier | Aug 14, 2026 | Paid | $299.00 |
| #INV-9484 | Nexus Cloud Services | Mailkit Quota | Aug 12, 2026 | Paid | $150.00 |
| #INV-9485 | Alpha Lab Research | Pro Tier | Aug 10, 2026 | Pending | $299.00 |
Full-featured data grid with live keyword search, column sorting, selectable checkboxes, bulk actions, and pagination.
Customer Directory
Active verified organizations and accounts across all Jeri products.
Organization & Account | Role | Subscription | Account Status | Monthly MRR | |
|---|---|---|---|---|---|
A Acme Globalcontact@acme.corp | Owner | Enterprise | Active | $2,499 | |
D Devta Systemsadmin@devta.io | Admin | Enterprise | Active | $2,499 | |
N Nexus Cloudbilling@nexus.dev | Billing | Pro | Active | $299 | |
A Alpha Labteam@alphalab.ai | Developer | Pro | Pending | $299 | |
O Orbit Payops@orbitpay.co | Admin | Enterprise | Active | $2,499 |
Lists & List Items
Flexible structured row components for directories, activity logs, settings toggles, and metadata displays. Supports compound subcomponents and high-level prop interfaces.
List, ListHeader, ListItem, ListItemLeading, ListItemContent, ListItemTitle, ListItemDescription, ListItemTrailing, ListDivider
Bordered card list with avatars, roles, and status tags.
- JAJeri AtnoFounder & Chief Architect • jeriproject.comOwner
- DSDevta SystemsCore Infrastructure LeadAdmin
- NCNexus CloudSite Reliability EngineerEditor
- ALAlpha LabAI Research EngineerViewer
Settings panel with leading icons and interactive switches.
- Two-Factor Authentication (2FA)Require authenticator OTP code on every login attempt
- Automated API Secret RotationRotate production API keys automatically every 90 days
- Security Incident AlertsSend urgent push notifications to registered devices
Divided row items with status icons, timestamps, and chevrons.
Production Build Deployed Successfully
Release v0.3.0 deployed to Singapore edge nodes via Shipkit
2 mins ago- DB
Schema Migration Synchronized
Applied 4 PostgreSQL Drizzle migrations with zero downtime
14 mins ago SSO Provider Certificate Refreshed
Guardkit central authentication engine updated token keys
1 hour ago
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
$128.4K
Published Articles
342
Active Users
14,280
System Uptime
99.99%
Daily Performance Summary
24.5K
Total Visits
342
New Signups
4.8%
Conversion Rate
32%
Bounce Rate
Q3 Strategic Milestones
Admin Quick Actions
Recent Audit Activity
Iwan published new documentation
5m agoNext.js 15 App Router Architecture Guide
DeskkitNew member joined engineering team
1h agoalex@jerilab.com assigned to Frontend Core
TeamProduction build deployed successfully
3h agoRelease v0.2.0 verified across all probes
GuardkitRecent Transactions
Monthly Pro Subscription
Acme Corp (ID: #9482)
Paid$299.00Enterprise Tier Upgrade
Nexus Global (ID: #9483)
Paid$2,499.00Mailkit Credit Quota Add-on
Digital Flow (ID: #9484)
Paid$150.00
Iwan Jeriatno
Super Admin
iwan@jeriproject.com
System Notifications
1SSL Certificate Renewed
Domain jeriproject.com secured through 2027.
10m ago
PostgreSQL Automated Snapshot
Daily multi-region backup completed.
2h ago
Runtime Specifications
Active execution environment
- Framework
- Next.js 15 (App Router)
- React Version
- React 19.0
- Design System
- Craftkit v0.2.0
- System Status
- Operational (99.99%)
Charts & Data Visualizations
Ultra-lightweight, zero-dependency SVG data visualization components. Features smooth Bezier line charts, multi-series bar charts, concentric donut breakdowns, sparklines, and polygonal capability radars.
LineChart, BarChart, AreaChart, DonutChart, Sparkline, RadarChart
Monthly Revenue & Annual Target
Comparing current performance against 2025 baseline
Global API Invocations
Processed requests across edge routing gateways
Quarterly Conversions (Pro vs Enterprise)
New customer subscriptions per quarter
Acquisition Traffic Channels
Visitor sources and channel distribution
Architecture & Resilience Index
System capabilities score across 6 technical pillars
Micro Inline Trend Visualizations
Sparklines render lightweight vector curves inside table cells, compact list items, and high-density KPI metric cards.
Onboarding & Activation
Dedicated onboarding components designed to guide new users, accelerate product adoption, and track activation milestones via interactive spotlight tours and milestone checklists.
OnboardingTour, OnboardingChecklist
Developer Onboarding Guide
Click tasks below to toggle completion and track activation progress.
Interactive & Keyboard Accessible
Walk through new user onboarding with dynamic SVG spotlight cutouts, smooth transitions, step indicators, and automatic localStorage persistence. Click the backdrop or press Esc anytime to exit.
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