4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T11bd,export const integrationsEyebrow = "Integrations"; export const integrationsGridCopy = { title: "Connects with your stack", description: "Sync installs, trigger workflows, and keep every tool in lockstep — registry-native handoff included.", } as const; export const integrationsOrbitalCopy = { title: "Endless possibilities", description: "Enhance your ship loop with integrations that meet your team where they already work — from design to deploy.", } as const; export const integrationsNetworkCopy = { title: "Bring your whole workflow", description: "Design in Figma, ship from GitHub, notify in Slack — one registry surface ties the loop together.", } as const; export const integrationsSplitCopy = { title: "The synergy of integration", headline: "Streamlining installs across your toolchain", description: "Each connector ships with typed hooks, documented env vars, and Copy Prompt handoff — no bespoke glue code.", cta: "Browse all connectors", } as const; export const integrationsBentoCopy = { title: "Connected surfaces", description: "Four install paths — pick the channel that matches how your team ships.", } as const; export const integrationsTimelineCopy = { title: "Connect in minutes", description: "Provision, authorize, and verify — a linear path from empty to live.", } as const; export const integrationsPickerCopy = { title: "Find your connector", description: "Search the catalog — arrow keys to preview, Enter to open docs.", } as const; export const integrationsMarqueeCopy = { title: "Always in sync", description: "A quiet strip of connectors — logo and name only, no badge clutter.", } as const; export const integrationsDepthCopy = { title: "Integration depth", description: "Compare native registry hooks against API and webhook fallbacks.", } as const; export const integrationsFramedCopy = { eyebrow: "Pro connectors", title: "Constellation map", description: "Framed overview of commercial-grade sync paths for Pro workspaces.", } as const; export type IntegrationBrand = { name: string; domain: string; description: string; tag?: string; sync?: "Native" | "API" | "Webhook"; }; export const integrationBrands: IntegrationBrand[] = [ { name: "GitHub", domain: "github.com", description: "Install blocks from CI and open PRs with registry tokens", tag: "CI/CD", sync: "Native", }, { name: "Vercel", domain: "vercel.com", description: "Preview registry sections on every deployment", tag: "Deploy", sync: "Native", }, { name: "Figma", domain: "figma.com", description: "Hand off frames to Copy Prompt install flows", tag: "Design", sync: "API", }, { name: "Slack", domain: "slack.com", description: "Notify channels when Pro blocks update", tag: "Alerts", sync: "Webhook", }, { name: "Linear", domain: "linear.app", description: "Link block issues to registry changelog entries", tag: "Issues", sync: "API", }, { name: "Notion", domain: "notion.so", description: "Embed live block previews in team wikis", tag: "Docs", sync: "API", }, { name: "Stripe", domain: "stripe.com", description: "Gate Pro registry installs behind license checks", tag: "Billing", sync: "Native", }, { name: "npm", domain: "npmjs.com", description: "Publish private registry packages to your scope", tag: "Packages", sync: "Native", }, { name: "Zapier", domain: "zapier.com", description: "Trigger automations when catalog entries change", tag: "Automate", sync: "Webhook", }, { name: "Intercom", domain: "intercom.com", description: "Surface install help inside customer chat", tag: "Support", sync: "API", }, { name: "HubSpot", domain: "hubspot.com", description: "Sync Pro leads from pricing block events", tag: "CRM", sync: "Webhook", }, { name: "Asana", domain: "asana.com", description: "Create tasks when new block families ship", tag: "Projects", sync: "API", }, ]; export const orbitalBrands = integrationBrands.slice(0, 8); export const networkBrands = integrationBrands.slice(0, 4); export const stackBrands = integrationBrands.slice(0, 4); export const bentoBrands = integrationBrands.slice(0, 4); export const timelineBrands = integrationBrands.slice(0, 5); export const pickerBrands = integrationBrands.slice(0, 8); export const marqueeBrands = integrationBrands.slice(0, 10); export const depthBrands = integrationBrands.slice(0, 6); export const constellationBrands = integrationBrands.slice(0, 6); 52:T216c,"use client"; import { motion, useInView, useReducedMotion } from "motion/react"; import { useRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; import { defaultSpring, motionStagger, motionViewport } from "@/lib/motion-tokens"; import type { IntegrationBrand } from "./integrations-data"; import { integrationsEyebrow } from "./integrations-data"; export const integrationItemSpring = defaultSpring; export function integrationRevealInitial(reduceMotion: boolean) { return reduceMotion ? false : { opacity: 0, y: 10, filter: "blur(4px)" as const }; } export function integrationRevealVisible(reduceMotion: boolean) { return reduceMotion ? undefined : { opacity: 1, y: 0, filter: "blur(0px)" as const }; } export function integrationItemVariants(reduceMotion: boolean | null) { return reduceMotion ? { hidden: { opacity: 1 }, visible: { opacity: 1 } } : { hidden: { opacity: 0, y: 10, filter: "blur(4px)" }, visible: { opacity: 1, y: 0, filter: "blur(0px)", transition: integrationItemSpring }, }; } export const integrationStaggerContainer = { hidden: {}, visible: { transition: { staggerChildren: motionStagger.item, delayChildren: 0.04 }, }, }; export function MotionStaggerGroup({ children, className, }: { children: ReactNode; className?: string; }) { const ref = useRef(null); const inView = useInView(ref, motionViewport); return ( {children} ); } export function MotionStaggerItem({ children, className, style, }: { children: ReactNode; className?: string; style?: React.CSSProperties; }) { const reduceMotion = useReducedMotion(); const itemVariants = integrationItemVariants(reduceMotion); return ( {children} ); } export function MotionHoverLift({ children, className, }: { children: ReactNode; className?: string; }) { return ( {children} ); } /** Tile flies out from hub center — use motion x/y, not CSS transform. */ export function RadialRevealTile({ brand, x, y, delay = 0, className, }: { brand: IntegrationBrand; x: number; y: number; delay?: number; className?: string; }) { const reduceMotion = useReducedMotion(); return (

); } export function HubReveal({ children, className, delay = 0, }: { children: ReactNode; className?: string; delay?: number; }) { const reduceMotion = useReducedMotion(); return ( {children} ); } export function TimelineStepReveal({ children, index, className, }: { children: ReactNode; index: number; className?: string; }) { const reduceMotion = useReducedMotion(); return ( {children} ); } export function MotionIntegrationTile({ brand, className, }: { brand: IntegrationBrand; className?: string; }) { return ( ); } export function getLogoDevUrl(domain: string, size = "80") { const token = process.env.NEXT_PUBLIC_LOGO_DEV_PUBLISHABLE_KEY; if (!token) return null; const params = new URLSearchParams({ token, size, format: "png", retina: "true", fallback: "monogram", }); return `https://img.logo.dev/${domain}?${params}`; } export function IntegrationLogo({ domain, name, className, size = "md", }: { domain: string; name: string; className?: string; size?: "sm" | "md" | "lg"; }) { const src = getLogoDevUrl(domain, size === "lg" ? "96" : size === "sm" ? "64" : "80"); const box = size === "lg" ? "size-9 md:size-10" : size === "sm" ? "size-6" : "size-7 md:size-8"; if (src) { return ( {`${name}

); } return ( {name.charAt(0)} ); } export function IntegrationTile({ brand, className, }: { brand: IntegrationBrand; className?: string; }) { return (

); } export function NusaibaHubMark({ className }: { className?: string }) { const cells = [1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1]; return (

{cells.map((filled, index) => ( ))}

); } export function OrbitPosition({ angle, children, radius = 132, }: { angle: number; children: ReactNode; radius?: number; }) { const rad = (angle * Math.PI) / 180; const x = Math.cos(rad) * radius; const y = Math.sin(rad) * radius; return (

{children}

); } export function IntegrationCardRow({ brand, className, }: { brand: IntegrationBrand; className?: string; }) { return (

{brand.name}

{brand.description}

); } export function IntegrationsSectionHeader({ title, description, className, align = "center", }: { title: string; description: string; className?: string; align?: "center" | "left"; }) { return (

{integrationsEyebrow}

{title}

{description}

); } export function MotionReveal({ children, className, delay = 0, }: { children: ReactNode; className?: string; delay?: number; }) { const reduceMotion = useReducedMotion(); return ( {children} ); } 53:T12fd,"use client"; import { useEffect, useMemo, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { SearchIcon } from "lucide-react"; import { Input } from "@/components/ui/input"; import { integrationsPickerCopy, pickerBrands } from "../integrations-data"; import { SectionShell, ContentRail } from "@/components/layout-contract"; import { IntegrationLogo, IntegrationsSectionHeader, integrationItemSpring, MotionReveal, MotionStaggerGroup, MotionStaggerItem, } from "../integrations-primitives"; export function IntegrationsPickerSection() { const [query, setQuery] = useState(""); const [activeIndex, setActiveIndex] = useState(0); const filtered = useMemo(() => { return pickerBrands.filter((brand) => { const haystack = `${brand.name} ${brand.tag ?? ""} ${brand.description}`.toLowerCase(); return haystack.includes(query.trim().toLowerCase()); }); }, [query]); const active = filtered[activeIndex] ?? filtered[0]; useEffect(() => { setActiveIndex(0); }, [query]); useEffect(() => { function onKeyDown(event: KeyboardEvent) { if (filtered.length === 0) return; if (event.key === "ArrowDown") { event.preventDefault(); setActiveIndex((current) => (current + 1) % filtered.length); } if (event.key === "ArrowUp") { event.preventDefault(); setActiveIndex((current) => (current - 1 + filtered.length) % filtered.length); } } window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [filtered.length]); return (

setQuery(event.target.value)} placeholder="Search connectors…" value={query} />

{filtered.length === 0 ? (

No matches

) : ( filtered.map((brand, index) => ( )) )}

{active ? (

{active.name}

{active.tag ? (

{active.tag}

) : null}

{active.description}

) : null}

); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["@nusaiba/foundation","input"]}]]}],["$","$L4f",null,{"sourceUrl":"https://nusaiba.dev/r/base-nova/integrations-7.json","proxyUrl":"https://shadcnregistry.com/r/nusaiba/integrations-7","itemId":"@nusaiba/integrations-7"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/blocks/integrations/integrations-data.ts","content":"$51","type":"registry:lib"},{"path":"registry/blocks/integrations/integrations-primitives.tsx","content":"$52","type":"registry:lib"},{"path":"registry/blocks/integrations/7/integrations-section.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

Integrations 7

Installation

Files

lib

components

Styles