Product Information Tabs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce2.tsx instead.

Usage

The file also exports ecommerce2Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Ecommerce2, ecommerce2Demo } from "@/components/blocks/ecommerce/ecommerce2";

export default function Page() {
  return <Ecommerce2 {...ecommerce2Demo} />;
}

Props

Types

interface SpecItem {
  label: string;
  value: string;
}

interface ReviewItem {
  id: string;
  name: string;
  rating: number; // 1-5
  date: string;
  comment: string;
}

Behavior notes

• Tab switching is real client state (`useState`), the active panel fully swaps rather than being hidden with CSS, so only the selected tab's content is ever in the DOM.
• The active tab gets a bottom border plus a foreground text color; inactive tabs stay muted, this is the only "indicator", there's no separate sliding underline element.
• Star ratings in the Reviews tab are purely decorative output of each review's fixed `rating` value, there's no interactive rating input anywhere in this block.
• Reviewer avatars always render initials via `initialsFromName`, this block has no prop for a reviewer photo.
• The Specifications tab is a plain hand-written `<table>`, there is no Table primitive in this UI kit.