Liquid Connector

Component 30

About

A dependency-free SVG path-math component for a continuous liquid card-to-prompt peel interaction with keyboard and reduced-motion support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Connector to your project and fits it to your theme.

Code

How Liquid Connector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import LiquidConnector from "@/components/ui/liquid-connector";

export default function LiquidConnectorDemo() {
  return (
    <LiquidConnector
      open
      gap={10}
      provider="Notion"
      eyebrow="MCP Connector"
      placeholder="Ask anything..."
      connectLabel="Connect"
      skipLabel="Skip"
      promptLabel="Prompt"
      sendLabel="Send prompt"
      stageLabel="Liquid connector prompt"
    />
  );
}