Feature Steps Section

Features

About

A page section that pairs a portrait image with two flanking columns of numbered step cards to explain a product process or workflow.

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

Code

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

Usage.tsx

import { Feature02, type Feature02Props } from "@/components/ui/feature-02";

export const values = {
  title: "Turning Your Product Vision into Interface, Simply.",
  description:
    "Building with Flexnative is a seamless, guided experience designed to make shipping polished UI effortless and fast.",
  image:
    "https://cdn.21st.dev/assets/mirror/ec/ec1fd6b232ec3a724f6d650612eef1fe3c8a9de3fb130dbde446685fba08ad8a.jpg",
  imageAlt:
    "A hand holding a phone showing a product dashboard, with a laptop and monitor displaying UI mockups in the background",
  steps: [
    {
      number: "01",
      title: "Explore the Library",
      description:
        "Browse hundreds of production-ready blocks across every section type.",
    },
    {
      number: "02",
      title: "Customize & Theme",
      description:
        "Swap presets, tokens, and copy to match your brand in minutes.",
    },
    {
      number: "03",
      title: "Compose Your Pages",
      description:
        "Drag blocks into the editor and arrange them into full layouts.",
    },
    {
      number: "04",
      title: "Ship to Production",
      description: "Copy the code or install via CLI, ready to deploy today.",
    },
  ],
  animation: "subtle",
} satisfies Feature02Props;

export default function Feature02Example() {
  return <Feature02 {...values} />;
}