proNew173 lines · framer-motion

Use Cases Tabs

One product, four very different days. A full-width feature section: a tab list of use cases down the side (a scrollable row on narrow screens) with a content panel that cross-fades to the selected case's title, description, bullet points and an original abstract icon.

Use it for: An AI or SaaS product page that serves more than one team or workflow and wants one section to speak to each of them without a wall of text.
Themes: Light + dark
License: Commercial use

Live

Use cases

One product, four very different days

Switch teams and the job changes, the approach doesn't.

Answers before the ticket gets old

Drafts a reply the moment a ticket lands, pulling in the right context so the first response is already most of the way there.

Matches tone to the account
Flags anything it isn't sure about
Never sends without a human glance

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width feature section: a tab list of use cases down the side (a row on
 * narrow screens) with a content panel that cross-fades to the selected case's
 * description, bullets and an original abstract icon.
 */

export interface UseCase {
  id: string;
  label: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Selecting a tab cross-fades the panel to that case's title, description and bullet list, sliding in from the side; AnimatePresence handles the exit so panels never overlap.
→The tab list is a vertical sidebar on wide screens and a horizontally scrollable row on narrow ones, so the page never overflows.
→cases accepts any list of { id, label, title, description, points }, so the same layout works for any set of audiences or workflows.
→speed scales the cross-fade duration; prefers-reduced-motion swaps panels with an opacity change only, no sliding.

Accessibility

✓Tabs use a real `role="tablist"`/`role="tab"` pattern with `aria-selected`, not a native `<select>`.
✓The icon in the content panel is decorative (`aria-hidden`); all information is carried by the title, description and bullet text.
✓Honours prefers-reduced-motion.