A sticky title/description column paired with a scrolling list of feature rows, each with its own heading, description, and media image.
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} />;
}