{"id":2710,"date":"2026-06-15T23:27:35","date_gmt":"2026-06-15T23:27:35","guid":{"rendered":"https:\/\/localwp.com\/?p=2710&#038;post_type=help&#038;preview_id=2710"},"modified":"2026-06-15T23:27:58","modified_gmt":"2026-06-15T23:27:58","slug":"using-local-components","status":"publish","type":"help","link":"https:\/\/localwp.com\/help-docs\/building-your-add-on\/using-local-components\/","title":{"rendered":"Using local-components"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you need to add UI components to your Local Add-on, we recommend using the <a href=\"https:\/\/www.npmjs.com\/package\/@getflywheel\/local-components\"><code><strong>@getflywheel\/local-components<\/strong><\/code><\/a> package which is available on npm.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To see what components are available in <code>local-components<\/code>, check out our <strong><a href=\"https:\/\/localwp.com\/help-docs\/designing-your-add-on\/ui-components\/\" data-type=\"help\" data-id=\"2691\">styleguide<\/a><\/strong>.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/using-local-components-1024x469.png\" alt=\"\" class=\"wp-image-2712\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/using-local-components-1024x469.png 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/using-local-components-300x137.png 300w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/using-local-components-768x352.png 768w, https:\/\/localwp.com\/wp-content\/uploads\/2026\/06\/using-local-components.png 1439w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div id=\"help-step-block_67793a726eeafd81cf0c02f599776026\" class=\"help-note-container help-type-info\">\n\t<div class=\"help-icon\">\n\t\t<svg viewBox=\"0 0 512 512\" fill=\"currentColor\"><path fill=\"currentColor\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"><\/path><\/svg>\t<\/div>\n    <div class=\"help-text\">\n\t\t<p><code>local-components<\/code> utilizes <strong><a href=\"https:\/\/github.com\/css-modules\/css-modules\" target=\"_blank\" rel=\"noopener\">CSS Modules<\/a><\/strong>, which allows multiple versions of <code>local-components<\/code> to be loaded into Local via multiple Add-ons. This allows for your Add-on to look and behave the same even if the user updates Local.<\/p>\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you need to add UI components to your Local Add-on, we recommend using the @getflywheel\/local-components package which is available on npm. To see what components are available in local-components, check out our styleguide.<\/p>\n","protected":false},"author":78,"parent":2696,"menu_order":3,"template":"","tags":[],"helpcategories":[69],"class_list":["post-2710","help","type-help","status-publish","hentry","helpcategories-building-your-add-on"],"acf":{"help_keywords":""},"_links":{"self":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc"}],"about":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/types\/help"}],"author":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/users\/78"}],"version-history":[{"count":0,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2710\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2696"}],"wp:attachment":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/media?parent=2710"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/tags?post=2710"},{"taxonomy":"helpcategories","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/helpcategories?post=2710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}