Integrate Custom Components

","builder-f26dfd96d21046038e717bb63a197453","builder-6810f93360ea4a83a70347adf69b0ded",{"_1739":1867},{"_39":1851,"_132":1852,"_248":-5},{"_71":1849},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":118,"_1837":1838,"_1839":1840,"_91":1639,"_1850":1750,"_1748":1750,"_97":98},"minHeight","Image",{"_1853":1854,"_1855":1838,"_1856":1857,"_1858":1859,"_1860":47,"_1861":1862,"_91":1863,"_93":1864,"_1865":47,"_1866":106},"image","https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F6fc1a517839d4d86b7149717e1fe5ad1?width=508","backgroundPosition","backgroundSize","cover","aspectRatio",0.5178,"lazy","sizes","(max-width: 638px) 80vw, (max-width: 998px) 51vw, 35vw",807,1434,"lockAspectRatio","altText","builder-330efa20c5834bff93952a5b228ab27a","builder-0616bf48e31f4cf08b7b91baf21b26c2","href",[1871],{"_82":83,"_109":110,"_84":1809,"_41":1872,"_86":1873,"_1812":803,"_35":1874,"_227":1875,"_88":1876},"builder-a0ff6d5688ce44dbbe08424c4526bfc9",{"_1869":803},{"_1739":1900},[1879,1880],{"_71":1877,"_184":1878},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127,"_129":1820,"_1625":210,"_1650":1645,"_97":98,"_1821":1822,"_1653":1654,"_1655":1823,"_1657":244,"_1824":1825,"_99":1639,"_1826":1827,"_93":1639},{"_119":1819,"_117":1639,"_245":1639,"_93":1638},{"_82":83,"_109":110,"_41":1890,"_35":1891,"_51":1892,"_88":1893},{"_82":83,"_109":110,"_41":1881,"_35":1882,"_51":1883,"_88":1884},"builder-569b276d01d448b1a73d07b19f4b3784",{"_1739":1889},{"_39":1841,"_132":1887,"_248":-5},{"_71":1885,"_115":1886},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":1836,"_1837":1838,"_1839":1840,"_91":1639},{"_117":1640,"_245":1640},{"_215":1888},"

Integrate Design Tokens

","builder-2eb0c53c79cd44a09a144333b4cbab25","builder-647bf240eab6486b90fd1ddd743108ea",{"_1739":1899},{"_39":1851,"_132":1895,"_248":-5},{"_71":1894},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":118,"_1837":1838,"_1839":1840,"_91":1639,"_1850":1750,"_1748":1750,"_97":98},{"_1853":1896,"_1855":1838,"_1856":1857,"_1858":1859,"_1860":47,"_1861":1862,"_91":1897,"_93":1898,"_1865":47,"_1866":106},"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F00095928abda47148b23a031dd1de765?width=508",448,996,"builder-3776dd5e2a384f76b42205562312df66","builder-2c1c295892704fd18dc90d16f22e8286","builder-dfea3e24764e42d6bbcd1d2d933a2b1a","builder-527eb4819e214c089a0046172fc913ff",{"_1739":1977},{"_39":456,"_132":1907,"_248":-5},{"_71":1906},{"_123":124,"_125":92,"_126":127,"_117":1639,"_245":1639,"_93":1638,"_119":1819,"_94":120,"_121":122,"_1642":1643,"_1753":118},{"_1799":1908,"_1801":1802,"_1803":1804},[1909,1910],{"_66":1939},{"_66":1911},[1912],{"_82":83,"_109":110,"_84":1809,"_41":1913,"_86":1914,"_1812":1915,"_35":1916,"_227":1917,"_88":1918},"builder-c46ee587338847d49dd453025d55fb7d",{"_1869":1915},"https://www.builder.io/c/docs/projects-figma",{"_1739":1868},[1921,1922],{"_71":1919,"_184":1920},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127,"_129":1820,"_1625":210,"_1650":1645,"_97":98,"_1821":1822,"_1653":1654,"_1655":1823,"_1657":244,"_1824":1825,"_99":1639,"_1826":1827,"_93":1639},{"_119":1819,"_117":1639,"_245":1639,"_93":1638},{"_82":83,"_109":110,"_41":1931,"_35":1932,"_51":1933,"_88":1934},{"_82":83,"_109":110,"_41":1923,"_35":1924,"_51":1925,"_88":1926},"builder-25848274441f4eba97ab35e5557a7e3e",{"_1739":1844},{"_39":1841,"_132":1929,"_248":-5},{"_71":1927,"_115":1928},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":1836,"_1837":1838,"_1839":1840,"_91":1639},{"_117":1640,"_245":1640},{"_215":1930},"

Figma Design to Builder Project

","builder-78f655cc750e48d797fff950ea5b3a9d",{"_1739":1867},{"_39":1851,"_132":1936,"_248":-5},{"_71":1935},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":118,"_1837":1838,"_1839":1840,"_91":1639,"_1850":1750,"_1748":1750,"_97":98,"_1625":208},{"_1853":1937,"_1855":1626,"_1856":1857,"_1858":1859,"_1860":47,"_1861":1862,"_91":1897,"_93":1898,"_1865":47,"_1866":1938},"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3804763d11914c9badaeefc56f408f73?width=508","Firgma logo with Builder design in Figma ready to be exported to Builder.",[1940],{"_82":83,"_109":110,"_84":1809,"_41":1941,"_86":1942,"_1812":1943,"_35":1944,"_227":1945,"_88":1946},"builder-8ee4b956f5f34514b0618a171622093a",{"_1869":1943},"https://www.builder.io/c/docs/generate-code",{"_1739":1976},[1948,1949],{"_71":1947},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127,"_129":1820,"_1625":210,"_1650":1645,"_97":98,"_1821":1822,"_1653":1654,"_1655":1823,"_1657":244,"_1824":1825,"_99":1639},{"_82":83,"_109":110,"_41":1959,"_227":1960,"_88":1961},{"_82":83,"_109":110,"_41":1950,"_35":1951,"_51":1952,"_88":1953},"builder-32abc7b5f77b4dfd833742b8b06b1e17",{"_1739":1958},{"_39":1841,"_132":1956,"_248":-5},{"_71":1954,"_115":1955},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":1836,"_1837":1838,"_1839":1840,"_91":1639},{"_117":1651,"_245":1651},{"_215":1957},"

Generate Code

","builder-2dce93bbd2a04a54bc3e7c420bb40a6d","builder-9611e59817144624b5daf3b200cb6148",[1963],{"_71":1962},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127},{"_82":83,"_109":110,"_41":1964,"_35":1965,"_51":1966,"_88":1967},"builder-dc06b44fd10b4a46b6718734eedc112f",{"_1739":1975},{"_39":1851,"_132":1969,"_248":-5},{"_71":1968},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":118,"_1837":1838,"_1839":1840,"_91":1639,"_1850":1750,"_1748":1750,"_97":98},{"_1853":1970,"_1855":1626,"_1856":1857,"_1858":1971,"_1860":47,"_1861":1972,"_91":1973,"_93":1974,"_1866":106},"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F889d0d69c3b541bbafd061e95350c249?width=596",0.5169,"(max-width: 638px) 94vw, (max-width: 998px) 58vw, 35vw",1195,2000,"builder-69f31d14625144f59cf215ca3d95689e","builder-855587e4c28247e3bb7ab14a4276e218","builder-6b3a7482a8c649f6aaf656a768ca0c7c","builder-a856682316b444a0b68eb9214ed235ca",{"_1739":2000},{"_39":1841,"_132":1998,"_248":-5},{"_71":1982,"_184":1983,"_115":1984},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127,"_119":1986,"_1839":1987,"_91":1639,"_1837":1838,"_1988":1989,"_1990":1991,"_1985":1647,"_1992":1993,"_1994":1995,"_117":118,"_1996":1997,"_1649":118,"_1753":1648},{"_1753":118},{"_1985":1647,"_119":128},"fontSize","40px","28px","color","rgba(114, 114, 114, 1)","letterSpacing","0.18em","fontFamily","\"basic-sans\", sans-serif","fontWeight","600","textTransform","uppercase",{"_215":1999},"

Do more with your designs

","builder-90bc519e29b84a08b468e141eef69fdd","builder-d25b863f48914c2f99562b84be179249",{"_1739":1977},{"_39":456,"_132":2006,"_248":-5},{"_71":2005},{"_123":124,"_125":92,"_126":127,"_117":1639,"_245":1639,"_93":1638,"_119":1819,"_94":120,"_121":122,"_1642":1643,"_1753":118},{"_1799":2007,"_1801":1802,"_1803":1804},[2008,2009],{"_66":2038},{"_66":2010},[2011],{"_82":83,"_109":110,"_84":1809,"_41":2012,"_86":2013,"_1812":2014,"_35":2015,"_227":2016,"_88":2017},"builder-49b3dbe659194017a51367b0e6f55aa3",{"_1869":2014},"https://www.builder.io/c/docs/mcp-servers",{"_1739":1868},[2020,2021],{"_71":2018,"_184":2019},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127,"_129":1820,"_1625":210,"_1650":1645,"_97":98,"_1821":1822,"_1653":1654,"_1655":1823,"_1657":244,"_1824":1825,"_99":1639,"_1826":1827,"_93":1639},{"_119":1819,"_117":1639,"_245":1639,"_93":1638},{"_82":83,"_109":110,"_41":2030,"_35":2031,"_51":2032,"_88":2033},{"_82":83,"_109":110,"_41":2022,"_35":2023,"_51":2024,"_88":2025},"builder-fbb44ecf99144a6b93e683940b464760",{"_1739":1844},{"_39":1841,"_132":2028,"_248":-5},{"_71":2026,"_115":2027},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":1836,"_1837":1838,"_1839":1840,"_91":1639},{"_117":1640,"_245":1640},{"_215":2029},"

Integrations

","builder-78dcc0fd3c654bbd8dbe5f790e9d4191",{"_1739":1867},{"_39":1851,"_132":2035,"_248":-5},{"_71":2034},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":118,"_1837":1838,"_1839":1840,"_91":1639,"_1850":1750,"_1748":1750,"_97":98,"_1625":208},{"_1853":2036,"_1855":1626,"_1856":1857,"_1858":1859,"_1860":47,"_1861":1862,"_91":1897,"_93":1898,"_1865":47,"_1866":2037},"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F6c0f95259dc24e0485153b53986cba3a?width=508","Image of multiple logos with arrows pointing towards the MCP Servers option in Builder's Fusion application.",[2039],{"_82":83,"_109":110,"_84":1809,"_41":2040,"_86":2041,"_1812":1031,"_35":2042,"_227":2043,"_88":2044},"builder-9bceb2bc91c64e6888b05ad49c84d613",{"_1869":1031},{"_1739":1976},[2046,2047],{"_71":2045},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127,"_129":1820,"_1625":210,"_1650":1645,"_97":98,"_1821":1822,"_1653":1654,"_1655":1823,"_1657":244,"_1824":1825,"_99":1639},{"_82":83,"_109":110,"_41":2056,"_35":2057,"_51":2058,"_88":2059},{"_82":83,"_109":110,"_41":2048,"_35":2049,"_51":2050,"_88":2051},"builder-6c7462fbba61408ea643c45590d5f555",{"_1739":1958},{"_39":1841,"_132":2054,"_248":-5},{"_71":2052,"_115":2053},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":1836,"_1837":1838,"_1839":1840,"_91":1639},{"_117":1651,"_245":1651},{"_215":2055},"

Connect a Local Repo

","builder-dc07c96ed054481594c8806cb91063c0",{"_1739":1975},{"_39":1851,"_132":2061,"_248":-5},{"_71":2060},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":118,"_1837":1838,"_1839":1840,"_91":1639,"_1850":1750,"_1748":1750,"_97":98},{"_1853":2062,"_1855":1626,"_1856":1857,"_1858":1859,"_1860":47,"_1861":1972,"_91":1897,"_93":1898,"_1866":2063,"_1865":47},"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F6e354622da51489faeda977aaa79b012?width=596","Command-line interface running the Builder launch command with the text \"Your local repository\" above it with an arrow pointing towards the interface.",{"_1739":2126},{"_39":456,"_132":2068,"_248":-5},{"_71":2067},{"_123":124,"_125":92,"_126":127,"_117":1639,"_245":1639,"_93":1638,"_119":1819,"_94":120,"_121":122,"_1642":1643,"_1753":118},{"_1799":2069,"_1801":1802,"_1803":1804},[2070,2071],{"_66":2099},{"_66":2072},[2073],{"_82":83,"_109":110,"_84":1809,"_41":2074,"_86":2075,"_1812":1028,"_35":2076,"_227":2077,"_88":2078},"builder-3456aa921dbd4f5a85f9b72253710937",{"_1869":1028},{"_1739":1868},[2081,2082],{"_71":2079,"_184":2080},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127,"_129":1820,"_1625":210,"_1650":1645,"_97":98,"_1821":1822,"_1653":1654,"_1655":1823,"_1657":244,"_1824":1825,"_99":1639,"_1826":1827,"_93":1639},{"_119":1819,"_117":1639,"_245":1639,"_93":1638},{"_82":83,"_109":110,"_41":2091,"_35":2092,"_51":2093,"_88":2094},{"_82":83,"_109":110,"_41":2083,"_35":2084,"_51":2085,"_88":2086},"builder-e735fc78e2d44abe9c75f4f889806b28",{"_1739":1844},{"_39":1841,"_132":2089,"_248":-5},{"_71":2087,"_115":2088},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":1836,"_1837":1838,"_1839":1840,"_91":1639},{"_117":1640,"_245":1640},{"_215":2090},"

Visual Studio Code Extension

","builder-c8b3f706d3454976b66931116c149f3e",{"_1739":1867},{"_39":1851,"_132":2096,"_248":-5},{"_71":2095},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":118,"_1837":1838,"_1839":1840,"_91":1639,"_1850":1750,"_1748":1750,"_97":98},{"_1855":1626,"_1856":1857,"_1858":1859,"_1860":47,"_1861":1862,"_91":1897,"_93":1898,"_1865":47,"_1866":2097,"_1853":2098},"Screenshot of Builder's Visual Studio Code Extension, with text saying \"Launch Builder's Visual Editor from VS Code\".","https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd5b1078f4c994866951f65da877f0eda?width=508",[2100],{"_82":83,"_109":110,"_84":1809,"_41":2101,"_86":2102,"_1812":2103,"_35":2104,"_227":2105,"_88":2106},"builder-2f840c202961472b9d64c785f7ef7750",{"_1869":2103},"https://www.builder.io/c/docs/projects-github",{"_1739":1976},[2108,2109],{"_71":2107},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127,"_129":1820,"_1625":210,"_1650":1645,"_97":98,"_1821":1822,"_1653":1654,"_1655":1823,"_1657":244,"_1824":1825,"_99":1639},{"_82":83,"_109":110,"_41":2118,"_35":2119,"_51":2120,"_88":2121},{"_82":83,"_109":110,"_41":2110,"_35":2111,"_51":2112,"_88":2113},"builder-f8732534329b43e5a0dd5fc9460cf095",{"_1739":1958},{"_39":1841,"_132":2116,"_248":-5},{"_71":2114,"_115":2115},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":1836,"_1837":1838,"_1839":1840,"_91":1639},{"_117":1651,"_245":1651},{"_215":2117},"

Connect your Repo

","builder-de974714ee1b4e948330ad857506c705",{"_1739":1975},{"_39":1851,"_132":2123,"_248":-5},{"_71":2122},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_119":118,"_1837":1838,"_1839":1840,"_91":1639,"_1850":1750,"_1748":1750,"_97":98},{"_1853":2124,"_1855":1626,"_1856":1857,"_1858":1859,"_1860":47,"_1861":1972,"_91":1897,"_93":1898,"_1865":47,"_1866":2125},"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd912743156ef4be1966d85f88231c500?width=596","GitHub logo above a Builder Project Settings page.","builder-12cbb7b42ed842c4bf6c1551e4055539","builder-c310dd481525435a87b89541537bfd5d",{"_1739":2173},[2133,2134,2135],{"_71":2131},{"_119":2132,"_1642":1838,"_94":120,"_121":122},"11px",{"_82":83,"_109":110,"_84":2157,"_41":2158,"_1631":215,"_35":2159,"_51":2160,"_88":2161},{"_82":83,"_109":110,"_41":2145,"_35":2146,"_51":2147,"_88":2148},{"_82":83,"_109":110,"_41":2000,"_35":2136,"_51":2137,"_88":2138},{"_1739":2144},{"_39":1841,"_132":2142,"_248":-5},{"_71":2139,"_184":2140,"_115":2141},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127,"_119":1986,"_1839":1987,"_91":1639,"_1837":1838,"_1988":1989,"_1990":1991,"_1985":1647,"_1992":1993,"_1994":1995,"_117":118,"_1996":1997,"_1649":118,"_1753":1648},{"_1753":118},{"_1985":1647,"_119":128},{"_215":2143},"

Create with Projects

","builder-74c1bae71499432da3bd3a088d0825a3","builder-72b64cb92ff94ad69ae7bb357aedd3af",{"_1739":2156},{"_39":1841,"_132":2154,"_248":-5},{"_71":2149,"_184":2150,"_115":2151},{"_94":120,"_121":122,"_1642":1643,"_123":124,"_125":92,"_126":127,"_119":1640,"_1839":1840,"_91":1639,"_1837":1838,"_96":2152,"_1988":2153},{"_245":118},{"_1649":118},"1","rgba(0, 0, 0, 0.72)",{"_215":2155},"

Generate code and map your components

","builder-f4e3e60b9b5741539a28e6e0ddda9670","h1","builder-6287ecf2fd0b4fc8a16321af02f18e81",{"_1739":2172},{"_39":1841,"_132":2170,"_248":-5},{"_71":2162,"_184":2163,"_115":2164},{"_94":120,"_121":122,"_1642":1643,"_125":92,"_123":124,"_1837":1838,"_1839":1638,"_91":1639,"_1988":2166,"_1985":2167,"_1992":1993,"_119":2168,"_1994":2169,"_117":1639,"_245":1639},{"_119":1819,"_1837":1838,"_94":120},{"_1985":2165,"_94":120},"36px","rgba(14, 32, 26, 1)","54px","-5px","800",{"_215":2171},"

Builder Projects

","builder-bfa8bf1cbd5d46088240ba1db0fb593d","builder-afb407a3826b4122b40914dce691beb6","Video","builder-d610a3269f9a4f239f16bd43e2733e97","dark-mode-invert",{"_1739":2195},{"_39":2174,"_132":2183,"_248":-5},{"_71":2180},{"_94":120,"_121":122,"_123":124,"_125":92,"_126":127,"_119":2181,"_1850":1750,"_1748":1750,"_1826":2182,"_117":1639,"_245":1639,"_93":1638},"100px","81px",{"_2184":2185,"_2186":47,"_2187":12,"_2188":47,"_2189":47,"_2190":47,"_2191":1857,"_2192":47,"_123":1838,"_1858":2193,"_2194":47},"video","https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F4d042732ee134e7d90a1d51b7c593859%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=4d042732ee134e7d90a1d51b7c593859&alt=media&optimized=true","autoPlay","controls","muted","loop","playsInline","fit","fitContent",0.7004048582995948,"lazyLoad","builder-f7ac6c43d8814e1da9c8711f430530ea","builder-a94181e30a544cacb538ca8c449b24cb",{"_74":1724,"_76":2204,"_22":2205},{"_17":2199},{"_197":2200},{"_201":202,"_2201":200,"_207":208,"_215":2202,"_2203":218},"primaryLight","rgba(0, 0, 0, 0.75)","primary",[2206,2207,2208],{},"c","docs","fusion",{"_2210":2211,"_2212":47},"family","basic-sans","isUserFont",{"_82":2214,"_2215":2216,"_2217":2218,"_2219":1724},"@builder.io/core:Query","operator","is","property","urlPath","value",{"_184":185,"_115":183},[2226],"page","https://www.builder.io/c/docs/fusion?builder.space=YJIGb4i01jvw0SRdL5Bt&builder.user.permissions=read%2Ccreate%2Cpublish%2CeditCode%2CeditDesigns%2CeditLayouts%2CeditLayers%2CeditContentPriority%2CeditFolders%2CmodifyMcpServers%2CmodifyProjectSettings%2CconnectCodeRepository%2CcreateProjects&builder.user.role.name=Developer&builder.user.role.id=developer&builder.cachebust=true&builder.preview=docs-content&builder.noCache=true&__builder_editing__=true&builder.overrides.docs-content=2e81d19306604d918b7d55d8db63f9ea&builder.overrides.2e81d19306604d918b7d55d8db63f9ea=2e81d19306604d918b7d55d8db63f9ea&builder.options.locale=Default","needsHydration","01251e47b5164e51b4cfbacf5494652a",{"_169":170,"_132":2227,"_165":166,"_162":163,"_167":168},{"_138":2228,"_176":177,"_172":173,"_174":175,"_22":2229,"_178":12},"6c2dbc91e3e643118d58ddb1287da084",[]]