Feature Highlights Scroll

Features

About

A sticky title/description column paired with a scrolling list of feature rows, each with its own heading, description, and media image.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Feature Highlights Scroll to your project and fits it to your theme.

Code

How Feature Highlights Scroll is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Feature03, { type Feature03Props } from "@/components/ui/feature-03";

const values = {
  title: "Three surfaces, one connected workflow.",
  description:
    "Flexnative brings block browsing, live editing, and code export into a single environment, built around how teams actually ship UI.",
  variant: "standard",
  animation: "subtle",
  items: [
    {
      id: "1",
      title: "Block Library",
      description:
        "Browse hundreds of production-ready blocks across every category, filtered by preset, type, and layout.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/07/07ca54b7ee581dc425f4c35699467bb698c1c5de216640669f3545380183e10d.jpg",
        alt: "Soft gradient abstract in warm tones",
      },
    },
    {
      id: "2",
      title: "Live Editor",
      description:
        "Tweak copy, media, and variants in real time, with an instant preview across breakpoints and presets.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/d2/d292576ad37ef1acbbb11bebd291082c8b910231b05c90b23028d2100d4d9eb4.jpg",
        alt: "Soft abstract shapes in muted color",
      },
    },
    {
      id: "3",
      title: "Code Export",
      description:
        "Copy production-ready code or install it via the CLI, typed and documented so it's ready to ship today.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/3a/3aab8212cf8ab78b8357b061b2697054f1d4a35c6fdcd5351bbfdcdc00302e5a.jpg",
        alt: "Soft warm gradient",
      },
    },
  ],
} satisfies Feature03Props;

export default function Feature03Demo() {
  return <Feature03 {...values} />;
}