Feature Showcase

NewPremium

Interactive three-panel bento: sidebar nav switches a live demo center panel and code snippet right panel. Perfect for SaaS feature sections.

cardsbentoshowcasetabsdemocodesaas

Installation

Terminalbash

npx motioncraft add feature-showcase

Usage

feature-showcase.tsxtsx

import { FeatureShowcase } from "@/components/cards/feature-showcase";

<FeatureShowcase
  label="AI FEATURES"
  title="Smart Automation"
  items={[
    {
      id: "routing",
      title: "Smart Routing",
      category: "Core",
      demo: <AnimatedDemo />,
      code: `const router = new SmartRouter();
router.configure({ mode: "ai" });`,
      tags: ["AI", "Routing"],
    },
  ]}
  color="cyan"
/>

Props

Prop	Type	Default	Description
items*	FeatureShowcaseItem[]	—	Array of features with id, title, demo, and code
title	string	—	Section title
subtitle	string	—	Section subtitle
label	string	SYSTEMS	Colored label text
color	string	blue	Accent color theme
className	string	—	Additional CSS classes

Related Components

Bento Grid

Apple-style bento grid layout with configurable spans and gap sizes.

Glow Card

Card with animated glow border that follows cursor position.

Hover Card

Card with smooth 3D tilt and scale on hover with spring physics.

Stack Cards

New

Cards that stack on scroll with sticky positioning and cascade effect. Each card slides into view and compresses previous ones.