React Awards Block Zigzag

Break the monotony of vertical lists. This React awards block arranges achievements in an alternating left-right zigzag pattern, creating a conversational thread-like rhythm that draws the eye down the page. Each award card offsets to the opposite side, connected by a subtle center line. Built with Tailwind CSS and Lucide icons. The zigzag layout naturally slows readers down, giving each award its own moment of recognition. Perfect for about pages, company profiles, and annual reports where you want visitors to absorb every achievement rather than skim past a flat list.

React Awards Block Zigzag preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/awards-zigzag.json

npx shadcn@latest add https://www.shadcn.io/r/awards-zigzag.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/awards-zigzag.json

bunx shadcn@latest add https://www.shadcn.io/r/awards-zigzag.json

Related Components

FAQ