Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
pnpm dlx shadcn@latest add @ruixenui-pro/integrations-grid| 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."
/>