CINXE.COM

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="preload" href="/assets/fonts/inter-latin.var.woff2" as="font" crossorigin><link rel="preload" href="/assets/fonts/roboto-mono-latin.var.woff2" as="font" crossorigin><link rel="canonical" href="/get-started/"><script type="module" src="https://cdn.ampproject.org/bento.mjs"></script><script nomodule src="https://cdn.ampproject.org/bento.js"></script><link rel="preconnect" href="https://www.google-analytics.com/"><style>@charset "UTF-8";:root{--white:#ffffff;--black:#000000;--burnt-sienna:#bc5845;--elephant-green:#13444b;--light-sea-green:#1b8186;--naples-yellow:#f6d055;--pale-violet:#c895ff;--pearl-aqua:#71cdbd;--middle-purple:#e486be;--crayola:#72d7ff;--maastricht-blue:#002b39;--independence:#4c5a63;--pewter-blue:#8fa8b8;--bright-gray:#ecf1f3;--thin:150;--extra-light:200;--light:380;--normal:400;--medium:500;--semi-bold:650;--bold:700;--font-sans:"Inter", sans-serif;--font-mono:"Roboto Mono", sans-serif;--font-size-16:1rem;--font-size-18:1.125rem;--font-size-21:1.3125rem;--font-size-26:1.625rem;--font-size-28:1.75rem;--font-size-34:2.125rem;--font-size-48:3rem;--font-size-56:3.5rem;--font-size-72:4.5rem;--line-height-8:8px;--line-height-22:22px;--line-height-24:24px;--line-height-32:32px;--line-height-40:40px;--line-height-56:56px;--line-height-64:64px;--line-height-88:88px;--spacing-xxs:8px;--spacing-xs:16px;--spacing-s:24px;--spacing-m:32px;--spacing-l:40px;--spacing-xl:48px;--spacing-xxl:64px;--max-content-width:1290px}@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:optional;font-named-instance:"Regular";src:url(/assets/fonts/inter-latin.var.woff2) format("woff2-variations")}@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 900;font-display:optional;font-named-instance:"Regular";src:url(/assets/fonts/roboto-mono-latin.var.woff2) format("woff2-variations")}.banner--hide announcement-banner,announcement-banner.--hidden{display:none}[data-banner-close]{opacity:0;pointer-events:none}.banner--show-close [data-banner-close]{opacity:1;pointer-events:auto}.bd-cookie-banner{z-index:10000;bottom:0;display:flex;align-items:center;justify-content:space-between;left:0;margin:0;position:fixed;right:0;background-color:#fff;width:100vw;padding:1rem;color:var(--independence);border-top:1px solid var(--independence)}.bd-cookie-banner .bd-cookie-banner-label{margin-right:1rem}.bd-cookie-banner .bd-cookie-banner-more{margin-right:auto}.bd-cookie-banner .bd-cookie-banner-close{align-self:end}.bd-cookie-banner a{width:200px}.bd-page,.bd-page__container{display:flex;flex-direction:column}.bd-page{width:100vw}.bd-page__container{margin-inline:auto;width:90%}@media (min-width:1440px){.bd-page__container{max-width:var(--max-content-width)}}.bd-header{background:#fff;position:sticky;top:0;z-index:1001;box-shadow:0 3px 15px 0 rgba(0,0,0,.1);color:var(--independence)}.bd-header-main{display:flex;align-items:center;flex-wrap:nowrap;height:56px;margin:0 auto;width:90%}@media (min-width:1024px){.bd-header-main{height:64px}}@media (min-width:1440px){.bd-header-main{max-width:var(--max-content-width)}}.bd-header-home{display:flex;align-items:center;margin-right:auto}.bd-header-home-logo{height:32px;max-width:32px;max-height:32px;margin-right:16px}.bd-header-home-title{font-weight:var(--bold);font-size:var(--font-size-26);line-height:var(--line-height-64);letter-spacing:-1px;color:var(--maastricht-blue)}.bd-header-navigation{position:absolute;top:100%;left:0;width:100%;height:calc(100vh - 100%);padding:30px;background:var(--white);opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}@media (min-width:1024px){.bd-header-navigation{position:relative;top:0;display:flex;align-items:center;flex:1 1 auto;height:100%;padding:0 30px;opacity:1;pointer-events:auto}}.--mainmenuopen .bd-header-navigation{opacity:1;pointer-events:auto}.bd-header-navigation-item{position:relative;display:flex;flex-direction:column;margin-bottom:16px}@media (min-width:1024px){.bd-header-navigation-item{flex-direction:row;align-items:center;height:100%;margin-bottom:0;padding:0 20px}}.bd-header-navigation .bd-link,.bd-header-navigation-link{font-size:var(--font-size-21);font-weight:var(--bold);line-height:1.14;width:fit-content}@media (min-width:1024px){.bd-header-navigation .bd-link,.bd-header-navigation-link{font-size:var(--font-size-16)}}.bd-header-navigation a:after{bottom:0}.bd-header-burger,.bd-stage h1{color:inherit}@media (min-width:1024px){.bd-header-burger{display:none}}.bd-header-burger-icon{height:19px;width:26px;fill:currentColor;transform:scale(1.6)}.bd-footer{grid-column:1/-1;display:grid;padding:16px;grid-template-columns:repeat(24,1fr);color:#fff;background-color:#002b39}.bd-footer-content{display:grid;grid-column:3/23;grid-gap:var(--spacing-xs);width:100%}@media (min-width:320px){.bd-footer-content{grid-template-columns:repeat(8,1fr)}}@media (min-width:1920px){.bd-footer-content{grid-column:7/19}}.bd-footer-content-column{padding-bottom:var(--spacing-m);grid-column:1/-1}@media (min-width:768px){.bd-footer-content-column{grid-column:span 2}}.bd-footer-content-column .bd-link-wrapper{display:flex}.bd-footer-copyright{grid-column:1/-1}@media (min-width:768px){.bd-footer-copyright{grid-column:span 4}}.bd-footer-legal{display:flex;grid-gap:var(--spacing-xs);grid-column:1/-1;opacity:.8}@media (max-width:767px){.bd-footer-legal{flex-direction:column}}@media (min-width:1024px){.bd-footer-legal{grid-column:span 4;justify-content:flex-end}}.bd-footer-legal a{height:fit-content}.bd-footer h3{font-size:var(--font-size-18)}.bd-footer ul,.bd-sidebar__contents--components ul{padding:0;margin:0}.bd-footer .bd-link{font-weight:400}.bd-stage{z-index:50;position:relative}.bd-stage__bg-image{position:absolute;object-fit:contain;z-index:-1;right:-25%;top:10%;transform:rotateY(180deg) rotate(120deg) scale(2)}@media (min-width:768px){.bd-stage__bg-image{right:-15%;top:35%;transform:rotateY(180deg) rotate(30deg) scale(3.2)}}@media (min-width:1024px){.bd-stage__bg-image{right:-5%;top:30%;transform:rotateY(180deg) rotate(30deg) scale(3)}}@media (min-width:1440px){.bd-stage__bg-image{right:3%;top:45%;transform:rotateY(180deg) rotate(30deg) scale(4.5)}}.bd-stage h1{font-family:var(--font-sans);font-size:var(--font-size-34);font-weight:250;letter-spacing:-.5px;line-height:1.18;margin:calc(var(--spacing-l)*7.25) 0 var(--spacing-s)}@media (min-width:768px){.bd-stage h1{font-size:var(--font-size-56);font-weight:var(--thin);letter-spacing:-1px;line-height:1.14;margin:calc(var(--spacing-l)*4.25) 0 var(--spacing-xxl)}}@media (min-width:1024px){.bd-stage h1{margin-block-start:calc(var(--spacing-l)*4.05);width:75%}}@media (min-width:1440px){.bd-stage h1{font-size:var(--font-size-72);letter-spacing:-1.5px;line-height:1.11}}.bd-button,.bd-button--burnt-sienna,.bd-button--light{display:inline-block;font-family:var(--font-sans);font-size:var(--font-size-16);font-weight:var(--bold);font-stretch:normal;font-style:normal;line-height:var(--line-height-32);letter-spacing:normal;border:0;text-decoration:none;text-align:center;-webkit-appearance:none;cursor:pointer;padding:var(--spacing-xxs) var(--spacing-s);border-radius:8px;box-shadow:0 8px 16px 0 rgba(0,43,57,.15);transition:transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);color:var(--light-sea-green);background-color:var(--white)}.bd-button:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,43,57,.15)}.bd-button:visited{color:var(--light-sea-green)}.bd-button.--inverted{color:var(--white);border:solid 1px var(--white);background-color:transparent}.bd-button--burnt-sienna,.bd-button--light{background-color:var(--light-sea-green);color:var(--white)}.bd-button--light:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,43,57,.15)}.bd-button--light.--inverted{background-color:transparent;color:var(--light-sea-green);border:solid 2px var(--light-sea-green)}.bd-button--burnt-sienna{background-color:var(--burnt-sienna)}.bd-button--burnt-sienna:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,43,57,.15)}.bd-button--burnt-sienna:visited{color:var(--white)}.bd-copy{opacity:0;height:32px;width:32px;position:absolute;top:0;right:0;margin:8px 4px;padding:0;display:flex;justify-content:center;background:var(--maastricht-blue)}.bd-copy svg{height:24px;width:24px;max-height:24px;max-width:24px;color:#fff}.bd-copy-pasteable>pre,.bd-link{position:relative}.bd-copy-pasteable>pre:hover .bd-copy{opacity:1}.bd-copy-pasteable>pre .bd-copy-icon-success,.bd-copy-pasteable>pre.--success .bd-copy-icon-default{display:none}.bd-copy-pasteable>pre.--success .bd-copy-icon-success{display:block}.bd-link{background-image:linear-gradient(var(--burnt-sienna),var(--burnt-sienna));background-position:0 100%;background-repeat:no-repeat;background-size:0 2px;color:inherit;font-size:var(--font-size-16);font-stretch:normal;font-style:normal;font-weight:var(--semi-bold);letter-spacing:normal;line-height:var(--line-height-32);padding-block-end:3px;transition:background-size .25s}.bd-link:focus,.bd-link:hover{background-size:100% 2px}.bd-link-wrapper{display:inline-flex}.bd-row{display:flex;flex-direction:column}.bd-row__col-1-2>.bd-row__column,.bd-row__col-2>.bd-row__column{flex:1 1 100%}@media (min-width:1024px){.bd-row{flex-direction:row}.bd-row__col-2>.bd-row__column{flex:0 1 50%;max-width:50%}.bd-row__col-1-2 .bd-row__column:nth-of-type(1){flex:1 0 33%}.bd-row__col-1-2 .bd-row__column:nth-of-type(2){flex:1 1 66%;width:60%}}.bd-section__title{font-family:var(--font-sans);font-size:var(--font-size-34);font-weight:var(--bold);font-stretch:normal;font-style:normal;line-height:var(--line-height-40);letter-spacing:-.5px;color:inherit;margin-block-end:var(--spacing-s)}@media (min-width:768px){.bd-section__title{font-size:var(--font-size-34);line-height:var(--line-height-40)}}@media (min-width:1024px){.bd-section__title{font-size:var(--font-size-48);line-height:var(--line-height-56)}}.bd-section__body{font-family:var(--font-sans);font-size:var(--font-size-16);font-weight:350;color:inherit;line-height:var(--line-height-32);margin-block-end:var(--spacing-s)}@media (min-width:768px){.bd-section__body{font-size:var(--font-size-18);line-height:var(--line-height-32);margin-block-end:var(--spacing-xl)}}.bd-theme--dark{background-color:var(--maastricht-blue);color:var(--white)}.bd-theme--light{background-color:var(--white)}.bd-theme--light h1,.bd-theme--light h2,.bd-theme--light h3{color:var(--maastricht-blue)}.bd-theme--light .bd-section__body{font-weight:var(--light);color:var(--independence)}.bd-theme--light .bd-link{color:var(--independence)}code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:"Roboto Mono",monospace;font-size:12px;font-weight:500;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}@media (min-width:768px){code[class*=language-],pre[class*=language-]{font-size:14px}}pre[class*=language-]{padding:1em;margin:0;overflow:auto}pre[class*=language-]::-webkit-scrollbar{display:none}:not(pre)>code[class*=language-]{background:#002b39;padding:.1em;border-radius:.3em;white-space:normal}pre[class*=language-]{background:#002b39;border-radius:8px}.token.doctype{color:#8fa8b8}.token.attr-name{color:#eb6f57}.token.punctuation,.token.tag{color:#72d7ff}.token.function{color:#f28779}.token.property{color:#71cdbd}.token.class-name{color:#f8c555}.token.keyword{color:#fff}.token.attr-value,.token.string{color:#71cdbd}.language-css{color:#e486be}.bd-card--white{background-color:var(--white);color:var(--independence)}.bd-card--elephant-green{background-color:var(--elephant-green);color:var(--white)}.bd-card--burnt-sienna{background-color:var(--burnt-sienna);color:var(--white)}.bd-card--naples-yellow{background-color:var(--naples-yellow);color:var(--maastricht-blue)}.bd-card--light-sea-green{background-color:var(--light-sea-green);color:var(--white)}@media (min-width:1024px){.bd-card-image--one{grid-column:1/span 4;grid-row:3/span 3;justify-self:end}.bd-card-image--two{grid-column:5/span 2;grid-row:2/span 3}.bd-card-image--three{grid-column:7/span 2;grid-row:1/span 3}.bd-card-image--four{grid-column:7/span 4;grid-row:4/span 3}.bd-card-image--three picture,.bd-card-image--two picture{display:none}}.bd-sidebar__contents--components h2{font-weight:var(--bold);font-size:var(--font-size-34);line-height:1.18;letter-spacing:-.5px;margin-block-end:var(--spacing-xs)}.bd-sidebar__contents--components h2:not(:first-child){margin-block-start:var(--spacing-m)}.bd-sidebar__contents--components a{font-size:14px}.bd-sidebar__contents--toc h3{color:var(--maastricht-blue);font-weight:700;margin-bottom:var(--spacing-s)}.bd-theme--light{z-index:10}.bd-page-get-started{position:relative;row-gap:calc(var(--spacing-xxl)*1.5)}@media (min-width:768px){.bd-page-get-started{row-gap:calc(var(--spacing-xxl)*3.125)}}.bd-page-get-started__background{position:absolute;z-index:-1;opacity:.1;left:-8%;top:56%;transform:rotate(215deg) scale(2.5)}@media (min-width:768px){.bd-page-get-started__background{left:0;top:45%;transform:rotate(215deg) scale(5)}}.bd-page-get-started p{font-size:var(--font-size-16);line-height:2;color:var(--independence);font-weight:var(--light)}@media (min-width:768px){.bd-page-get-started p{font-size:var(--font-size-18);line-height:1.78}}.bd-page-get-started .bd-stage__bg-image{transform:rotate(30deg) scale(2.2)}@media (min-width:768px){.bd-page-get-started .bd-stage__bg-image{right:-25%;transform:rotate(30deg) scale(3)}}@media (min-width:1024px){.bd-page-get-started .bd-stage__bg-image{right:-20%;transform:rotate(30deg) scale(4.5)}}@media (min-width:1440px){.bd-page-get-started .bd-stage__bg-image{right:-5%}}.bd-page-get-started .bd-stage h1{font-weight:280;width:auto;line-height:1.14;letter-spacing:normal}@media (min-width:768px){.bd-page-get-started .bd-stage h1{font-weight:var(--extra-light);line-height:1.1;letter-spacing:-1.5px;width:75%}}@media (min-width:1024px){.bd-page-get-started .bd-stage h1{width:55%}}.bd-page-get-started .bd-stage p{width:auto}@media (min-width:768px){.bd-page-get-started .bd-stage p{width:60%}}@media (min-width:1024px){.bd-page-get-started .bd-stage p{width:55%}}.bd-page-get-started .bd-steps h2{width:auto;font-size:var(--font-size-21);line-height:1.14;letter-spacing:normal}@media (min-width:768px){.bd-page-get-started .bd-steps h2{width:50%;font-size:var(--font-size-26);line-height:1.23;letter-spacing:-.2px}}.bd-page-get-started .bd-steps__grid{display:grid;gap:var(--spacing-xl);grid-template-rows:repeat(4,auto);margin-block-start:var(--spacing-xl);width:auto}@media (min-width:768px){.bd-page-get-started .bd-steps__grid{grid-template-columns:repeat(4,1fr)}.bd-page-get-started .bd-steps__grid .bd-step-1{grid-column:1/span 3;grid-row:1}.bd-page-get-started .bd-steps__grid .bd-step-2{grid-column:2/span 3;grid-row:2}.bd-page-get-started .bd-steps__grid .bd-step-3{grid-column:1/span 3;grid-row:3}.bd-page-get-started .bd-steps__grid .bd-step-4{grid-column:2/span 3;grid-row:4}}@media (min-width:1024px){.bd-page-get-started .bd-steps__grid{grid-template-columns:auto auto;grid-template-rows:auto auto;margin-block-start:var(--spacing-xxl)}.bd-page-get-started .bd-steps__grid .bd-step-1,.bd-page-get-started .bd-steps__grid .bd-step-2,.bd-page-get-started .bd-steps__grid .bd-step-3,.bd-page-get-started .bd-steps__grid .bd-step-4{grid-column:auto;grid-row:auto}}@media (min-width:1440px){.bd-page-get-started .bd-steps__grid{gap:calc(var(--spacing-xxl)*2)}}.bd-page-get-started .bd-steps__grid .bd-step{display:grid;column-gap:var(--spacing-xs);grid-template-areas:"image number" "image description";grid-template-rows:7ch auto}@media (min-width:768px){.bd-page-get-started .bd-steps__grid .bd-step{column-gap:var(--spacing-m)}}@media (min-width:1024px){.bd-page-get-started .bd-steps__grid .bd-step{column-gap:var(--spacing-s)}}@media (min-width:1440px){.bd-page-get-started .bd-steps__grid .bd-step{column-gap:var(--spacing-m);grid-template-columns:1fr 3fr}}.bd-page-get-started .bd-steps__grid .bd-step picture{grid-area:image;margin-block-start:0}.bd-page-get-started .bd-steps__grid .bd-step__number{color:var(--maastricht-blue);font-size:var(--font-size-48);font-weight:var(--bold);grid-area:number;letter-spacing:-1px;line-height:1.17;margin-block:auto 0}@media (min-width:768px){.bd-page-get-started .bd-steps__grid .bd-step__number{font-size:var(--font-size-56);line-height:1.14}}.bd-page-get-started .bd-steps__grid .bd-step__description{grid-area:description;font-weight:var(--bold);line-height:1.33;color:var(--maastricht-blue)}.bd-page-get-started .bd-section p~p{margin-block-start:var(--spacing-xs)}.bd-page-get-started .bd-section strong{display:block;margin-block-start:var(--spacing-xs);font-weight:var(--semi-bold)}.bd-page-get-started .bd-section p>code,.bd-page-get-started .bd-section strong>code{background-color:var(--bright-gray);border-radius:2px;color:var(--independence);font-family:var(--font-mono);font-size:inherit;font-weight:var(--medium);letter-spacing:.2px;line-height:2;padding:0 2px}@media (min-width:768px){.bd-page-get-started .bd-section p>code,.bd-page-get-started .bd-section strong>code{padding:2px 8px}}.bd-page-get-started .bd-section .bd-react-sample,.bd-page-get-started .bd-section .bd-web-component-sample{margin-block-start:var(--spacing-xl)}@media (min-width:768px){.bd-page-get-started .bd-section .bd-react-sample,.bd-page-get-started .bd-section .bd-web-component-sample{margin-block-start:var(--spacing-xxl);margin-inline-start:calc(var(--spacing-xxl)*2.125)}}.bd-page-get-started .bd-section .bd-react-sample h3,.bd-page-get-started .bd-section .bd-web-component-sample h3,.bd-sidebar__contents--toc h3{font-size:var(--font-size-18);line-height:1.33}@media (min-width:768px){.bd-page-get-started .bd-section .bd-react-sample h3,.bd-page-get-started .bd-section .bd-web-component-sample h3{font-size:var(--font-size-21);line-height:1.14}}.bd-page-get-started .bd-section .bd-react-sample__code,.bd-page-get-started .bd-section .bd-web-component-sample__code{margin-block-start:var(--spacing-s)}.bd-page-get-started .bd-section .bd-react-sample .spacer-xxl,.bd-page-get-started .bd-section .bd-web-component-sample .spacer-xxl{margin-block-start:var(--spacing-xxl)}@media (min-width:1024px){.bd-page-get-started .bd-section .bd-react-sample{margin-block-start:calc(var(--spacing-xxl)*1.3);margin-inline-start:var(--spacing-xxl)}.bd-page-get-started .bd-section .bd-web-component-sample{margin-block-start:calc(var(--spacing-xxl)*2);margin-inline-start:var(--spacing-xxl)}}.bd-page-get-started .bd-browser-support{gap:var(--spacing-xxl);flex-direction:column-reverse}@media (min-width:1024px){.bd-page-get-started .bd-browser-support{flex-direction:row}}.bd-page-get-started .bd-browser-support strong{display:initial}.bd-page-get-started .bd-contribute{gap:var(--spacing-xxl);margin-block-end:calc(var(--spacing-xxl)*3.125)}.bd-discover-more{display:flex;padding-block:11ch;background:#08777c}.bd-discover-more__container{margin:auto;width:65%}.bd-discover-more__container h2{color:var(--white);font-weight:var(--semi-bold);font-size:var(--font-size-34);line-height:1.18;letter-spacing:-.5px;text-align:center}@media (min-width:768px){.bd-discover-more__container h2{font-size:var(--font-size-56);line-height:1.14;letter-spacing:-1px}}@media (min-width:1920px){.bd-discover-more__container h2{margin:auto;width:60%}}.bd-discover-more__container a{display:table;margin:var(--spacing-xl) auto 0}body,html{padding:0;margin:0;min-width:240px;background-color:var(--maastricht-blue);font-size:var(--font-size-16);font-family:var(--font-sans);font-weight:var(--normal);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;scroll-behavior:smooth}body{display:grid}a{text-decoration:none;font-weight:var(--bold);color:var(--independence)}a:visited{color:inherit}*{box-sizing:border-box}img{content-visibility:auto;max-width:100%;height:auto}button{-webkit-appearance:none;background:0 0;border:0;box-shadow:none;cursor:pointer;padding:0}h1,h2,p{margin:0;padding:0}ul{list-style:none}.--uppercase{text-transform:uppercase}.--main-overflow{overflow:hidden}@media (min-width:1024px){.--main-overflow{overflow:scroll}}</style><title>Get started | bentojs.dev</title><script src="/assets/js/all.js?a4e96ca62f66e" async></script><link rel="shortcut icon" href="/assets/img/favicon.png"><link rel="alternate" type="application/atom+xml" title="RSS Feed for bentojs.dev" href="/feed.xml"><meta property="og:title" content="Get started | bentojs.dev"><meta property="og:url" content="/get-started/"><meta property="og:image" content="/assets/img/twitter-image-bento-default@2x.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="description" content="A get started guide for using Bento components."></head><body><header class="bd-header"><div class="bd-header-main"><a class="bd-header-home" href="/"><svg class="bd-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/assets.svg#icon-logo-bento"></use></svg> <span class="bd-header-home-title">Bento</span></a><nav class="bd-header-navigation" role="navigation" aria-label="Main navigation"><div class="bd-header-navigation-item"><a class="bd-header-navigation-link bd-link" href="/">Welcome</a></div><div class="bd-header-navigation-item"><a class="bd-header-navigation-link bd-link" href="/get-started">Get Started</a></div><div class="bd-header-navigation-item"><a class="bd-header-navigation-link bd-link" href="/documentation">Documentation</a></div><div class="bd-header-navigation-item"><a class="bd-header-navigation-link bd-link" href="/blog">Blog</a></div></nav><button class="bd-header-burger" tabindex="0" aria-label="Open menu"><svg class="bd-header-burger-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/assets.svg#icon-burger"></use></svg></button></div></header><main class="bd-page --home"><div class="bd-theme--light"><div class="bd-page-get-started bd-page__container"><section class="bd-stage"><svg class="bd-stage__bg-image"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/assets.svg#icon-logo-bento"></use></svg><h1>Getting started with Bento</h1><p>Bento is a set of mix and matchable highly performant web components that are easily customizable to meet your site functionality needs. Bento components are well-tested, compatible across modern browsers, and work in many development environments. You can use one, some or all Bento components on your site! And, since Bento components are self-maintaining, they work with any other framework or components library.</p></section><section class="bd-steps"><h2>Start using Bento Components in your site by following these easy steps:</h2><div class="bd-steps__grid"><div class="bd-step bd-step-1"><picture><source type="image/png" srcset="/assets/img/Hah1jYAacX-100.png 100w, /assets/img/Hah1jYAacX-300.png 300w, /assets/img/Hah1jYAacX-450.png 450w" sizes="100vw"><source type="image/avif" srcset="/assets/img/Hah1jYAacX-100.avif 100w, /assets/img/Hah1jYAacX-300.avif 300w, /assets/img/Hah1jYAacX-450.avif 450w" sizes="100vw"><img alt="" loading="lazy" decoding="async" src="/assets/img/Hah1jYAacX-100.png" width="450" height="438"></picture><h3 class="bd-step__number">1.</h3><p class="bd-step__description">Identify which path fits your site’s environment. If you’re using React or Preact to render your pages, go with the React version, in all other cases, try the Web Components version.</p></div><div class="bd-step bd-step-2"><picture><source type="image/png" srcset="/assets/img/YZwMu_UXtL-100.png 100w, /assets/img/YZwMu_UXtL-300.png 300w, /assets/img/YZwMu_UXtL-450.png 450w" sizes="100vw"><source type="image/avif" srcset="/assets/img/YZwMu_UXtL-100.avif 100w, /assets/img/YZwMu_UXtL-300.avif 300w, /assets/img/YZwMu_UXtL-450.avif 450w" sizes="100vw"><img alt="" loading="lazy" decoding="async" src="/assets/img/YZwMu_UXtL-100.png" width="450" height="438"></picture><h3 class="bd-step__number">2.</h3><p class="bd-step__description">Choose a component that fits your needs and install or import it.</p></div><div class="bd-step bd-step-3"><picture><source type="image/png" srcset="/assets/img/BOZIB6F76a-100.png 100w, /assets/img/BOZIB6F76a-300.png 300w, /assets/img/BOZIB6F76a-450.png 450w" sizes="100vw"><source type="image/avif" srcset="/assets/img/BOZIB6F76a-100.avif 100w, /assets/img/BOZIB6F76a-300.avif 300w, /assets/img/BOZIB6F76a-450.avif 450w" sizes="100vw"><img alt="" loading="lazy" decoding="async" src="/assets/img/BOZIB6F76a-100.png" width="450" height="450"></picture><h3 class="bd-step__number">3.</h3><p class="bd-step__description">Use the component’s API to customize functionality.</p></div><div class="bd-step bd-step-4"><picture><source type="image/png" srcset="/assets/img/8qne_BEoww-100.png 100w, /assets/img/8qne_BEoww-300.png 300w, /assets/img/8qne_BEoww-450.png 450w" sizes="100vw"><source type="image/avif" srcset="/assets/img/8qne_BEoww-100.avif 100w, /assets/img/8qne_BEoww-300.avif 300w, /assets/img/8qne_BEoww-450.avif 450w" sizes="100vw"><img alt="" loading="lazy" decoding="async" src="/assets/img/8qne_BEoww-100.png" width="450" height="450"></picture><h3 class="bd-step__number">4.</h3><p class="bd-step__description">Sit back, relax, and enjoy your out-of-the-box component!</p></div></div></section><section class="bd-section bd-row bd-row__col-1-2"><div class="bd-row__column"><h2 class="bd-section__title">React and Preact</h2><div class="bd-section__body"><p>Bento components are fundamentally React functional components, released as Preact or React, and in regular or minified builds. Install each Bento component as needed, via npm, then import it as desired. The shown example uses the React <code><BentoFitText></code> in regular build.</p><p>And that’s it!</p></div><a href="/documentation" class="bd-button--burnt-sienna">All bento components</a></div><div class="bd-row__column"><div class="bd-react-sample"><div class="bd-react-sample__code bd-copy-pasteable"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> @bentoproject/bento-fit-text</code></pre></div><div class="bd-react-sample__code bd-copy-pasteable"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> <span class="token punctuation">{</span> BentoFitText <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@bentoproject/bento-fit-text/react"</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> <span class="token string">"@bentoproject/bento-fit-text/styles.css"</span><span class="token punctuation">;</span><br><br><span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> <span class="token punctuation">(</span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">BentoFitText</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque<br> inermis reprehendunt.<br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">BentoFitText</span></span><span class="token punctuation">></span></span><br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre></div></div></div></section><svg class="bd-page-get-started__background"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/assets.svg#icon-logo-bento"></use></svg><section class="bd-section bd-row bd-row__col-1-2"><div class="bd-row__column"><h2 class="bd-section__title">Web Components</h2><div class="bd-section__body"><p>There are two options to integrate Bento components into an HTML document:</p><strong>1. Install and import the element using <code>npm</code>.</strong> <strong>2. Include the component <code><script></code> in the head of your document.</strong><p>You must include each Bento component's required CSS library before adding custom styles to avoid layout shifts on load. To guarantee best loading performance, it’s best to inline the light-weight pre-upgrade styles directly into the page. See each component's section on layout and style for further details.</p></div><a href="/documentation" class="bd-button--burnt-sienna">All bento components</a></div><div class="bd-row__column"><div class="bd-web-component-sample"><h3>Install `bento-fit-text` via npm</h3><div class="bd-web-component-sample__code bd-copy-pasteable"><pre class="language-html"><code class="language-html">npm install @bentoproject/bento-fit-text</code></pre></div><div class="bd-web-component-sample__code bd-copy-pasteable"><pre class="language-html"><code class="language-html">import '@bentoproject/bento-fit-text';</code></pre></div><h3 class="spacer-xxl">Use `bento-fit-text`via CDN</h3><div class="bd-web-component-sample__code bd-copy-pasteable"><pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">nomodule</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.ampproject.org/bento.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><br> <span class="token attr-name">async</span><br> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><br> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.ampproject.org/bento.mjs<span class="token punctuation">"</span></span><br> <span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><br> <span class="token attr-name">async</span><br> <span class="token attr-name">nomodule</span><br> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.ampproject.org/v0/bento-fit-text-1.0.js<span class="token punctuation">"</span></span><br> <span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><br> <span class="token attr-name">async</span><br> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><br> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs<span class="token punctuation">"</span></span><br> <span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span><br> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><br> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><br> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.ampproject.org/v0/bento-fit-text-1.0.css<span class="token punctuation">"</span></span><br> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bento-fit-text</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 300px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque<br> inermis reprehendunt.<br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bento-fit-text</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div></div></div></section><section class="bd-section bd-row bd-row__col-2 bd-browser-support"><div class="bd-row__column"><h2 class="bd-section__title">Browser Support</h2><div class="bd-section__body"><p>Bento components support the latest two versions of most major browsers like Chrome, Firefox, Edge, Safari, Opera and UC Browser. We support desktop, phone, tablet and the web view version of these respective browsers.</p></div></div><div class="bd-row__column"><picture><source type="image/png" srcset="/assets/img/oAzvt2EVs2-100.png 100w, /assets/img/oAzvt2EVs2-300.png 300w, /assets/img/oAzvt2EVs2-600.png 600w, /assets/img/oAzvt2EVs2-1827.png 1827w" sizes="100vw"><source type="image/avif" srcset="/assets/img/oAzvt2EVs2-100.avif 100w, /assets/img/oAzvt2EVs2-300.avif 300w, /assets/img/oAzvt2EVs2-600.avif 600w, /assets/img/oAzvt2EVs2-1827.avif 1827w" sizes="100vw"><img alt="Browser Support" loading="lazy" decoding="async" src="/assets/img/oAzvt2EVs2-100.png" width="1827" height="1380"></picture></div></section><section class="bd-section bd-row bd-row__col-2 bd-contribute"><div class="bd-row__column"><picture><source type="image/png" srcset="/assets/img/HQe-x6PIM_-100.png 100w, /assets/img/HQe-x6PIM_-300.png 300w, /assets/img/HQe-x6PIM_-600.png 600w, /assets/img/HQe-x6PIM_-1890.png 1890w" sizes="100vw"><source type="image/avif" srcset="/assets/img/HQe-x6PIM_-100.avif 100w, /assets/img/HQe-x6PIM_-300.avif 300w, /assets/img/HQe-x6PIM_-600.avif 600w, /assets/img/HQe-x6PIM_-1890.avif 1890w" sizes="100vw"><img alt="OpenJS" loading="lazy" decoding="async" src="/assets/img/HQe-x6PIM_-100.png" width="1890" height="768"></picture></div><div class="bd-row__column"><h2 class="bd-section__title">Contribute to Bento</h2><div class="bd-section__body">Need a component but don’t see it listed? Come across a bug you know how to fix? Great news! Bento is open source under the AMP Project, and we couldn’t do it without our amazing community. Join us and start contributing today!</div><div><a href="https://github.com/ampproject/bentojs.dev" target="_blank" class="bd-button--burnt-sienna" rel="noreferrer">Join us today</a></div></div></section></div><section class="bd-discover-more"><div class="bd-discover-more__container"><h2>Discover all available Bento components inside the documentation.</h2><a href="/documentation" class="bd-button">Discover the documentation</a></div></section></div></main><footer class="bd-footer"><div class="bd-footer-content"><div class="bd-footer-content-column"><h3>Overview</h3><ul><li class="bd-link-wrapper"><a class="bd-link" href="/">➞ At a glance</a></li><li class="bd-link-wrapper"><a class="bd-link" href="/blog">➞ Blog</a></li></ul></div><div class="bd-footer-content-column"><h3>Docs</h3><ul><li class="bd-link-wrapper"><a class="bd-link" href="/get-started">➞ Get started</a></li><li class="bd-link-wrapper"><a class="bd-link" href="/documentation">➞ Components</a></li></ul></div><div class="bd-footer-content-column"><h3>Community</h3><ul><li class="bd-link-wrapper"><a class="bd-link" rel="noreferrer" href="https://github.com/ampproject/bento/blob/main/CODE_OF_CONDUCT.md" target="_blank">➞ Code of conduct</a></li><li class="bd-link-wrapper"><a class="bd-link" rel="noreferrer" href="https://github.com/ampproject/bento/discussions" target="_blank">➞ Feedback & Support</a></li></ul></div><div class="bd-footer-copyright">© OpenJS Foundation and AMP Project.<br><br>All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.</div><ul class="bd-footer-legal"><li class="bd-link-wrapper"><a class="bd-link" rel="noreferrer" href="https://terms-of-use.openjsf.org/" target="_blank">Terms of use</a></li><li class="bd-link-wrapper"><a class="bd-link" rel="noreferrer" href="https://privacy-policy.openjsf.org/" target="_blank">Privacy policy</a></li><li class="bd-link-wrapper"><a class="bd-link" rel="noreferrer" href="https://www.linuxfoundation.org/cookies" target="_blank">Cookie policy</a></li></ul></div></footer><script async src="https://www.googletagmanager.com/gtag/js?id=UA-213424092-1"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-213424092-1');</script><script>let key = "https://policies.google.com/technologies/cookies"; let savedKey = localStorage.getItem("banner--cta-url"); if(savedKey === key) { document.documentElement.classList.add("banner--hide"); }</script><announcement-banner class="bd-cookie-banner"><div class="bd-cookie-banner-label" role="status">We serve cookies on this site to analyze traffic and optimize your experience.</div><a href="https://policies.google.com/technologies/cookies" class="bd-cookie-banner-more" data-type="clear" target="_blank" rel="noreferrer">More details</a> <button type="button" data-banner-close class="bd-cookie-banner-close bd-button--light --uppercase">OK</button></announcement-banner></body></html>