Shadcn.io is not affiliated with official shadcn/ui
Onboarding Milestone Targets
A milestone targets onboarding block for React and Next.js with 30, 60, and 90 day milestone inputs, metric select dropdowns, and timeline visual built with shadcn/ui and Tailwind CSS.
Set your first milestones during onboarding with this React and Next.js milestone targets block built in TypeScript. Features three milestone inputs for 30-day, 60-day, and 90-day goals each with a target description input and a metric type select dropdown for Users, Revenue, or Features, plus a vertical timeline visual with dots and connecting lines. Built with shadcn/ui Button, Input, and Select components, CountUp from react-countup for animated statistics, and Tailwind CSS. Perfect for goal-setting onboarding, OKR configuration flows, and product milestone planning screens.
Related Components
Goal Setting Onboarding
Goal selection onboarding step
Onboarding Checklist
Setup checklist with progress tracking
Completion Onboarding
Celebration screen with stats
Preferences Onboarding
User preference toggles for personalization
Workspace Onboarding
Full workspace configuration with settings
Team Invite Onboarding
Team member invitation onboarding step
FAQ
Was this page helpful?
Sign in to leave feedback.
Migration Wizard
Multi-platform data import wizard with OAuth connect, progress tracking, and state animations for React and Next.js. Built with TypeScript, shadcn/ui, Tailwind CSS.
Minimal
An ultra-minimal onboarding block for React and Next.js with single text input, workspace name setup, step indicator, and continue CTA built with shadcn/ui and Tailwind CSS.