{"id":2691,"date":"2026-06-15T23:24:27","date_gmt":"2026-06-15T23:24:27","guid":{"rendered":"https:\/\/localwp.com\/?p=2691&#038;post_type=help&#038;preview_id=2691"},"modified":"2026-06-22T04:50:19","modified_gmt":"2026-06-22T04:50:19","slug":"ui-components","status":"publish","type":"help","link":"https:\/\/localwp.com\/help-docs\/designing-your-add-on\/ui-components\/","title":{"rendered":"UI components"},"content":{"rendered":"\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">To get you up and running quickly, we&#8217;ve provided a robust set of components for use in your Add-ons!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Explore the official React component library for <code><a href=\"https:\/\/www.npmjs.com\/package\/@getflywheel\/local-components\" data-type=\"link\" data-id=\"https:\/\/www.npmjs.com\/package\/@getflywheel\/local-components\" target=\"_blank\" rel=\"noopener\">@getflywheel\/local-components<\/a><\/code> below. Use this <a href=\"https:\/\/getflywheel.github.io\/local-components\/?path=\/docs\/alerts-alert--docs\" data-type=\"link\" data-id=\"https:\/\/getflywheel.github.io\/local-components\/?path=\/docs\/alerts-alert--docs\" target=\"_blank\" rel=\"noopener\">interactive Storybook workspace<\/a> to test native UI elements\u2014including buttons, form inputs, layouts, and modals, ensuring your custom add-on seamlessly matches the look and feel of Local.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"iframe-container\" style=\"text-align: center; width: 100%;\">\n    <iframe src=\"https:\/\/getflywheel.github.io\/local-components\/?path=\/docs\/alerts-alert--docs\" width=\"100%\" height=\"1500px\" style=\"border: none; box-shadow: 0 4px 8px rgba(0,0,0,0.1);\" title=\"Embedded Content\">\n    <\/iframe>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>To get you up and running quickly, we&#8217;ve provided a robust set of components for use in your Add-ons! Explore the official React component library for @getflywheel\/local-components below. Use this interactive Storybook workspace to test native UI elements\u2014including buttons, form inputs, layouts, and modals, ensuring your custom add-on seamlessly matches the look and feel of&#8230;<\/p>\n","protected":false},"author":78,"parent":2658,"menu_order":17,"template":"","tags":[],"helpcategories":[68],"class_list":["post-2691","help","type-help","status-publish","hentry","helpcategories-designing-your-add-on"],"acf":{"help_keywords":""},"_links":{"self":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2691","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\/2691\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2658"}],"wp:attachment":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/media?parent=2691"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/tags?post=2691"},{"taxonomy":"helpcategories","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/helpcategories?post=2691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}