proNew163 lines · framer-motion

API Code Tabs

The same call, in whatever you write. A full-width feature section: a code panel with custom ARIA tabs for a few call styles, each with its own snippet and a Copy button that gives real "Copied!" feedback, with a clipboard fallback for environments without `navigator.clipboard`.

Use it for: An API or SDK product page's integration section, showing the same call across a couple of languages without a heavy syntax-highlighter dependency.
Themes: Light + dark
License: Commercial use

Live

Integrate

The same call, in whatever you write

Pick a language, copy the snippet, paste it in.

const run = await client.tasks.create({
  input: "Summarize this thread",
  stream: true,
});

for await (const chunk of run) {
  process.stdout.write(chunk.text);
}

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 code panel with custom tabs for a few call styles,
 * each with its own snippet and a copy button that gives real feedback. No native
 * <select> — tabs are a real ARIA tablist.
 */

export interface CodeTab {
  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

→Tabs are a real ARIA tablist/tab pattern with a sliding underline on the active tab; switching tabs cross-fades the code block.
→The Copy button tries navigator.clipboard.writeText first and falls back to a hidden textarea plus execCommand("copy") if the Clipboard API throws, so copying still works in restrictive environments.
→After a successful copy attempt the button reads "Copied!" for about 1.6 seconds before reverting; the timeout is cleared on unmount and on every new copy.
→tabs accepts any list of { id, label, code }, so the same panel works for any set of languages or call styles.

Accessibility

✓Tabs use `role="tablist"`/`role="tab"` with `aria-selected`, not a native `<select>`; the tab row scrolls horizontally on its own if there are many tabs, so the page never overflows.
✓The Copy button's label itself changes to confirm the action, not just an icon or colour change.
✓Honours prefers-reduced-motion.