Shadcn.io is not affiliated with official shadcn/ui
Banner Split Qr Download
A split two-tone banner for React and Next.js with an inverted QR panel on the left and a compact scan-to-download copy column on the right built with shadcn/ui and Tailwind CSS
Bridge desktop visitors to a mobile app install with this split two-tone QR download banner for React and Next.js. Features an inverted left panel hosting a 17x17 QR grid rendered from a static module-level matrix, a right content column with a tight eyebrow, title, description, and an inline arrow link sized at chrome scale. Built with TypeScript, Lucide React icons, motion/react entrance animation, and Tailwind CSS theme variables. Perfect for mobile app landing pages, cross-platform product sites, documentation desktop helpers, and any surface that needs a compact scan-to-download moment.
Related Components
React Split Two-Tone Banner Block
Two-tone contrasting halves banner
React Split Dual Actions Banner Block
Two-panel split with dual actions
React Split Icon Features Banner Block
Split two-tone icon feature banner
React Split Image Content Banner Block
Split panel with an image and copy
React Pill App Install Banner Block
Floating pill app install banner
React Stacked Download Card Banner Block
Stacked centered download CTA card
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Image Content
A split two-tone image content banner for React and Next.js with an inverted left image panel, a light right content half, eyebrow label, and inline arrow link action built with shadcn/ui and Tailwind CSS
Split Two Tone
A split two-tone banner for React and Next.js with an inverted dark headline half and a light detail half separated by a grid divider, including an inline arrow action link built with shadcn/ui and Tailwind CSS