FeaturesGrid
A grid layout to showcase features
Features
Tired of starting from scratch?
Tired of having to set up auth, payments, databases, components, SEO,... the list goes on. Runway has everything you need to launch your ideas.
Auth
Implement robust user authentication and authorization using Supabase.
Magic links & Social auth
Email/password login
Login/Signup pages
Protected routes
3+ hours saved
Payments
Securely accept payments and manage subscriptions with Stripe integration.
One time payments
Subscriptions
Webhook handling (to update user's account)
Invoices
3+ hours saved
Database
Harness Supabase’s PostgreSQL DB for real-time data sync.
SQL database
Real-time data sync
User database
3+ hours saved
Integrate seamless email communication with Resend.
Email verification
Transactional emails
Newsletters
3+ hours saved
SEO
Boost your visibility with built-in SEO tools, auto meta tags, etc.
Meta tags
Sitemaps
Structured data
3+ hours saved
Components
Use our library of pre-built, customizable components.
Pre-built components
Customizable UI
Responsive design
10+ hours saved
The FeaturesGrid component is a grid layout to showcase features.
Usage
javascript
1import FeaturesGrid from '@/components/landing/FeaturesGrid'; 2 3<FeaturesGrid />
Props
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | "" | The title of the component. |
| subtitle | string | "" | The subtitle of the component. |
| description | string | "" | The description of the component. |
| features | array | - | The list of features to display, each feature is an object with title, description, icon, imageSrc, imageAlt, and imageHref properties. By default its pulled from config, see docs for more details. |
| cardColor | string | "bg" | The base color (use tailwind.config). |
| cardVariant | string | "soft" | The variant of the component. |
| cardBorderRadius | string | "lg" | The border radius of the card (using Tailwind border radius classes). |
| cardBorder | boolean | false | If true, a border will be displayed on the cards. |
| highlightLastFeature | boolean | false | If true, the last feature will be highlighted. |