AI tools lens

Integrations with a lens-shaped cluster of app tiles.

Usage

import { AiToolsLens } from '@/components/blocks/integrations-03'


<AiToolsLens />


// Change the copy, tools and button with props
<AiToolsLens
  heading="Bring your favourite models"
  description="Connect the assistants your team already uses."
  tools={[
    { name: 'Claude', icon: 'claude', color: '#D97757', href: '/integrations/claude' },
    { name: 'Gemini', icon: 'gemini', color: '#8E75B2' },
    { name: 'Cursor', icon: 'cursor' },
  ]}
  cta={{ label: 'Browse integrations', href: '/integrations' }}
/>

Install

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

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

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

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

Source

Props

AI tools lens props
Prop	Type	Default	Description
heading	string	= 'Plug in the AI tools you already use'	Main heading. A small blue sparkle sits after it.
description	string	= Switchyard links the models and assistants copy	Paragraph under the heading. Pass an empty string to hide it.
tools	AiTool[]	= 17 AI tools	Up to 17 tools as { name, icon, color?, href? }. icon is one of 'chatgpt', 'claude', 'gemini', 'perplexity', 'mistral', 'deepseek', 'huggingface', 'elevenlabs', 'metaai', 'cursor', 'copilot', 'ollama', 'qwen', 'replicate', 'v0', 'windsurf' or 'suno'. color tints the tile glow, and href turns the tile into a link.
cta	AiToolsLensCta \| null	= { label: 'Connect your AI tools', href: '#' }	Blue pill button with a label and an href or onClick. Pass null to hide it.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.