{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/6evWbAiimkeVCTHEepAH/wFxlj2SAOYca9N7qCWW9/jB6hmNFTd.js"],
  "sourcesContent": ["// Generated by Framer (f7ce5cf)\nexport default function metadata(params,activeLocale){return{breakpoints:[{hash:\"ic9urx\",mediaQuery:\"(min-width: 1200px)\"},{hash:\"1gwkvxg\",mediaQuery:\"(min-width: 810px) and (max-width: 1199px)\"},{hash:\"1hfsmh0\",mediaQuery:\"(max-width: 809px)\"}],customHTMLHeadStart:'<script type=\"application/ld+json\">\\n{\\n  \"@context\": \"https://schema.org\",\\n  \"@graph\": [\\n    {\\n      \"@type\": \"WebSite\",\\n      \"@id\": \"https://www.framersnippets.com#website\",\\n      \"url\": \"https://www.framersnippets.com\",\\n      \"name\": \"Framer Snippets\"\\n    },\\n    {\\n      \"@type\": \"Article\",\\n      \"@id\": \"https://www.framersnippets.com/articles/how-to-use-framer-components#article\",\\n      \"isPartOf\": {\\n        \"@id\": \"https://www.framersnippets.com/articles/how-to-use-framer-components#webpage\"\\n      },\\n      \"headline\": \"How to use Framer Components\",\\n      \"datePublished\": \"2024-09-11T00:00:00+00:00\",\\n      \"dateModified\": \"2024-09-11T00:00:00+00:00\",\\n      \"author\": {\\n        \"@type\": \"Person\",\\n        \"name\": \"Framer Snippets\"\\n      },\\n      \"description\": \"Learn how to create, use and import Framer Components effectively into your projects, leveraging variables, property panels, and instances to balance cohesive design with unique customization.\"\\n    },\\n    {\\n      \"@type\": \"WebPage\",\\n      \"@id\": \"https://www.framersnippets.com/articles/how-to-use-framer-components#webpage\",\\n      \"url\": \"https://www.framersnippets.com/articles/how-to-use-framer-components\",\\n      \"name\": \"How to use Framer Components | Framer Snippets\",\\n      \"isPartOf\": {\\n        \"@id\": \"https://www.framersnippets.com#website\"\\n      },\\n      \"datePublished\": \"2024-09-11T00:00:00+00:00\",\\n      \"dateModified\": \"2024-09-11T00:00:00+00:00\",\\n      \"description\": \"Learn how to create, use and import Framer Components effectively into your projects, leveraging variables, property panels, and instances to balance cohesive design with unique customization.\",\\n      \"breadcrumb\": {\\n        \"@id\": \"https://www.framersnippets.com/articles/how-to-use-framer-components#breadcrumb\"\\n      }\\n    },\\n    {\\n      \"@type\": \"BreadcrumbList\",\\n      \"@id\": \"https://www.framersnippets.com/articles/how-to-use-framer-components#breadcrumb\",\\n      \"itemListElement\": [\\n        {\\n          \"@type\": \"ListItem\",\\n          \"position\": 1,\\n          \"item\": {\\n            \"@type\": \"WebPage\",\\n            \"@id\": \"https://www.framersnippets.com\",\\n            \"url\": \"https://www.framersnippets.com\",\\n            \"name\": \"Framer Snippets \u2014 Ship Faster with Top Framer Components\"\\n          }\\n        },\\n        {\\n          \"@type\": \"ListItem\",\\n          \"position\": 2,\\n          \"item\": {\\n            \"@type\": \"WebPage\",\\n            \"@id\": \"https://www.framersnippets.com/articles/how-to-use-framer-components\",\\n            \"url\": \"https://www.framersnippets.com/articles/how-to-use-framer-components\",\\n            \"name\": \"How to use Framer Components | Framer Snippets\"\\n          }\\n        }\\n      ]\\n    }\\n  ]\\n}\\n</script>',description:\"Learn how to create, use and import Framer Components effectively into your projects, leveraging variables, property panels, and instances to balance cohesive design with unique customization.\",elements:{},framerSearch:{index:false},robots:\"max-image-preview:large\",serializationId:\"framer-LQr7Q\",socialImage:\"https://framerusercontent.com/assets/igZQOro2oQu7RB2TgfMBQhQmpL8.png\",title:\"How to use Framer Components | Framer Snippets\",viewport:\"width=device-width\"};}export const metadataVersion=1;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"metadataVersion\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],
  "mappings": "AACe,SAARA,EAA0BC,EAAOC,EAAa,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,SAAS,WAAW,qBAAqB,EAAE,CAAC,KAAK,UAAU,WAAW,4CAA4C,EAAE,CAAC,KAAK,UAAU,WAAW,oBAAoB,CAAC,EAAE,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAA6sF,YAAY,mMAAmM,SAAS,CAAC,EAAE,aAAa,CAAC,MAAM,EAAK,EAAE,OAAO,0BAA0B,gBAAgB,eAAe,YAAY,uEAAuE,MAAM,iDAAiD,SAAS,oBAAoB,CAAE,CAAQ,IAAMC,EAAgB,EACv8GC,EAAqB,CAAC,QAAU,CAAC,QAAU,CAAC,KAAO,WAAW,YAAc,CAAC,sBAAwB,GAAG,CAAC,EAAE,gBAAkB,CAAC,KAAO,WAAW,YAAc,CAAC,sBAAwB,GAAG,CAAC,EAAE,mBAAqB,CAAC,KAAO,UAAU,CAAC,CAAC",
  "names": ["metadata", "params", "activeLocale", "metadataVersion", "__FramerMetadata__"]
}