Getting Started
Templates
Components
import { IntegrationsGrid } from "@/components/ui/integrations-grid"
export default function Page() {
return (
<IntegrationsGrid
| Prop | Type | Default | Description |
|---|---|---|---|
badge | string | - | Optional badge text displayed above the title |
title | string | "Integrate" | Main title text |
titleHighlight | string | "automations with your stack." | Secondary highlighted title text |
subtitle | string | "Connect the best tools..." | Subtitle description text |
integrations | IntegrationItem[] | Default integrations | Array of integration items to display |
className | string | - | Additional CSS classes |
interface IntegrationItem {
id: string
icon: React.ReactNode
title: string
description: string
}You can provide your own integration items:
const customIntegrations = [
{
id: "custom-1",
icon: <YourIcon />,
title: "Custom Integration",
description: "Description of your custom integration.",
},
]
<IntegrationsGrid
integrations={customIntegrations}
title="Connect"
titleHighlight="with your favorite tools."
/>