Khaki Onboarding Steps
A utilitarian onboarding wizard designed for logistics and warehouse management platforms.
Features
- 4-step onboarding flow — Connect Warehouse, Set Routes, Add Team, Go Live
- Progress bar — Visual progress indicator with step labels
- Step states — Completed, active, and locked states with distinct styling
- Industrial design — Thick borders, sharp corners, condensed bold typography
- Khaki color palette — Earthy tones (#92856b, #d4c5a9) with dark forest (#1a2e1a) accents
- Dark mode support — Full dark variant
- Responsive — Stacks to single column on mobile
Usage
import RegistryItem from './registry-item';
export default function Page() {
return <RegistryItem />;
}
Customization
- Steps: Edit the
steps array to change titles, descriptions, icons, and completion states
- Colors: Adjust khaki and forest green hex values for your brand
- Progress: Update
currentStep to reflect the active step
- Font: Uses Barlow Condensed from Google Fonts; swap for any condensed typeface
