50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T6e73,"use client"; import { motion } from "framer-motion"; const barColors = ["fill-chart-1", "fill-chart-2", "fill-chart-3"] as const; const chartPaths = [ { id: "chart-1", d: "m57.9 199.48c11.01 0 19.94 8.93 19.94 19.94v30.89c0 11.01-8.93 19.93-19.94 19.93-11 0-19.93-8.92-19.93-19.93v-30.89c0-11.01 8.93-19.94 19.93-19.94z", }, { id: "chart-2", d: "m120.74 187.11c11.01 0 19.94 8.93 19.94 19.94v43.26c0 11.01-8.93 19.93-19.94 19.93-11.01 0-19.93-8.92-19.93-19.93v-43.26c0-11.01 8.92-19.94 19.93-19.94z", }, { id: "chart-3", d: "m183.58 198.48c11.01 0 19.93 8.93 19.93 19.94v30.89c0 11.01-8.92 19.93-19.93 19.93-11.01 0-19.93-8.92-19.93-19.93v-30.89c0-11.01 8.92-19.94 19.93-19.94z", }, { id: "chart-4", d: "m247.42 144.33c11.01 0 19.93 8.92 19.93 19.93v86.05c0 11.01-8.92 19.93-19.93 19.93-11.01 0-19.93-8.92-19.93-19.93v-86.05c0-11.01 8.92-19.93 19.93-19.93z", }, { id: "chart-5", d: "m309.26 191.99c11.01 0 19.93 8.92 19.93 19.93v38.39c0 11.01-8.92 19.93-19.93 19.93-11.01 0-19.94-8.92-19.94-19.93v-38.39c0-11.01 8.93-19.93 19.94-19.93z", }, { id: "chart-6", d: "m373.1 147.95c11 0 19.93 8.93 19.93 19.93v82.43c0 11.01-8.93 19.93-19.93 19.93-11.01 0-19.94-8.92-19.94-19.93v-82.43c0-11 8.93-19.93 19.94-19.93z", }, ]; const curvePaths = [ { id: "curve-1", className: "fill-chart-2", d: "m527.16 236.81c4.78 0 8.71 3.89 8.04 8.62-1.76 12.27-7.24 23.8-15.81 32.95-8.57 9.15-19.71 15.37-31.84 17.93-4.67 0.99-8.82-2.68-9.13-7.45-0.31-4.77 3.34-8.8 7.95-10.05 7.75-2.1 14.83-6.31 20.39-12.26 5.57-5.94 9.31-13.28 10.9-21.15 0.94-4.68 4.73-8.59 9.5-8.59z", }, { id: "curve-2", className: "fill-chart-1", d: "m493.18 285.87c1.63 4.4-0.61 9.35-5.2 10.35-6.07 1.33-12.32 1.72-18.54 1.15-9.05-0.83-17.79-3.68-25.6-8.34-7.8-4.65-14.46-11-19.49-18.57-5.03-7.57-8.3-16.16-9.56-25.16-1.27-9-0.51-18.17 2.23-26.83 2.74-8.66 7.39-16.6 13.6-23.23 6.21-6.64 13.83-11.79 22.3-15.09 5.82-2.27 11.94-3.62 18.13-4.02 4.69-0.31 8.21 3.83 7.86 8.51-0.35 4.68-4.46 8.1-9.12 8.66-3.65 0.44-7.25 1.34-10.7 2.68-6.1 2.38-11.59 6.09-16.07 10.87-4.48 4.78-7.83 10.5-9.8 16.74-1.97 6.25-2.53 12.85-1.61 19.34 0.91 6.48 3.27 12.68 6.89 18.13 3.63 5.45 8.43 10.03 14.05 13.38 5.62 3.36 11.92 5.41 18.44 6.01 3.69 0.34 7.4 0.2 11.03-0.39 4.64-0.75 9.53 1.41 11.16 5.81z", }, { id: "curve-3", className: "fill-chart-3", d: "m496.05 284.41c1.95 4.43-0.04 9.67-4.7 10.97-9.48 2.65-19.49 2.97-29.19 0.87-9.7-2.09-18.69-6.52-26.22-12.83-3.71-3.12-3.37-8.72 0.25-11.94 3.61-3.23 9.11-2.83 13 0.06 4.93 3.66 10.61 6.26 16.67 7.57 6.07 1.31 12.31 1.29 18.32-0.01 4.73-1.03 9.91 0.88 11.87 5.31z", }, ]; export function Bento2Tile2() { return ( ); }4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","framer-motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://shadcnblocks.com/r/bento-tile-bento2-tile2.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/bento-tile-bento2-tile2","itemId":"@shadcnblocks/bento-tile-bento2-tile2"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"example/bento-tile/bento2-tile2.tsx","content":"\"use client\";\n\nimport { Bento2Tile2 } from \"@/components/shadcnblocks/bento-tile/bento2-tile2\";\n\nexport const title = \"Bento 2 tile 2\";\n\nconst Example = () => (\n

\n \n

\n);\n\nexport default Example;\n","type":"registry:block"},{"path":"components/shadcnblocks/bento-tile/bento2-tile2.tsx","content":"$53","type":"registry:component","target":""}]}]]}],"$L54"]}]

Bento Tile Bento2 Tile 2 Automated Progress Reports

Installation

Files

components

Styles