26:I[422844,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"ThemeToggle"] 27:I[276592,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"AccountMenu"] 28:I[32297,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"MobileNav"] 29:I[505014,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"default"] 2a:I[729657,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"FavoriteButton"] 2b:I[534073,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"InstallCommand"] 2c:I[868814,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"BlockPreview"] 37:I[713354,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"Toaster"] 1b:["$","$L1a","/themes",{"href":"/themes","children":"Themes","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1c:["$","$L1a","/styles",{"href":"/styles","children":"Styles","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1d:["$","$L1a","/components",{"href":"/components","children":"Components","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1e:["$","$L1a","/docs",{"href":"/docs","children":"Docs","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1f:["$","$L1a","/changelog",{"href":"/changelog","children":"Changelog","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 20:["$","$L1a","/#pricing",{"href":"/#pricing","children":"Pricing","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 21:["$","div",null,{"className":"ml-auto flex items-center gap-1","children":[["$","$L26",null,{}],["$","$L27",null,{}],["$","$L1a",null,{"href":"/blocks","children":"Browse blocks","data-slot":"button","data-variant":"default","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 max-sm:hidden","ref":null}],["$","$L28",null,{"title":"lib","links":[{"href":"/blocks","label":"Blocks"},{"href":"/examples","label":"Examples"},{"href":"/builder","label":"Builder"},{"href":"/themes","label":"Themes"},{"href":"/styles","label":"Styles"},{"href":"/components","label":"Components"},{"href":"/docs","label":"Docs"},{"href":"/changelog","label":"Changelog"},{"href":"/#pricing","label":"Pricing"}],"primary":{"label":"Browse blocks","href":"/blocks"},"secondary":{"label":"Open the builder","href":"/builder"},"className":"md:inline-flex lg:hidden"}]]}] 22:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blocks\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integrations\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/integrations\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Integrations 01: Joined grid\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/integrations/integrations-01\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Integrations 01: Joined grid\",\"description\":\"Integration cells with brand logos in a framed grid, with a browse-all bar.\",\"url\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/integrations/integrations-01\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"version\":\"1.0.0\",\"isAccessibleForFree\":true,\"publisher\":{\"@type\":\"Organization\",\"name\":\"lib\"}}]"}}] 2d:T559,

import { Integrations01 } from "@/components/integrations-01"

export default function Page() {
  return <Integrations01 />
}

2e:Tc1c,// @lib/integrations-01@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import { ArrowUpRight } from "lucide-react" import { siGithub, siHubspot, siLinear, siNotion, siStripe, siSupabase, siVercel, siZapier, type SimpleIcon, } from "simple-icons" import { BrandLogo } from "@/components/brand-logo" import { PlusCorners } from "@/components/section-frame" import { RevealStyles } from "@/components/reveal" const apps: { icon: SimpleIcon; description: string }[] = [ { icon: siStripe, description: "Sync subscriptions, invoices and refunds in real time." }, { icon: siSupabase, description: "Read customers straight from your Postgres tables." }, { icon: siNotion, description: "Embed live revenue charts in any Notion page." }, { icon: siLinear, description: "Link churned accounts to the issues that caused them." }, { icon: siHubspot, description: "Push MRR and plan to every company record." }, { icon: siGithub, description: "Track revenue impact of every release." }, { icon: siVercel, description: "Deploy the embedded dashboard on the edge." }, { icon: siZapier, description: "Connect 6,000 more apps without code." }, ] export function Integrations01() { return (

Plugs into the stack you already run

Two clicks to connect. Data flows in both directions, every five minutes.

{app.icon.title}

{app.description}

Browse all 40 integrations

) } 2f:T4f38,

// @lib/integrations-01@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import { ArrowUpRight } from "lucide-react"
import {
  siGithub,
  siHubspot,
  siLinear,
  siNotion,
  siStripe,
  siSupabase,
  siVercel,
  siZapier,
  type SimpleIcon,
} from "simple-icons"

import { BrandLogo } from "@/components/brand-logo"
import { PlusCorners } from "@/components/section-frame"
import { RevealStyles } from "@/components/reveal"

const apps: { icon: SimpleIcon; description: string }[] = [
  { icon: siStripe, description: "Sync subscriptions, invoices and refunds in real time." },
  { icon: siSupabase, description: "Read customers straight from your Postgres tables." },
  { icon: siNotion, description: "Embed live revenue charts in any Notion page." },
  { icon: siLinear, description: "Link churned accounts to the issues that caused them." },
  { icon: siHubspot, description: "Push MRR and plan to every company record." },
  { icon: siGithub, description: "Track revenue impact of every release." },
  { icon: siVercel, description: "Deploy the embedded dashboard on the edge." },
  { icon: siZapier, description: "Connect 6,000 more apps without code." },
]

export function Integrations01() {
  return (
    <section className="px-4 py-16 sm:px-6 sm:py-24">
      <RevealStyles />
      <div data-reveal-children className="mx-auto flex max-w-6xl flex-col gap-12">
        <div className="flex flex-col items-center gap-4 text-center">
          <h2 className="font-heading text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            Plugs into the stack you already run
          </h2>
          <p className="max-w-xl text-lg text-muted-foreground">
            Two clicks to connect. Data flows in both directions, every five minutes.
          </p>
        </div>
        <div className="relative border">
          <PlusCorners />
          <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
            {apps.map((app) => (
              <li
                key={app.icon.slug}
                className="group relative flex flex-col gap-4 border-b p-6 transition-colors hover:bg-muted/40 sm:[&:nth-child(2n)]:border-l lg:border-l lg:[&:nth-child(4n+1)]:border-l-0 lg:[&:nth-last-child(-n+4)]:border-b-0"
              >
                <BrandLogo icon={app.icon} colored className="size-7" title="" />
                <div className="flex flex-col gap-1">
                  <h3 className="font-medium">{app.icon.title}</h3>
                  <p className="text-sm text-muted-foreground">{app.description}</p>
                </div>
                <ArrowUpRight aria-hidden className="absolute top-6 right-6 size-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
              </li>
            ))}
          </ul>
          <a href="#" className="flex items-center justify-center gap-1 border-t bg-muted/30 py-3 text-sm font-medium hover:bg-muted/60">
            Browse all 40 integrations
            <ArrowUpRight className="size-3.5" />
          </a>
        </div>
      </div>
    </section>
  )
}

30:T58e,// @lib/brand-logo@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import * as React from "react" import type { SimpleIcon } from "simple-icons" import { cn } from "@/lib/utils" type BrandLogoProps = Omit, "children"> & { /** Any icon from `simple-icons`, e.g. `import { siStripe } from "simple-icons"` */ icon: SimpleIcon /** Use the brand color. Very dark brand colors fall back to the text color so they stay visible. */ colored?: boolean /** Accessible name. Defaults to the brand name; pass "" when a visible label is next to it. */ title?: string } function isTooDark(hex: string) { const value = parseInt(hex, 16) const r = (value >> 16) & 255 const g = (value >> 8) & 255 const b = value & 255 return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 < 0.2 } function BrandLogo({ icon, colored = false, title, className, ...props }: BrandLogoProps) { const label = title ?? icon.title const fill = colored && !isTooDark(icon.hex) ? `#${icon.hex}` : "currentColor" return ( ) } export { BrandLogo, type BrandLogoProps } 31:T3d56,

// @lib/brand-logo@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import * as React from "react"
import type { SimpleIcon } from "simple-icons"

import { cn } from "@/lib/utils"

type BrandLogoProps = Omit<React.ComponentProps<"svg">, "children"> & {
  /** Any icon from `simple-icons`, e.g. `import { siStripe } from "simple-icons"` */
  icon: SimpleIcon
  /** Use the brand color. Very dark brand colors fall back to the text color so they stay visible. */
  colored?: boolean
  /** Accessible name. Defaults to the brand name; pass "" when a visible label is next to it. */
  title?: string
}

function isTooDark(hex: string) {
  const value = parseInt(hex, 16)
  const r = (value >> 16) & 255
  const g = (value >> 8) & 255
  const b = value & 255
  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 < 0.2
}

function BrandLogo({ icon, colored = false, title, className, ...props }: BrandLogoProps) {
  const label = title ?? icon.title
  const fill = colored && !isTooDark(icon.hex) ? `#${icon.hex}` : "currentColor"

  return (
    <svg
      viewBox="0 0 24 24"
      role={label ? "img" : undefined}
      aria-label={label || undefined}
      aria-hidden={label ? undefined : true}
      data-slot="brand-logo"
      className={cn("size-5 shrink-0", className)}
      fill={fill}
      {...props}
    >
      <path d={icon.path} />
    </svg>
  )
}

export { BrandLogo, type BrandLogoProps }

32:Tb2f,// @lib/reveal@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import * as React from "react" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" /** * Entrance animations without JavaScript. * - on="scroll" fades and lifts an element as it enters the viewport, driven by the scroll position * (CSS scroll-driven animations). Browsers without them show the element as is. * - on="load" plays once when the page loads, for content above the fold such as a hero. * Nothing moves for people who ask for reduced motion. */ const css = ` @keyframes lib-reveal { from { opacity: 0; translate: 0 var(--reveal-distance, 1.25rem); } } @media (prefers-reduced-motion: no-preference) { [data-reveal="load"] { animation: lib-reveal 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--reveal-index, 0) * 90ms); } @supports (animation-timeline: view()) { [data-reveal="scroll"], [data-reveal-children] > :not([data-slot="plus-corner"], style) { animation: lib-reveal linear both; animation-timeline: view(); animation-range: entry min(40%, calc(var(--reveal-index, 0) * 3rem)) entry min(100%, calc(12rem + var(--reveal-index, 0) * 3rem)); } [data-reveal-children] > :nth-child(3) { --reveal-index: 1; } [data-reveal-children] > :nth-child(n + 4) { --reveal-index: 2; } } } ` /** The keyframes and rules, rendered once per page however many times it appears. */ function RevealStyles() { return ( ) } type RevealProps = React.ComponentProps<"div"> & { on?: "scroll" | "load" /** Position in a group: later items start a little later */ index?: number /** Distance the element rises from, e.g. "2rem" */ distance?: string /** Animate the child element itself instead of wrapping it in a div */ asChild?: boolean } function Reveal({ on = "scroll", index = 0, distance, asChild = false, className, style, children, ...props }: RevealProps) { const Component = asChild ? Slot.Root : "div" return ( <> {children} ) } /** * Props to spread on an element you already have, e.g.

. * Render once in the same block. */ function reveal(on: "scroll" | "load" = "scroll", index = 0) { return { "data-reveal": on, style: (index ? { "--reveal-index": index } : undefined) as React.CSSProperties | undefined, } } export { Reveal, RevealStyles, reveal, type RevealProps } 33:T4f02,

// @lib/reveal@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import * as React from "react"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

/**
 * Entrance animations without JavaScript.
 * - on="scroll" fades and lifts an element as it enters the viewport, driven by the scroll position
 *   (CSS scroll-driven animations). Browsers without them show the element as is.
 * - on="load" plays once when the page loads, for content above the fold such as a hero.
 * Nothing moves for people who ask for reduced motion.
 */
const css = `
@keyframes lib-reveal {
  from { opacity: 0; translate: 0 var(--reveal-distance, 1.25rem); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-reveal="load"] {
    animation: lib-reveal 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--reveal-index, 0) * 90ms);
  }
  @supports (animation-timeline: view()) {
    [data-reveal="scroll"],
    [data-reveal-children] > :not([data-slot="plus-corner"], style) {
      animation: lib-reveal linear both;
      animation-timeline: view();
      animation-range: entry min(40%, calc(var(--reveal-index, 0) * 3rem)) entry min(100%, calc(12rem + var(--reveal-index, 0) * 3rem));
    }
    [data-reveal-children] > :nth-child(3) { --reveal-index: 1; }
    [data-reveal-children] > :nth-child(n + 4) { --reveal-index: 2; }
  }
}
`

/** The keyframes and rules, rendered once per page however many times it appears. */
function RevealStyles() {
  return (
    <style href="lib-reveal" precedence="default">
      {css}
    </style>
  )
}

type RevealProps = React.ComponentProps<"div"> & {
  on?: "scroll" | "load"
  /** Position in a group: later items start a little later */
  index?: number
  /** Distance the element rises from, e.g. "2rem" */
  distance?: string
  /** Animate the child element itself instead of wrapping it in a div */
  asChild?: boolean
}

function Reveal({ on = "scroll", index = 0, distance, asChild = false, className, style, children, ...props }: RevealProps) {
  const Component = asChild ? Slot.Root : "div"
  return (
    <>
      <RevealStyles />
      <Component
        data-slot="reveal"
        data-reveal={on}
        className={cn(className)}
        style={{ ...(index ? { "--reveal-index": index } : {}), ...(distance ? { "--reveal-distance": distance } : {}), ...style } as React.CSSProperties}
        {...props}
      >
        {children}
      </Component>
    </>
  )
}

/**
 * Props to spread on an element you already have, e.g. <h1 {...reveal("load")}>.
 * Render <RevealStyles /> once in the same block.
 */
function reveal(on: "scroll" | "load" = "scroll", index = 0) {
  return {
    "data-reveal": on,
    style: (index ? { "--reveal-index": index } : undefined) as React.CSSProperties | undefined,
  }
}

export { Reveal, RevealStyles, reveal, type RevealProps }

34:T842,

What it installs

Versions

More integrations blocks