Shadcn.io is not affiliated with official shadcn/ui
React Brand Kit Onboarding Block
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.
React Brand Kit Onboarding Block preview
Installation
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.
React Branch Strategy Onboarding Block
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.
React Budget Allocation Onboarding Block
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.