ComponentsFeatures Grid

A component to display features with interactive demos in a responsive grids layout. Each feature has a title, a short description, and an interactive demo.

Features Grid Component

/app/page.tsx

1import FeaturesGrid from "@/components/FeaturesGrid";
2
3export default function Home() {
4  return (
5    <>
6      <main>
7        <FeaturesGrid />
8      </main>
9    </>
10  );
11}

Tips

  • Keep the title short and simple (less than 5 words).
  • Each feature card can take up to 3 columns of width.
  • The interactive demo should be a simple, yet powerful example of the feature.
  • You can also display a video or an image instead of an interactive demo.
  • You can create a video feature using Screen Studio (Mac only).