Isaiah

Spec Sheet

Pricing 7

About

A comparison table for showing product specs side by side across up to three variants, with a toggle to show only the differing rows and a stacked layout on narrow screens.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spec Sheet to your project and fits it to your theme.

Code

How Spec Sheet is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { SpecSheet } from "@/components/ui/spec-sheet";

export default function SpecSheetDemo() {
  return (
    <div className="w-full max-w-3xl p-4">
      <SpecSheet />
    </div>
  );
}

Dependencies

More by Isaiah

View all
  • Agent Plan

    Agent Plan

    2.2K
  • Video Scroll Hero

    Video Scroll Hero

    1.4K
  • Voice Powered Orb

    Voice Powered Orb

    1.3K
  • Reveal Text

    Reveal Text

    1.1K
  • Leads Data Table

    Leads Data Table

    935
  • Portfolio Gallery

    Portfolio Gallery

    922
  • Message Dock

    Message Dock

    833
  • Ruler Carousel

    Ruler Carousel

    617

More in Pricing

View all
  • Pricing Section

    Pricing Section

    582
  • Pricing Section

    Pricing Section

    173
  • Pricing Card

    Pricing Card

    365
  • pricing section

    pricing section

    158
  • Pricing Cards

    Pricing Cards

    86
  • Colorful-Pricing

    Colorful-Pricing

    85
  • Glowing Pricing Tiers

    Glowing Pricing Tiers

    45
  • RuixenPricing05

    RuixenPricing05

    102