# Compare 7 - Compact three-column comparison table with tooltips

> Centered title and muted intro frame a bordered feature table whose middle column carries a muted fill for the primary stack, dotted underlines on selective secondary cells opening explanatory tooltips.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/compare7).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/compare7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/compare7-light-821cd4b896c58f8e.png
- Registry item: https://shadcnblocks.com/r/compare7.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/compare7.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `cn`
- Registry items: `table`, `tooltip`

## Files

### `block/compare7/compare7.tsx`

```tsx
import React from "react";
import { cn } from "cn";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
interface CompareRow {
  feature: string;
  primary: string;
  secondary: string;
  secondaryTooltip?: {
    title: string;
    description: string;
  };
}

interface Compare7Props {
  heading?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  rows?: CompareRow[];
  className?: string;
}

const Compare7 = ({
  heading = "Compare",
  description = "A modern framework for building websites that is better than the competition.",
  primaryLabel = "Shadcn",
  secondaryLabel = "Bootstrap",
  rows = [
    {
      feature: "Design System",
      primary: "Modern, Utility-first",
      secondary: "Classic, Component-based",
    },
    {
      feature: "Customization",
      primary: "Highly customizable",
      secondary: "Limited by default",
    },
    {
      feature: "Dark Mode",
      primary: "Built-in",
      secondary: "Requires extra setup",
    },
    {
      feature: "TypeScript Support",
      primary: "First-class",
      secondary: "Partial",
    },
    {
      feature: "Accessibility",
      primary: "Focus on a11y",
      secondary: "Basic",
    },
    {
      feature: "Component Count",
      primary: "30+",
      secondary: "25+",
    },
    {
      feature: "License",
      primary: "MIT",
      secondary: "MIT",
    },
    {
      feature: "Premium Components",
      primary: "Available",
      secondary: "Not included",
      secondaryTooltip: {
        title: "Premium Only",
        description:
          "Some advanced components are only available in paid versions or require third-party libraries.",
      },
    },
    {
      feature: "Figma Kit",
      primary: "Yes",
      secondary: "No",
      secondaryTooltip: {
        title: "Figma Kit Unavailable",
        description:
          "Bootstrap does not provide an official Figma kit, but community kits may exist.",
      },
    },
  ],
  className,
}: Compare7Props) => {
  return (
    <TooltipProvider>
      <section className={cn("py-32", className)}>
        <div className="container">
          <h2 className="mb-4 text-center text-4xl font-semibold">{heading}</h2>
          <p className="mb-8 text-center text-muted-foreground">
            {description}
          </p>
          <div className="mx-auto max-w-3xl overflow-x-auto">
            <Table className="rounded border text-left shadow-lg">
              <TableHeader>
                <TableRow>
                  <TableHead className="px-6 py-4 font-semibold">
                    Feature
                  </TableHead>
                  <TableHead className="bg-muted px-6 py-4 font-semibold">
                    {primaryLabel}
                  </TableHead>
                  <TableHead className="px-6 py-4 font-semibold">
                    {secondaryLabel}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody className="text-foreground">
                {rows.map((row, index) => (
                  <TableRow key={index}>
                    <TableCell className="px-6 py-4">{row.feature}</TableCell>
                    <TableCell className="bg-muted px-6 py-4">
                      {row.primary}
                    </TableCell>
                    <TableCell className="relative px-6 py-4">
                      {row.secondaryTooltip ? (
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <span className="cursor-pointer underline decoration-dotted">
                              {row.secondary}
                            </span>
                          </TooltipTrigger>
                          <TooltipContent sideOffset={8} className="max-w-xs">
                            <span className="mb-1 block font-semibold">
                              {row.secondaryTooltip.title}
                            </span>
                            {row.secondaryTooltip.description}
                          </TooltipContent>
                        </Tooltip>
                      ) : (
                        row.secondary
                      )}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </div>
      </section>
    </TooltipProvider>
  );
};

export { Compare7 };
```