Features Split Panel

Master-detail feature explorer with interactive selection, ideal for product tours and detailed feature showcases in Next.js apps.

Create an interactive feature explorer with master-detail layout. Built with React state and shadcn/ui components for Next.js, this component lets users select features from a list to view detailed information. Perfect for product tours, capability showcases, and feature deep-dives using Tailwind CSS responsive utilities.

Features Split Panel preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/features-split-panel.json

npx shadcn@latest add https://www.shadcn.io/r/features-split-panel.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/features-split-panel.json

bunx shadcn@latest add https://www.shadcn.io/r/features-split-panel.json

Features Tabbed Showcase

Tab-based feature switching

Features Accordion

Expandable feature details

Features Icon Grid

Grid overview

Features Numbered List

Sequential features

Features Spotlight

Single feature focus

Features Carousel

Sliding feature cards

FAQ

Last updated on March 16, 2026

Was this page helpful?

Features Split Comparison

Split view comparing two plans or products side-by-side for decision-making Next.js pages

Features Block Single Feature Spotlight

Full-width spotlight section for one hero feature with inline metrics and testimonial for React pages

Features Split Panel