KokonutUI Logo

BG-03BackgroundsUpdated, October 14, 2026

Shape Hero

A landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.

Install with
no extra packages

PRODither Reveal Hero and more like it are in Kokonut UI Pro

Installation

Shape Hero is a free, open-source React component in the Kokonut UI Backgrounds collection. Add it with the shadcn CLI, which copies the source into components/kokonutui/shape-hero.tsx, so the code is yours to change.

npx shadcn@latest add @kokonutui/shape-hero

Usage

import ShapeHero from "@/components/kokonutui/shape-hero";

export default function Example() {
  return <ShapeHero />;
}

Dependencies

Built with React and Tailwind CSS.