Shadcn.io is not affiliated with official shadcn/ui
Onboarding Brand Kit
A React brand kit onboarding block for Next.js with logo upload, hex color inputs, font selector, and live preview. Built with shadcn/ui and Tailwind CSS.
Configure your brand identity with this React brand kit onboarding block for Next.js. Features a dashed-border logo upload area, primary and secondary hex color inputs with live color swatches, a font family dropdown selector using shadcn/ui Select, a preview section displaying logo placeholder alongside brand colors, and staggered Framer Motion entrance animations. Built with TypeScript, shadcn/ui components (Input, Select, Button), Framer Motion, Balancer for balanced text wrapping, and Tailwind CSS. Perfect for white-label product setup, brand customization onboarding, and design system configuration flows.
Related Components
React Workspace Setup Onboarding Block
Workspace name and configuration setup
React Avatar Upload Onboarding Block
Profile picture upload with crop and preview
React Preferences Onboarding Block
App preference toggles with switch controls
React Template Selection Onboarding Block
Choose a starter template for your project
React Theme Setup Onboarding Block
Light, dark, and system theme configuration
React Profile Setup Onboarding Block
Profile form with avatar and bio fields
FAQ
Was this page helpful?
Sign in to leave feedback.
Branch Strategy
Git branch strategy selection onboarding for React and Next.js with three strategy options, diagram descriptions, pros lists, and single-select ring highlight. Built with shadcn/ui and Tailwind CSS.
Budget Allocation
A React budget allocation onboarding block for Next.js with NumberFlow animated total, category rows with progress bars, and set budgets action. Built with shadcn/ui and Tailwind CSS.