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:T64cd,"use client"; import { motion } from "framer-motion"; interface Segment { id: string; d: string; } const segmentColors = ["fill-chart-1", "fill-chart-2", "fill-chart-3"] as const; interface Month { id: string; segments: [Segment, Segment, Segment]; } const months: Month[] = [ { id: "jan-line", segments: [ { id: "jan1", d: "m20.04 161.93c1.11 0 2.01 0.9 2.01 2.01v11.36c0 1.1-0.9 2-2.01 2-1.1 0-2-0.9-2-2v-11.36c0-1.11 0.9-2.01 2-2.01z", }, { id: "jan2", d: "m20.04 142.56c1.11 0 2.01 0.89 2.01 2v10.02c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-10.02c0-1.11 0.9-2 2-2z", }, { id: "jan3", d: "m20.04 120.51c1.11 0 2.01 0.89 2.01 2v12.7c0 1.1-0.9 2-2.01 2-1.1 0-2-0.9-2-2v-12.7c0-1.11 0.9-2 2-2z", }, ], }, { id: "feb-line", segments: [ { id: "feb1", d: "m48.92 139.21c1.11 0 2.01 0.9 2.01 2.01v34.07c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-34.07c0-1.11 0.9-2.01 2-2.01z", }, { id: "feb2", d: "m48.92 119.84c1.11 0 2.01 0.9 2.01 2v10.02c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-10.02c0-1.1 0.9-2 2-2z", }, { id: "feb3", d: "m48.92 97.79c1.11 0 2.01 0.9 2.01 2v12.7c0 1.11-0.9 2-2.01 2-1.1 0-2-0.89-2-2v-12.7c0-1.1 0.9-2 2-2z", }, ], }, { id: "mar-line", segments: [ { id: "mar1", d: "m77.8 120.51c1.11 0 2.01 0.89 2.01 2v52.78c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-52.78c0-1.11 0.9-2 2-2z", }, { id: "mar2", d: "m77.8 87.1c1.11 0 2.01 0.9 2.01 2v24.06c0 1.1-0.9 2-2.01 2-1.1 0-2-0.9-2-2v-24.06c0-1.1 0.9-2 2-2z", }, { id: "mar3", d: "m77.8 73.74c1.11 0 2.01 0.89 2.01 2v4.01c0 1.11-0.9 2-2.01 2-1.1 0-2-0.89-2-2v-4.01c0-1.11 0.9-2 2-2z", }, ], }, { id: "apr-line", segments: [ { id: "apr1", d: "m106.68 156.59c1.11 0 2.01 0.89 2.01 2v16.7c0 1.11-0.9 2.01-2.01 2.01-1.11 0-2-0.9-2-2.01v-16.7c0-1.11 0.89-2 2-2z", }, { id: "apr2", d: "m106.68 112.49c1.11 0 2.01 0.9 2.01 2v34.75c0 1.1-0.9 2-2.01 2-1.11 0-2-0.9-2-2v-34.75c0-1.1 0.89-2 2-2z", }, { id: "apr3", d: "m106.68 71.73c1.11 0 2.01 0.9 2.01 2.01v31.4c0 1.11-0.9 2-2.01 2-1.11 0-2-0.89-2-2v-31.4c0-1.11 0.89-2.01 2-2.01z", }, ], }, { id: "may-line", segments: [ { id: "may1", d: "m135.56 137.21c1.11 0 2 0.9 2 2v36.08c0 1.11-0.89 2.01-2 2.01-1.11 0-2-0.9-2-2.01v-36.08c0-1.1 0.89-2 2-2z", }, { id: "may2", d: "m135.56 117.83c1.11 0 2 0.9 2 2.01v10.02c0 1.11-0.89 2.01-2 2.01-1.11 0-2-0.9-2-2.01v-10.02c0-1.11 0.89-2.01 2-2.01z", }, { id: "may3", d: "m135.56 77.08c1.11 0 2 0.89 2 2v31.4c0 1.11-0.89 2.01-2 2.01-1.11 0-2-0.9-2-2.01v-31.4c0-1.11 0.89-2 2-2z", }, ], }, { id: "jun-line", segments: [ { id: "jun1", d: "m164.44 135.21c1.11 0 2 0.89 2 2v38.09c0 1.1-0.89 2-2 2-1.11 0-2-0.9-2-2v-38.09c0-1.11 0.89-2 2-2z", }, { id: "jun2", d: "m164.44 115.83c1.11 0 2 0.9 2 2v10.03c0 1.1-0.89 2-2 2-1.11 0-2-0.9-2-2v-10.03c0-1.1 0.89-2 2-2z", }, { id: "jun3", d: "m164.44 93.78c1.11 0 2 0.9 2 2v12.7c0 1.11-0.89 2-2 2-1.11 0-2-0.89-2-2v-12.7c0-1.1 0.89-2 2-2z", }, ], }, { id: "jul-line", segments: [ { id: "jul1", d: "m193.32 120.51c1.1 0 2 0.89 2 2v52.78c0 1.11-0.9 2.01-2 2.01-1.11 0-2.01-0.9-2.01-2.01v-52.78c0-1.11 0.9-2 2.01-2z", }, { id: "jul2", d: "m193.32 87.1c1.1 0 2 0.9 2 2v24.06c0 1.1-0.9 2-2 2-1.11 0-2.01-0.9-2.01-2v-24.06c0-1.1 0.9-2 2.01-2z", }, { id: "jul3", d: "m193.32 73.74c1.1 0 2 0.89 2 2v4.01c0 1.11-0.9 2-2 2-1.11 0-2.01-0.89-2.01-2v-4.01c0-1.11 0.9-2 2.01-2z", }, ], }, { id: "aug-line", segments: [ { id: "aug1", d: "m222.2 120.51c1.1 0 2 0.89 2 2v52.78c0 1.11-0.9 2.01-2 2.01-1.11 0-2.01-0.9-2.01-2.01v-52.78c0-1.11 0.9-2 2.01-2z", }, { id: "aug2", d: "m222.2 87.1c1.1 0 2 0.9 2 2v24.06c0 1.1-0.9 2-2 2-1.11 0-2.01-0.9-2.01-2v-24.06c0-1.1 0.9-2 2.01-2z", }, { id: "aug3", d: "m222.2 73.74c1.1 0 2 0.89 2 2v4.01c0 1.11-0.9 2-2 2-1.11 0-2.01-0.89-2.01-2v-4.01c0-1.11 0.9-2 2.01-2z", }, ], }, { id: "sep-line", segments: [ { id: "sep1", d: "m251.08 151.24c1.1 0 2 0.9 2 2.01v22.04c0 1.11-0.9 2.01-2 2.01-1.11 0-2.01-0.9-2.01-2.01v-22.04c0-1.11 0.9-2.01 2.01-2.01z", }, { id: "sep2", d: "m251.08 131.87c1.1 0 2 0.89 2 2v10.02c0 1.11-0.9 2.01-2 2.01-1.11 0-2.01-0.9-2.01-2.01v-10.02c0-1.11 0.9-2 2.01-2z", }, { id: "sep3", d: "m251.08 118.5c1.1 0 2 0.9 2 2.01v4.01c0 1.1-0.9 2-2 2-1.11 0-2.01-0.9-2.01-2v-4.01c0-1.11 0.9-2.01 2.01-2.01z", }, ], }, { id: "oct-line", segments: [ { id: "oct1", d: "m279.95 139.21c1.11 0 2.01 0.9 2.01 2.01v34.07c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-34.07c0-1.11 0.9-2.01 2-2.01z", }, { id: "oct2", d: "m279.95 95.12c1.11 0 2.01 0.89 2.01 2v34.74c0 1.11-0.9 2.01-2.01 2.01-1.1 0-2-0.9-2-2.01v-34.74c0-1.11 0.9-2 2-2z", }, { id: "oct3", d: "m279.95 73.07c1.11 0 2.01 0.89 2.01 2v12.7c0 1.1-0.9 2-2.01 2-1.1 0-2-0.9-2-2v-12.7c0-1.11 0.9-2 2-2z", }, ], }, ]; export function Bento2Tile1() { 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-tile1.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/bento-tile-bento2-tile1","itemId":"@shadcnblocks/bento-tile-bento2-tile1"}],["$","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-tile1.tsx","content":"\"use client\";\n\nimport { Bento2Tile1 } from \"@/components/shadcnblocks/bento-tile/bento2-tile1\";\n\nexport const title = \"Bento 2 tile 1\";\n\nconst Example = () => (\n

\n \n

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

Bento Tile Bento2 Tile 1 Stats Overview Bar Chart

Installation

Files

components

Styles