var Component=(()=>{var y=Object.create;var l=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),C=(e,r)=>{for(var o in r)l(e,o,{get:r[o],enumerable:!0})},t=(e,r,o,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of g(r))!f.call(e,i)&&i!==o&&l(e,i,{get:()=>r[i],enumerable:!(s=v(r,i))||s.enumerable});return e};var b=(e,r,o)=>(o=e!=null?y(u(e)):{},t(r||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),N=e=>t(l({},"__esModule",{value:!0}),e);var d=m((I,h)=>{h.exports=_jsx_runtime});var w={};C(w,{default:()=>k,frontmatter:()=>x});var n=b(d()),x={title:"Card",navTitle:"Card",keywords:["card"],description:"The Card component provides a flexible container with optional decorative patterns, used throughout Xata for consistent design.",slug:"components/card",published:!0};function p(e){let r={code:"code",div:"div",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",strong:"strong",...e.components},{Box:o,Card:s,LinkOverlay:i,SpotlightCard:c}=r;return o||a("Box",!0),s||a("Card",!0),i||a("LinkOverlay",!0),c||a("SpotlightCard",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.h2,{children:"Card"}),` `,(0,n.jsxs)(r.p,{children:["The ",(0,n.jsx)(r.code,{children:"Card"})," component is an enhanced ",(0,n.jsx)(r.code,{children:"Box"})," component that primarily includes border styles. Additionally, you can apply various decorative patterns to the card by specifying one of the following options: ",(0,n.jsx)(r.code,{children:"'none' | 'right' | 'bottomLeft' | 'bottomRight' | 'bottom' | 'topRight' | 'topLeft'"}),"."]}),` `,(0,n.jsxs)(r.p,{children:["The ",(0,n.jsx)(r.code,{children:"Card"})," component can also be made ",(0,n.jsx)(r.strong,{children:"clickable"}),". To do this, set the ",(0,n.jsx)(r.code,{children:"isClickable"})," prop, which will render the ",(0,n.jsx)(r.code,{children:"Card"})," as a Chakra UI ",(0,n.jsx)(r.code,{children:"LinkBox"}),". This requires using the ",(0,n.jsx)(r.code,{children:"LinkOverlay"})," component as a child or wrapping it around the title or content."]}),` `,(0,n.jsx)(r.h3,{children:"Examples"}),` `,(0,n.jsx)(r.h4,{children:"Basic Card"}),` `,(0,n.jsx)(s,{p:4,mb:4,children:(0,n.jsxs)("p",{children:["I'm a Card with padding of ",(0,n.jsx)(r.code,{children:"4"})]})}),` `,(0,n.jsx)(r.div,{className:"shiki-container",children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"} "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"mb"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a Card with padding of `4`"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:""})]})]})})}),` `,(0,n.jsx)(r.h4,{children:"Clickable Card with Pattern"}),` `,(0,n.jsxs)(s,{p:4,isClickable:!0,pattern:"topRight",mb:4,children:[(0,n.jsx)(i,{href:"#",children:"I'm a LinkOverlay"}),(0,n.jsxs)("p",{children:["I'm a clickable Card with padding of ",(0,n.jsx)(r.code,{children:"4"})," and a ",(0,n.jsx)(r.code,{children:"topRight"})," pattern"]})]}),` `,(0,n.jsx)(r.div,{className:"shiki-container",children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"} "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"isClickable"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" pattern"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"topRight"'}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"LinkOverlay"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" href"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"#"'}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a LinkOverlay"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a clickable Card with padding of `4` and a `topRight` pattern"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:""})]})]})})}),` `,(0,n.jsx)(r.h3,{children:"Code"}),` `,(0,n.jsxs)(r.p,{children:["To use the ",(0,n.jsx)(r.code,{children:"Card"})," component in your application, import and use it as shown below:"]}),` `,(0,n.jsx)(r.div,{className:"shiki-container",children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { Card } "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@internal/components'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),` `,(0,n.jsx)(r.span,{className:"line"}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" MyComponent"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">My Card content"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),` `,(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),` `,(0,n.jsx)(r.h2,{children:"Spotlight Card"}),` `,(0,n.jsxs)(r.p,{children:["The ",(0,n.jsx)(r.code,{children:"SpotlightCard"})," component adds an interactive spotlight effect that follows your mouse on hover. Use this card as a wrapper. If padding is needed, include a nested ",(0,n.jsx)(r.code,{children:"Box"})," or ",(0,n.jsx)(r.code,{children:"Flex"})," component with the desired padding properties."]}),` `,(0,n.jsxs)(r.p,{children:["Similar to the standard ",(0,n.jsx)(r.code,{children:"Card"}),", the ",(0,n.jsx)(r.code,{children:"SpotlightCard"})," accepts a ",(0,n.jsx)(r.code,{children:"pattern"})," prop and can also be made clickable using the ",(0,n.jsx)(r.code,{children:"isClickable"})," prop."]}),` `,(0,n.jsx)(r.h3,{children:"Examples"}),` `,(0,n.jsx)(r.h4,{children:"Basic Spotlight Card"}),` `,(0,n.jsx)(c,{mb:4,children:(0,n.jsx)(o,{p:4,children:(0,n.jsxs)("p",{children:["I'm a SpotlightCard with padding of ",(0,n.jsx)(r.code,{children:"4"})]})})}),` `,(0,n.jsx)(r.div,{className:"shiki-container",children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"SpotlightCard"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"Box"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a SpotlightCard with padding of `4`"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:""})]})]})})}),` `,(0,n.jsx)(r.h4,{children:"Clickable Spotlight Card with Pattern"}),` `,(0,n.jsx)(c,{isClickable:!0,mb:4,pattern:"topRight",children:(0,n.jsx)(o,{p:4,children:(0,n.jsxs)("p",{children:["I'm a clickable SpotlightCard with padding of ",(0,n.jsx)(r.code,{children:"4"})," and a ",(0,n.jsx)(r.code,{children:"topRight"})," pattern"]})})}),` `,(0,n.jsx)(r.div,{className:"shiki-container",children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"SpotlightCard"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" isClickable"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" pattern"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"topRight"'}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"Box"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a clickable SpotlightCard with padding of `4` and a `topRight` pattern"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:""})]})]})})}),` `,(0,n.jsx)(r.h3,{children:"Code"}),` `,(0,n.jsxs)(r.p,{children:["To use the ",(0,n.jsx)(r.code,{children:"SpotlightCard"})," in your application, import and use it as follows:"]}),` `,(0,n.jsx)(r.div,{className:"shiki-container",children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { SpotlightCard } "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@internal/components'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),` `,(0,n.jsx)(r.span,{className:"line"}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" MyComponent"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"SpotlightCard"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"Box"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a SpotlightCard"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),` `,(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),` `,(0,n.jsx)(r.h2,{children:"Card Pattern"}),` `,(0,n.jsxs)(r.p,{children:["You can also import the ",(0,n.jsx)(r.code,{children:"CardPattern"})," component to apply various decorative patterns to a section of your design. The available variants are ",(0,n.jsx)(r.code,{children:"'right' | 'bottomLeft' | 'bottomRight' | 'bottom' | 'topRight' | 'topLeft'"}),"."]}),` `,(0,n.jsx)(r.div,{className:"shiki-container",children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { CardPattern } "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@internal/components'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),` `,(0,n.jsx)(r.span,{className:"line"}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" MyComponent"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"Box"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"CardPattern"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" variant"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bottomRight"'}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">Lorem ipsum"})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),` `,(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),` `,(0,n.jsx)(r.p,{children:"By using these components, you can create consistent, styled containers throughout your application, enhancing both the design and user experience."})]})}function k(e={}){let{wrapper:r}=e.components||{};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function a(e,r){throw new Error("Expected "+(r?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(w);})(); ;return Component;

Welcome to the Xata Design System

Colors

Typography

Illustrations

Logos