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\":\"Features\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/features\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Features 05: Checklist with stats\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/features/features-05\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Features 05: Checklist with stats\",\"description\":\"A checklist of benefits next to a stack of numbers with sparklines.\",\"url\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/features/features-05\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"version\":\"1.0.0\",\"isAccessibleForFree\":true,\"publisher\":{\"@type\":\"Organization\",\"name\":\"lib\"}}]"}}] 2d:T54d,

import { Features05 } from "@/components/features-05"

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

2e:Tbe9,// @lib/features-05@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import { CheckCircle2 } from "lucide-react" import { GridPattern } from "@/components/grid-pattern" import { SectionFrame } from "@/components/section-frame" const points = [ "Imports your full billing history on day one", "Handles upgrades, refunds, coupons and taxes", "Keeps every number in sync every five minutes", "Explains each metric in plain words", "Shares read-only links with your board", "Exports anything to CSV or Sheets", ] const stats = [ { label: "MRR", value: "$45,231", change: "+12.1%", points: "0,28 12,24 24,26 36,18 48,20 60,12 72,14 84,6 96,4" }, { label: "Net revenue retention", value: "114%", change: "+3.2%", points: "0,20 12,22 24,18 36,19 48,14 60,15 72,10 84,12 96,8" }, { label: "Customer churn", value: "1.8%", change: "−0.6%", points: "0,6 12,8 24,10 36,9 48,14 60,16 72,15 84,20 96,24" }, ] export function Features05() { return (

The boring parts, done for you

Revenue math is full of edge cases. Acme handles them so your numbers match your bank.

{point}

{stat.label} {stat.value} {stat.change}

) } 2f:T5b76,

// @lib/features-05@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import { CheckCircle2 } from "lucide-react"

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

const points = [
  "Imports your full billing history on day one",
  "Handles upgrades, refunds, coupons and taxes",
  "Keeps every number in sync every five minutes",
  "Explains each metric in plain words",
  "Shares read-only links with your board",
  "Exports anything to CSV or Sheets",
]

const stats = [
  { label: "MRR", value: "$45,231", change: "+12.1%", points: "0,28 12,24 24,26 36,18 48,20 60,12 72,14 84,6 96,4" },
  { label: "Net revenue retention", value: "114%", change: "+3.2%", points: "0,20 12,22 24,18 36,19 48,14 60,15 72,10 84,12 96,8" },
  { label: "Customer churn", value: "1.8%", change: "−0.6%", points: "0,6 12,8 24,10 36,9 48,14 60,16 72,15 84,20 96,24" },
]

export function Features05() {
  return (
    <SectionFrame>
      <div className="grid grid-cols-1 lg:grid-cols-2">
        <div className="flex flex-col gap-8 p-8 sm:p-12">
          <div className="flex flex-col gap-4">
            <h2 className="font-heading text-3xl font-semibold tracking-tighter sm:text-4xl">The boring parts, done for you</h2>
            <p className="text-lg text-muted-foreground">
              Revenue math is full of edge cases. Acme handles them so your numbers match your bank.
            </p>
          </div>
          <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            {points.map((point) => (
              <li key={point} className="flex gap-2 text-sm">
                <CheckCircle2 aria-hidden className="mt-0.5 size-4 shrink-0 text-chart-4" />
                {point}
              </li>
            ))}
          </ul>
        </div>
        <div className="relative isolate flex flex-col justify-center border-t lg:border-t-0 lg:border-l">
          <GridPattern variant="dots" size={16} fade="none" className="opacity-50" />
          <ul className="flex flex-col">
          {stats.map((stat) => (
            <li key={stat.label} className="flex items-center gap-6 border-b bg-background/80 px-8 py-6 backdrop-blur last:border-b-0 sm:px-12">
              <div className="flex flex-1 flex-col gap-1">
                <span className="text-sm text-muted-foreground">{stat.label}</span>
                <span className="flex items-baseline gap-2">
                  <span className="font-heading text-3xl font-semibold tracking-tight tabular-nums">{stat.value}</span>
                  <span className="text-xs text-muted-foreground tabular-nums">{stat.change}</span>
                </span>
              </div>
              <svg aria-hidden viewBox="0 0 96 30" className="h-10 w-28 text-foreground">
                <polyline points={stat.points} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
              </svg>
            </li>
          ))}
          </ul>
        </div>
      </div>
    </SectionFrame>
  )
}

30:T5bb,// @lib/grid-pattern@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import * as React from "react" import { cn } from "@/lib/utils" type GridPatternProps = React.ComponentProps<"div"> & { /** Size of one cell in pixels */ size?: number variant?: "lines" | "dots" /** Where the pattern stays visible before fading out */ fade?: "center" | "top" | "bottom" | "none" } const fades = { center: "[mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]", top: "[mask-image:radial-gradient(ellipse_80%_60%_at_50%_0%,black,transparent)]", bottom: "[mask-image:linear-gradient(to_top,black,transparent)]", none: "", } /** Decorative background grid or dots, drawn with theme borders so it works in light and dark. */ function GridPattern({ size = 48, variant = "lines", fade = "center", className, style, ...props }: GridPatternProps) { const background = variant === "lines" ? "linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px)" : "radial-gradient(var(--border) 1.2px, transparent 1.2px)" return (

) } export { GridPattern, type GridPatternProps } 31:T2b54,

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

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

type GridPatternProps = React.ComponentProps<"div"> & {
  /** Size of one cell in pixels */
  size?: number
  variant?: "lines" | "dots"
  /** Where the pattern stays visible before fading out */
  fade?: "center" | "top" | "bottom" | "none"
}

const fades = {
  center: "[mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]",
  top: "[mask-image:radial-gradient(ellipse_80%_60%_at_50%_0%,black,transparent)]",
  bottom: "[mask-image:linear-gradient(to_top,black,transparent)]",
  none: "",
}

/** Decorative background grid or dots, drawn with theme borders so it works in light and dark. */
function GridPattern({ size = 48, variant = "lines", fade = "center", className, style, ...props }: GridPatternProps) {
  const background =
    variant === "lines"
      ? "linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px)"
      : "radial-gradient(var(--border) 1.2px, transparent 1.2px)"

  return (
    <div
      aria-hidden
      data-slot="grid-pattern"
      className={cn("pointer-events-none absolute inset-0 -z-10", fades[fade], className)}
      style={{ backgroundImage: background, backgroundSize: `${size}px ${size}px`, ...style }}
      {...props}
    />
  )
}

export { GridPattern, type GridPatternProps }

32: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 } 33: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 }

34:Tb2f,

What it installs

Versions

More features blocks