# Compare 07

> Animated AI writing tool comparison section with muted background and rounded container, featuring fade-in heading and subtitle, followed by scrollable card containing four-column table with tinted header row displaying Features label, two product columns with icon logos supporting dark/light mode variants, and contextual "What this means for you" column, with numbered feature rows showing text-based side-by-side comparisons and practical recommendations

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/compare-07).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/compare-07
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/compare-07-light-7e1aed0b620f993b.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/compare-07.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/compare-07.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: `react-use`
- Registry items: `card`

## Files

### `src/registry/new-york/blocks/marketing-ui/compare/compare-07/page.tsx`

```tsx
import CompareUILib from '@/registry/new-york/components/blocks/compare-07/compare-07'

const comparisonData = {
  column1Header: {
    icon: {
      light: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/notion-icon.png',
      dark: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/notion-white.png'
    },
    title: 'Notion ai'
  },
  column2Header: {
    icon: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/compare/image-11.png',
    title: 'Jasper'
  },
  column3Header: 'What this means for you',
  features: [
    {
      name: 'Pricing',
      column1: 'Included inside Notion workspace, affordable add-on',
      column2: 'Subscription-based, higher pricing tiers',
      column3: 'Choose based on your budget and team size'
    },
    {
      name: 'Best for',
      column1: 'Best for writers who want AI inside their workspace',
      column2: 'Best for marketing teams & brand-heavy content',
      column3: 'Pick the tool that matches your workflow and goals'
    },
    {
      name: 'Writing Quality',
      column1: 'Clean, structured writing suited for notes & documents',
      column2: 'Persuasive, creative marketing-style writing',
      column3: 'Notion = clarity; Jasper = persuasion & creativity'
    },
    {
      name: 'Templates',
      column1: 'Minimal templates, utility-focused',
      column2: '50+ templates for ads, blogs, and social posts',
      column3: 'If templates matter, Jasper gives more flexibility'
    },
    {
      name: 'Long-form Writing',
      column1: 'Strong for drafting & expanding text',
      column2: 'Strong guided workflows for long-form content',
      column3: 'Jasper is better for blogs & long-form content'
    },
    {
      name: 'SEO Tools',
      column1: 'Limited SEO optimization',
      column2: 'SEO features + SurferSEO integration',
      column3: 'Choose Jasper for SEO-driven content creation'
    },
    {
      name: 'Multilingual Support',
      column1: 'Basic multilingual support',
      column2: '30+ languages with tone controls',
      column3: 'Jasper is ideal for global or multilingual teams'
    },
    {
      name: 'Brand Voice',
      column1: 'No dedicated brand-voice training',
      column2: 'Custom brand voice & style training',
      column3: 'Jasper helps maintain brand consistency'
    },
    {
      name: 'Integrations',
      column1: 'Deep integration inside Notion ecosystem',
      column2: 'Integrates with Google Docs, CMS tools, Surfer, Hubspot',
      column3: 'Use Jasper for cross-team, multi-platform workflows'
    },
    {
      name: 'Publishing',
      column1: 'Export or publish within Notion pages',
      column2: 'Supports publishing workflows to multiple platforms',
      column3: 'Jasper is better for marketing publishing needs'
    }
  ]
}

const CompareUILibPage = () => {
  return <CompareUILib data={comparisonData} />
}

export default CompareUILibPage
```

### `src/registry/new-york/components/blocks/compare-07/compare-07.tsx`

```tsx
import type { ReactNode } from 'react'

import { Card } from '@/registry/new-york/ui/card'

type ComparisonData = {
  features: {
    name: string
    column1: string | ReactNode
    column2: string | ReactNode
    column3: string | ReactNode
  }[]
  column1Header: {
    icon?: string | { light: string; dark: string }
    title: string
  }
  column2Header: {
    icon?: string | { light: string; dark: string }
    title: string
  }
  column3Header: string
}

const CompareUILib = ({ data }: { data: ComparisonData }) => {
  return (
    <div className='bg-muted px-4 py-8 sm:px-6 sm:py-16 lg:px-8 lg:py-24'>
      <div className='bg-background mx-auto max-w-7xl space-y-12 rounded-3xl px-8 py-16'>
        {/* Header */}
        <div className='mb-8 md:mb-12 lg:mb-24'>
          <h2 className='text-center text-xl font-semibold sm:text-2xl md:text-3xl lg:text-4xl'>
            Choose the Right AI Tool for Powerful, Faster Writing
          </h2>
          <p className='text-muted-foreground mx-auto max-w-4xl text-center text-base md:text-xl'>
            Find the perfect AI tool to help you write clearer, faster, and more impactful content.
          </p>
        </div>

        {/* Comparison Table */}
        <Card className='overflow-hidden overflow-x-auto py-0'>
          <table className='w-full'>
            <thead>
              <tr className='bg-primary/10 border-b'>
                <th className='h-25 min-w-50 p-4 text-left text-xl font-normal lg:text-2xl'>Features</th>
                <th className='h-25 min-w-68 p-4 text-left text-xl font-normal lg:text-2xl'>
                  <div className='flex min-w-35 items-center gap-3.5'>
                    {data.column1Header.icon &&
                      (typeof data.column1Header.icon === 'string' ? (
                        <img
                          src={data.column1Header.icon}
                          alt={data.column1Header.title}
                          className='size-6 md:size-7.5'
                        />
                      ) : (
                        <>
                          <img
                            src={data.column1Header.icon.light}
                            alt={data.column1Header.title}
                            className='size-6 md:size-7.5 dark:hidden'
                          />
                          <img
                            src={data.column1Header.icon.dark}
                            alt={data.column1Header.title}
                            className='hidden size-6 md:size-7.5 dark:block'
                          />
                        </>
                      ))}
                    <span>{data.column1Header.title}</span>
                  </div>
                </th>
                <th className='h-25 min-w-68 p-4 text-left text-xl font-normal lg:text-2xl'>
                  <div className='flex items-center gap-3.5'>
                    {data.column2Header.icon &&
                      (typeof data.column2Header.icon === 'string' ? (
                        <img src={data.column2Header.icon} alt={data.column2Header.title} className='size-7.5' />
                      ) : (
                        <>
                          <img
                            src={data.column2Header.icon.light}
                            alt={data.column2Header.title}
                            className='size-7.5 dark:hidden'
                          />
                          <img
                            src={data.column2Header.icon.dark}
                            alt={data.column2Header.title}
                            className='hidden size-7.5 dark:block'
                          />
                        </>
                      ))}
                    <span>{data.column2Header.title}</span>
                  </div>
                </th>
                <th className='h-25 min-w-75 p-4 text-left text-xl font-normal lg:text-2xl'>{data.column3Header}</th>
              </tr>
            </thead>
            <tbody>
              {data.features.map((feature, index) => (
                <tr key={index} className='h-25 border-b last:border-b-0'>
                  <td className='p-4'>
                    <div className='text-lg font-medium'>
                      {index + 1}. {feature.name}
                    </div>
                  </td>
                  <td className='p-4'>
                    <div className='text-muted-foreground text-base font-normal'>{feature.column1}</div>
                  </td>
                  <td className='p-4'>
                    <div className='text-muted-foreground text-base font-normal'>{feature.column2}</div>
                  </td>
                  <td className='p-4'>
                    <div className='text-muted-foreground text-base font-normal'>{feature.column3}</div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      </div>
    </div>
  )
}

export default CompareUILib
```