Pour Hero: free React block

Install

Run this in any project set up for the shadcn CLI. It copies the Pour Hero source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/pour-hero.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { PourHeadline } from "@/components/pour-hero";

export default function Page() {
  return <PourHeadline />;
}

Built with

A free React block in the Heroes collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

npm: lucide-react, motion

Props

Read from the Pour Hero source. Everything is optional unless it says required.

Prop	Type	Default
linesrequired	string[]	—
className	string	—
replay	number	0
playful	boolean	false

More in Heroes

260

Before & After Hero

A hero split down the middle: drag the handle and a messy expense spreadsheet turns into a clean, matched ledger row by row, while the headline flips from a week to an afternoon.

261

Tally Hero

A hero led by one giant figure that rolls up digit by digit as the itemised statement beneath it prints line by line, landing on a total that matches, with a period switch that re-tallies both.