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"] 35: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\":\"Features\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/features\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Features 04: Icon grid\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/features/features-04\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Features 04: Icon grid\",\"description\":\"Six linked features in joined cells with hover arrows.\",\"url\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/features/features-04\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"version\":\"1.0.0\",\"isAccessibleForFree\":true,\"publisher\":{\"@type\":\"Organization\",\"name\":\"lib\"}}]"}}] 2d:T54d,

import { Features04 } from "@/components/features-04"

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

2e:T9ba,// @lib/features-04@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import { ArrowUpRight, BellRing, ChartLine, FileSpreadsheet, Globe, Lock, Users } from "lucide-react" import { SectionFrame } from "@/components/section-frame" const features = [ { title: "Revenue by plan", description: "MRR split into new, expansion, contraction and churn.", icon: ChartLine }, { title: "Cohorts", description: "Retention curves by signup month or channel.", icon: Users }, { title: "Alerts", description: "Slack and email when important numbers move.", icon: BellRing }, { title: "Exports", description: "Any chart to CSV or Google Sheets in one click.", icon: FileSpreadsheet }, { title: "Multi-currency", description: "Revenue converted daily into your reporting currency.", icon: Globe }, { title: "Secure by default", description: "Read-only access, SSO and an audit log.", icon: Lock }, ] export function Features04() { return (

Everything in one place

No spreadsheets to maintain, no formulas to check. Every metric is calculated the same way, for everyone.

{features.map((feature) => (

{feature.title}

{feature.description}

))}

) } 2f:T386f,

// @lib/features-04@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import { ArrowUpRight, BellRing, ChartLine, FileSpreadsheet, Globe, Lock, Users } from "lucide-react"

import { SectionFrame } from "@/components/section-frame"

const features = [
  { title: "Revenue by plan", description: "MRR split into new, expansion, contraction and churn.", icon: ChartLine },
  { title: "Cohorts", description: "Retention curves by signup month or channel.", icon: Users },
  { title: "Alerts", description: "Slack and email when important numbers move.", icon: BellRing },
  { title: "Exports", description: "Any chart to CSV or Google Sheets in one click.", icon: FileSpreadsheet },
  { title: "Multi-currency", description: "Revenue converted daily into your reporting currency.", icon: Globe },
  { title: "Secure by default", description: "Read-only access, SSO and an audit log.", icon: Lock },
]

export function Features04() {
  return (
    <SectionFrame>
      <div className="grid grid-cols-1 border-b lg:grid-cols-2">
        <h2 className="px-6 pt-14 font-heading text-3xl font-semibold tracking-tighter sm:px-10 sm:text-4xl lg:pb-14">
          Everything in one place
        </h2>
        <p className="self-end px-6 pt-4 pb-14 text-lg text-muted-foreground sm:px-10">
          No spreadsheets to maintain, no formulas to check. Every metric is calculated the same way, for everyone.
        </p>
      </div>
      <div className="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-3">
        {features.map((feature) => (
          <a key={feature.title} href="#" className="group relative flex flex-col gap-3 bg-background p-8 transition-colors hover:bg-muted/40">
            <ArrowUpRight
              aria-hidden
              className="absolute top-6 right-6 size-4 text-muted-foreground opacity-0 transition-all group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:opacity-100"
            />
            <span className="relative flex size-11 items-center justify-center rounded-lg border bg-background shadow-sm">
              <span className="absolute inset-1 rounded-md bg-linear-to-b from-muted to-transparent" />
              <feature.icon aria-hidden className="relative size-5" />
            </span>
            <h3 className="mt-3 font-medium">{feature.title}</h3>
            <p className="text-sm text-muted-foreground">{feature.description}</p>
          </a>
        ))}
      </div>
    </SectionFrame>
  )
}

30:T842,// @lib/section-frame@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import * as React from "react" import { cn } from "@/lib/utils" import { RevealStyles } from "@/components/reveal" /** Small plus marks on the four corners of the nearest positioned parent. */ function PlusCorners({ className }: { className?: string }) { const positions = ["-top-px -left-px", "-top-px -right-px", "-bottom-px -left-px", "-bottom-px -right-px"] return ( <> {positions.map((position) => ( ))} ) } type SectionFrameProps = React.ComponentProps<"section"> & { /** Classes for the framed inner container */ containerClassName?: string /** Show plus marks on the container corners */ corners?: boolean /** Fade in the container's parts as they scroll into view (off for reduced motion) */ reveal?: boolean } /** A section with full-height guide lines on the container edges, like a blueprint. */ function SectionFrame({ className, containerClassName, corners = true, reveal = true, children, ...props }: SectionFrameProps) { return (

{reveal && }

{corners && } {children}

) } export { PlusCorners, SectionFrame, type SectionFrameProps } 31:T429a,

// @lib/section-frame@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import * as React from "react"

import { cn } from "@/lib/utils"
import { RevealStyles } from "@/components/reveal"

/** Small plus marks on the four corners of the nearest positioned parent. */
function PlusCorners({ className }: { className?: string }) {
  const positions = ["-top-px -left-px", "-top-px -right-px", "-bottom-px -left-px", "-bottom-px -right-px"]
  return (
    <>
      {positions.map((position) => (
        <span
          key={position}
          aria-hidden
          data-slot="plus-corner"
          className={cn(
            "pointer-events-none absolute z-10 size-3 translate-x-[-50%] translate-y-[-50%] text-muted-foreground/60",
            position.includes("right") && "translate-x-[50%]",
            position.includes("bottom") && "translate-y-[50%]",
            position,
            className
          )}
        >
          <span className="absolute top-1/2 left-0 h-px w-full bg-current" />
          <span className="absolute top-0 left-1/2 h-full w-px bg-current" />
        </span>
      ))}
    </>
  )
}

type SectionFrameProps = React.ComponentProps<"section"> & {
  /** Classes for the framed inner container */
  containerClassName?: string
  /** Show plus marks on the container corners */
  corners?: boolean
  /** Fade in the container's parts as they scroll into view (off for reduced motion) */
  reveal?: boolean
}

/** A section with full-height guide lines on the container edges, like a blueprint. */
function SectionFrame({ className, containerClassName, corners = true, reveal = true, children, ...props }: SectionFrameProps) {
  return (
    <section data-slot="section-frame" className={cn("relative border-b px-4 sm:px-6", className)} {...props}>
      {reveal && <RevealStyles />}
      <div data-reveal-children={reveal || undefined} className={cn("relative mx-auto max-w-6xl border-x", containerClassName)}>
        {corners && <PlusCorners />}
        {children}
      </div>
    </section>
  )
}

export { PlusCorners, SectionFrame, type SectionFrameProps }

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 }

23:["$","main",null,{"className":"mx-auto flex w-full max-w-7xl flex-1 flex-col gap-8 px-4 py-10 sm:px-6","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L1a",null,{"href":"/blocks","children":"Blocks","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","ref":null}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","$L29",null,{"ref":"$undefined","icon":{"name":"chevron-right","size":24,"node":[["path",{"d":"m9 18 6-6-6-6","key":"mthhwq"}]]},"className":"$undefined"}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L1a",null,{"href":"/blocks/features","children":"Features","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","ref":null}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","$L29",null,{"ref":"$undefined","icon":"$23:props:children:0:props:children:props:children:1:props:children:props:icon","className":"$undefined"}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Features 04"}]}]]}]}],["$","header",null,{"className":"flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between","children":[["$","div",null,{"className":"flex max-w-3xl flex-col gap-3","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h1",null,{"className":"font-heading text-3xl font-semibold tracking-tight sm:text-4xl","children":"Icon grid"}],["$","span",null,{"data-slot":"badge","data-variant":"outline","className":"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground","children":"Free"}]]}],["$","p",null,{"className":"text-lg text-pretty text-muted-foreground","children":"Six linked features in joined cells with hover arrows."}],["$","p",null,{"className":"font-mono text-xs text-muted-foreground","children":["features-04"," · v","1.0.0"," · ","Features"," block ",4," of ",10]}]]}],["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","$L2a",null,{"name":"features-04","withLabel":true}],["$","$L2b",null,{"name":"features-04","className":"w-full sm:w-auto sm:min-w-80"}]]}]]}],["$","$L2c",null,{"item":{"name":"features-04","type":"registry:block","title":"Features 04: Icon grid","description":"Six linked features in joined cells with hover arrows.","categories":["marketing","features"],"tier":"free","version":"1.0.0","defaultTier":"free"},"files":[{"path":"app/page.tsx","code":"import { Features04 } from \"@/components/features-04\"\n\nexport default function Page() {\n return \n}\n","html":"$2d"},{"path":"components/features-04.tsx","code":"$2e","html":"$2f"},{"path":"components/section-frame.tsx","code":"$30","html":"$31"},{"path":"components/reveal.tsx","code":"$32","html":"$33"}],"plans":[{"name":"Hobby","description":"Every free block, to build on your own.","price":0,"priceNote":"Just for you","features":["All free blocks","shadcn CLI and MCP","Add to favorites"],"cta":{"label":"Join now","href":"/sign-up"}},{"name":"Pro","description":"Every block, for one developer.","price":147,"originalPrice":249,"priceNote":"One-time payment","featuresIntro":"Everything in Hobby, plus:","features":["All Pro blocks","Lifetime updates","Commercial license","Priority support"],"cta":{"label":"Join the waitlist","href":"#"},"highlighted":true},{"name":"Team","description":"Every block, for a whole team.","price":497,"originalPrice":899,"priceNote":"One-time payment","featuresIntro":"Everything in Pro, plus:","features":["Up to 10 members","Team workspace","Role-based permissions"],"cta":{"label":"Join the waitlist","href":"#"}}],"height":640,"hideHeader":true}],"$L34"]}]

What it installs

Versions

More features blocks