26:I[422844,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"ThemeToggle"] 27:I[276592,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"AccountMenu"] 28:I[32297,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"MobileNav"] 29:I[505014,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"default"] 2a:I[729657,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"FavoriteButton"] 2b:I[534073,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"InstallCommand"] 2c:I[868814,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"BlockPreview"] 37:I[713354,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.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\":\"Logo cloud\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/logo-cloud\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Logo cloud 05: With results\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/logo-cloud/logo-cloud-05\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Logo cloud 05: With results\",\"description\":\"Each customer logo with the result they got.\",\"url\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/logo-cloud/logo-cloud-05\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"version\":\"1.0.0\",\"isAccessibleForFree\":true,\"publisher\":{\"@type\":\"Organization\",\"name\":\"lib\"}}]"}}] 2d:T551,

import { LogoCloud05 } from "@/components/logo-cloud-05"

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

2e:T829,// @lib/logo-cloud-05@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import { siLinear, siNotion, siSupabase, siVercel, type SimpleIcon } from "simple-icons" import { BrandLogo } from "@/components/brand-logo" import { PlusCorners } from "@/components/section-frame" import { RevealStyles } from "@/components/reveal" const customers: { logo: SimpleIcon; value: string; result: string }[] = [ { logo: siVercel, value: "10 min", result: "to prepare the board deck" }, { logo: siLinear, value: "−22%", result: "churn in one quarter" }, { logo: siSupabase, value: "3", result: "tools replaced" }, { logo: siNotion, value: "+31%", result: "expansion revenue" }, ] export function LogoCloud05() { return (

What our customers got out of it

{customer.logo.title} {customer.value} {customer.result}

) } 2f:T3db2,

// @lib/logo-cloud-05@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import { siLinear, siNotion, siSupabase, siVercel, type SimpleIcon } from "simple-icons"

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

const customers: { logo: SimpleIcon; value: string; result: string }[] = [
  { logo: siVercel, value: "10 min", result: "to prepare the board deck" },
  { logo: siLinear, value: "−22%", result: "churn in one quarter" },
  { logo: siSupabase, value: "3", result: "tools replaced" },
  { logo: siNotion, value: "+31%", result: "expansion revenue" },
]

export function LogoCloud05() {
  return (
    <section className="px-4 py-16 sm:px-6">
      <RevealStyles />
      <div data-reveal-children className="mx-auto flex max-w-6xl flex-col gap-10">
        <h2 className="text-center font-heading text-2xl font-semibold tracking-tight">What our customers got out of it</h2>
        <div className="relative border">
          <PlusCorners />
          <ul className="grid grid-cols-1 divide-y sm:grid-cols-2 sm:divide-y-0 lg:grid-cols-4">
            {customers.map((customer) => (
              <li
                key={customer.logo.slug}
                className="flex flex-col gap-6 p-6 sm:border-b sm:nth-[2n]:border-l lg:border-b-0 lg:not-first:border-l"
              >
                <span className="flex items-center gap-2 text-muted-foreground">
                  <BrandLogo icon={customer.logo} className="size-5" title="" />
                  <span className="font-heading font-semibold">{customer.logo.title}</span>
                </span>
                <span className="flex flex-col gap-1">
                  <span className="font-heading text-4xl font-semibold tracking-tight tabular-nums">{customer.value}</span>
                  <span className="text-sm text-muted-foreground">{customer.result}</span>
                </span>
              </li>
            ))}
          </ul>
        </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 logo cloud blocks