Feature Grid

Features

About

Feature Grid The Feature Grid component is designed to elegantly showcase a list of features or benefits. It includes a prominent heading with a customizable wavy underline on a specific word, a descriptive paragraph, and a responsive three-column grid of features that adapts seamlessly to different screen sizes. The component is built with reusability in mind, allowing all text content and links to be passed in as props.

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

Code

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

Usage.tsx

import { FeatureGrid } from '@/components/ui/feature-grid-1'; // Adjust path as needed

/**
 * A demo component to showcase the FeatureGrid.
 */
export default function FeatureGridDemo() {
  const featureList = [
    'Unlimited forms',
    'Unlimited submissions',
    'Collect payments',
    'Collect signatures',
    'Collect file uploads',
    'Custom "Thank You" page',
    'Self email notifications',
    'Redirect on completion',
    'Conditional logic & calculations',
    'Prevent duplicate submissions',
    'Password protect forms',
    'Close forms on limit or date',
    'Answer piping',
    '45+ languages & RTL support',
    'Google Sheets integration',
    'Notion integration',
    'Airtable integration',
    'Zapier integration',
    'Make integration',
    'Webhooks',
  ];

  return (
    <div className="bg-background">
      <FeatureGrid
        title="Build beautiful forms for free"
        highlightedText="free"
        description={
          <>
            Paywalls getting in the way? Not anymore. Tally gives you unlimited
            forms and submissions, completely free, as long as you stay within
            our{' '}
            <a href="#" className="underline text-primary underline-offset-4">
              fair usage guidelines
            </a>
            .
          </>
        }
        features={featureList}
        moreLink={{
          href: '#',
          text: 'And many, many more',
        }}
      />
    </div>
  );
}