Shadcn Expandable Feature Block One

Block One is a compact expandable features section for a SaaS or product page that wants two capabilities to feel equally visual. The React component keeps expandedIndex, progressKey, and pause state, then uses a seven-second interval to alternate between Smart email composition and AI autocomplete on medium screens and above.

How the section is built

The layout is a two-column Tailwind CSS grid that changes from 1fr 1fr to 2fr 1fr or 1fr 2fr as the active card changes. Each card places a low-opacity image behind a local illustration (Models4Illustration or MapIllustration), so the feature section reads as a visual product story rather than a plain text list.

Interaction model

Visitors can click the full-card button to choose a feature. Hovering the active card pauses the progress animation, and mobile keeps the first card active by using useMedia to avoid a cramped expanding grid.

Best fit

Use this React and Tailwind CSS block when your Next.js landing page needs progressive disclosure inside the feature section. It keeps the visitor on the same surface while still giving each product capability its own active state, illustration, and supporting copy.

Customization notes

Replace the demo image alt strings (bg c1, bg c3) with product-specific descriptions, and rewrite the email/AI copy if your landing page is not about writing assistance.

Keep the shadcn UI block conventions intact when you adapt it: short trigger labels, real product copy, accurate media alt text, and enough responsive testing to confirm the expanded state still feels intentional on mobile and desktop.

Related Shadcn UI blocks

• Expandable Features Blocks

Start from Tailark

Preview Shadcn Expandable Feature Block One