Feature 245 - Half-bleed image with numbered listPro

An image that bleeds to the left edge of the viewport fills half the section, while the other half holds a numbered, hairline-divided feature list and CTA.

About Feature 245

An image that bleeds to the left edge of the viewport fills half the section, while the other half holds a numbered, hairline-divided feature list and CTA.

Feature 245 is a pro feature block for React, built on shadcn/ui and Tailwind CSS. It ships as 83 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • image
  • half-bleed
  • numbered
  • list
  • marketing

Installation

  1. Add the Chocolate UI registry to your components.json (see the installation guide).
  2. Run the shadcn CLI:
npx shadcn@latest add @chocolate/feature-245

Uses: button, reveal, utils.

Usage

import Feature245 from "@/components/blocks/feature-245"

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

FAQ