Fading logo field

Split integrations with a fading field of app marks.

Usage

import { IntegrationsGrid } from '@/components/blocks/integrations-01'


<IntegrationsGrid />


// Change the copy with props
<IntegrationsGrid
  eyebrow="Connections"
  title="Works with the rest of your stack"
  description="Hook up the apps your team lives in and keep everything in sync."
  primaryAction={{ label: 'See all apps', href: '/integrations' }}
  secondaryAction={{ label: 'Read the API docs', href: '/docs/api' }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/integrations-01

npx shadcn@latest add @pastaui-pro/integrations-01

yarn dlx shadcn@latest add @pastaui-pro/integrations-01

bunx --bun shadcn@latest add @pastaui-pro/integrations-01

Source

Props

Fading logo field props
Prop	Type	Default	Description
eyebrow	string	= undefined	Optional small label above the heading. Hidden unless you pass one.
title	string	= 'Plugs into the tools you already use'	Main heading.
description	string	= Connect your docs, chat, calendars and code copy	Short paragraph under the heading. Pass an empty string to hide it.
primaryAction	IntegrationsAction \| null	= { label: 'Browse integrations', href: '#' }	Blue button with a label and href. Pass null to hide it.
secondaryAction	IntegrationsAction \| null	= { label: 'Request an app', href: '#' }	Underlined text link next to the button. Pass null to hide it.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.