BlockReactSelf-contained

hero-1

Centered hero with radial gradient background and announcement badge

Live

Starting the live preview…

Runs in a sandboxed frame on a separate origin. Mounted with no props — some items need input to show anything.

Install

npx shadcn@latest add @efferd/hero-1

Needs @efferd in your components.json registries — switch to URL if it doesn't resolve.

3 variants

Other takes on hero-1 from @efferd — the same idea in another design, language or styling.

Hero with vertical border accents and gradient text effect

@efferd

Decor icon component.

Lazy image component.

Facebook icon

Minimal 404 error page with bold typography, subtle borders, and clear navigation actions.

Outline text component.

Apple icon

Side-by-side monthly and yearly pricing cards with discount badges.

Multi-column footer with app store buttons, social icons, and link groups.