The FeatureShowcase component is a responsive, theme-aware section built entirely with shadcn/ui primitives that blends storytelling and interaction. It pairs an informative left panel—featuring a headline, description, subtle stats, step-by-step accordion, and clear call-to-action buttons—with a dynamic right panel that displays tab-based media. Each tab reveals a full-bleed image that automatically fills the container, making the layout visually balanced and immersive. Ideal for product introductions or feature highlights, this component lets designers combine concise narrative content with interactive visuals to engage users across light and dark themes.
// app/feature-demo/page.tsx
import { FeatureShowcase, type TabMedia } from "@/components/ui/feature-showcase";
export default function Page() {
const tabs: TabMedia[] = [
{
value: "apparel",
label: "Apparel",
src: "https://cdn.21st.dev/assets/mirror/af/aff38f3726795680a4a5bad383106d742e54aca8728cd221901f766aff3650f4.png",
alt: "Apparel mockup",
},
{
value: "screen",
label: "Screen",
src: "https://cdn.21st.dev/assets/mirror/e1/e10c7175dec8e12ea3daa7204fd1cfba161d61aa3fda5387a022e7e258e3171f.png",
alt: "Website template on screen",
},
{
value: "abstract",
label: "Abstract",
src: "https://cdn.21st.dev/assets/mirror/61/6138ba1bccd2ae7cc89a81c656e36febe6fb4a3166232accf821861e8f8d86a1.jpg",
alt: "Abstract background",
},
];
return (
<FeatureShowcase
eyebrow="Experience"
title="Design that adapts to your vibe"
description="Turn your ideas into visuals that match your style — whether it’s product mockups, website screens, or abstract art. Instantly switch views and find what clicks with your brand."
stats={["3 styles", "Instant preview", "Creative-ready"]}
steps={[
{
id: "step-1",
title: "Upload your concept",
text:
"Start with any visual — a logo, sketch, or product photo. We’ll analyze it to set your creative tone.",
},
{
id: "step-2",
title: "Preview across styles",
text:
"Toggle between Apparel, Screen, and Abstract to visualize how your idea fits different mediums.",
},
{
id: "step-3",
title: "Refine and export",
text:
"Fine-tune the details, download polished assets, and share them directly with your team or clients.",
},
]}
tabs={tabs}
defaultTab="screen"
panelMinHeight={720}
/>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.