[{"_1":2,"_56":-5,"_57":-5},"loaderData",{"_3":4,"_6":7},"root",{"_5":-5},"theme","routes/$category.$doc",{"_8":9},"document",{"_10":11,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_31":32,"_33":30,"_34":35,"_36":37,"_38":39,"_52":17,"_53":54,"_55":54},"title","Frame","category","Components","description","A component to wrap components in a container.","icon","FrameIcon","content","\n\n## Installation\n\n\n\n\n\n\n\n## Usage\n\n```tsx\nimport { Frame } from \"@/components/ui/frame\";\n\nHello;\n```\n\n## Props\n\n","_meta",{"_22":23,"_24":23,"_25":26,"_27":28,"_29":30},"filePath","frame.mdx","fileName","directory",".","extension","mdx","path","frame","mdxSource","var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var C=(i,s)=>()=>(s||i((s={exports:{}}).exports,s),s.exports),u=(i,s)=>{for(var e in s)a(i,e,{get:s[e],enumerable:!0})},h=(i,s,e,r)=>{if(s&&typeof s==\"object\"||typeof s==\"function\")for(let n of F(s))!N.call(i,n)&&n!==e&&a(i,n,{get:()=>s[n],enumerable:!(r=y(s,n))||r.enumerable});return i};var B=(i,s,e)=>(e=i!=null?p(m(i)):{},h(s||!i||!i.__esModule?a(e,\"default\",{value:i,enumerable:!0}):e,i)),A=i=>h(a({},\"__esModule\",{value:!0}),i);var k=C((x,o)=>{o.exports=_jsx_runtime});var D={};u(D,{default:()=>t});var l=B(k());function E(i){let s={a:\"a\",code:\"code\",h2:\"h2\",pre:\"pre\",span:\"span\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",...i.components},{ComponentPreview:e,InstallWithSource:r,ReactDoc:n,ShowSource:d}=s;return e||c(\"ComponentPreview\",!0),r||c(\"InstallWithSource\",!0),n||c(\"ReactDoc\",!0),d||c(\"ShowSource\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e,{component:\"frame\",children:(0,l.jsx)(l.Fragment,{children:(0,l.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{whiteSpace:\"pre-wrap\"},tabIndex:\"0\",\"data-language\":\"tsx\",children:(0,l.jsxs)(s.code,{children:[(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { Button } \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"@/components/ui/button\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { Frame } \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"@/registry/components/frame\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\"}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" FramesExample\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" () \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=>\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" return\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,l.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Frame\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" title\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"Button\"'})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" className\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"mb-0\"'})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" caption\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"This is a button with outline styles\"'})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" >\"})}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,l.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Button\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" variant\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"outline\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">Click here\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" );\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"};\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\"}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"export\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" default\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" FramesExample;\"})]})]})})})}),`\n`,(0,l.jsxs)(s.h2,{id:\"installation\",children:[(0,l.jsx)(s.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#installation\",children:(0,l.jsx)(s.span,{className:\"icon icon-link\"})}),\"Installation\"]}),`\n`,(0,l.jsx)(r,{component:\"frame\",children:(0,l.jsx)(d,{component:\"frame\",children:(0,l.jsx)(l.Fragment,{children:(0,l.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{whiteSpace:\"pre-wrap\"},tabIndex:\"0\",\"data-language\":\"tsx\",children:(0,l.jsxs)(s.code,{children:[(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" type\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { ReactNode } \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"react\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\"}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { cn } \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"@/utils/cn\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { SquareDashedMousePointerIcon } \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"lucide-react\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\"}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"interface\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" FrameProps\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\" title\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"?:\"}),(0,l.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" string\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\" children\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\":\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" ReactNode\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\" center\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"?:\"}),(0,l.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" boolean\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\" caption\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"?:\"}),(0,l.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" string\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\" className\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"?:\"}),(0,l.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" string\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\" containerClassName\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"?:\"}),(0,l.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" string\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"}\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\"}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" Frame\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"}),(0,l.jsx)(s.span,{style:{color:\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"props\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\":\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" FrameProps\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=>\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" return\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,l.jsx)(s.span,{style:{color:\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"section\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" className\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"cn\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"mb-8 overflow-hidden\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"rounded-md border border-neutral-200 dark:border-neutral-800\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" props.className,\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" )}\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" >\"})}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {props.title \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"&&\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,l.jsx)(s.span,{style:{color:\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"div\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" className\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"cn\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"flex items-center justify-between text-sm\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"px-2.5 py-1.5\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"bg-neutral-200/30 dark:bg-neutral-800/30\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"border-b border-neutral-200 dark:border-neutral-800\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" )}\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" >\"})}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,l.jsx)(s.span,{style:{color:\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"div\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" className\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"flex items-center space-x-2 text-neutral-600 dark:text-neutral-400\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,l.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"SquareDashedMousePointerIcon\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" size\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,l.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"16\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"} />\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,l.jsx)(s.span,{style:{color:\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"span\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">{props.title}\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" )}\"})}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,l.jsx)(s.span,{style:{color:\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"div\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" className\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"cn\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"p-5\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" props.center \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"&&\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"flex items-center justify-center\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" props.containerClassName,\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" )}\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" >\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {props.children}\"})}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {props.caption \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"&&\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" <\"}),(0,l.jsx)(s.span,{style:{color:\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"div\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" className\"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,l.jsx)(s.span,{style:{color:\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"cn\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"px-2.5 py-1.5\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"text-xs text-neutral-500 dark:text-neutral-400\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"border-t border-neutral-200 dark:border-neutral-800\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" )}\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" >\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {props.caption}\"})}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" )}\"})}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" );\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\",children:(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"};\"})}),`\n`,(0,l.jsx)(s.span,{className:\"line\"}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"export\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { Frame };\"})]})]})})})})}),`\n`,(0,l.jsxs)(s.h2,{id:\"usage\",children:[(0,l.jsx)(s.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#usage\",children:(0,l.jsx)(s.span,{className:\"icon icon-link\"})}),\"Usage\"]}),`\n`,(0,l.jsx)(l.Fragment,{children:(0,l.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{whiteSpace:\"pre-wrap\"},tabIndex:\"0\",\"data-language\":\"tsx\",children:(0,l.jsxs)(s.code,{children:[(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { Frame } \"}),(0,l.jsx)(s.span,{style:{color:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,l.jsx)(s.span,{style:{color:\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:' \"@/components/ui/frame\"'}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,l.jsx)(s.span,{className:\"line\"}),`\n`,(0,l.jsxs)(s.span,{className:\"line\",children:[(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"<\"}),(0,l.jsx)(s.span,{style:{color:\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Frame\"}),(0,l.jsx)(s.span,{style:{color:\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">Hello;\"})]})]})})}),`\n`,(0,l.jsxs)(s.h2,{id:\"props\",children:[(0,l.jsx)(s.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#props\",children:(0,l.jsx)(s.span,{className:\"icon icon-link\"})}),\"Props\"]}),`\n`,(0,l.jsx)(n,{component:\"frame\",children:(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:\"Prop\"}),(0,l.jsx)(s.th,{children:\"Type\"}),(0,l.jsx)(s.th,{children:\"Required\"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:\"title\"}),(0,l.jsx)(s.td,{children:\"string\"}),(0,l.jsx)(s.td,{children:\"No\"})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:\"center\"}),(0,l.jsx)(s.td,{children:\"boolean\"}),(0,l.jsx)(s.td,{children:\"No\"})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:\"caption\"}),(0,l.jsx)(s.td,{children:\"string\"}),(0,l.jsx)(s.td,{children:\"No\"})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:\"className\"}),(0,l.jsx)(s.td,{children:\"string\"}),(0,l.jsx)(s.td,{children:\"No\"})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:\"containerClassName\"}),(0,l.jsx)(s.td,{children:\"string\"}),(0,l.jsx)(s.td,{children:\"No\"})]})]})]})})]})}function t(i={}){let{wrapper:s}=i.components||{};return s?(0,l.jsx)(s,{...i,children:(0,l.jsx)(E,{...i})}):E(i)}function c(i,s){throw new Error(\"Expected \"+(s?\"component\":\"object\")+\" `\"+i+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return A(D);})();\n;return Component;","slug","url","/components/frame","rawUrl","/components/frame/raw","toc",[40,46,49],{"_41":42,"_43":44,"_33":45},"level",2,"text","Installation","installation",{"_41":42,"_43":47,"_33":48},"Usage","usage",{"_41":42,"_43":50,"_33":51},"Props","props","lucideIcon","createdAt","2025-07-31T20:56:24.532Z","updatedAt","actionData","errors"]

Prop	Type	Required
title	string	No
center	boolean	No
caption	string	No
className	string	No
containerClassName	string	No

Command Palette

Frame

Installation

Usage

Props