Bento is an easy to use component library that helps you achieve a great page experience.
Bento works great with frameworks and CMS
Bento components are packaged as React or Preact components for seamless integration with those frameworks, but they're also provided as Web Components, so that they can be used anywhere else.
Framework guides
Great page experience with Bento
Offering users a great experience is important and Bento components are designed from the ground up with page experience in mind. For example, all Bento components avoid user frustration by minimizing content shifts by design.
Start learningBento in action
Bento components are highly customizable and enable custom interactivity via their APIs.
➞ All components<bento-base-carousel id="my-carousel">
<img src="/assets/img/group-1.webp" />
<img src="/assets/img/group-2.webp" />
<img src="/assets/img/group-3.webp" />
</bento-base-carousel>
<script>
(async () => {
const carousel = document.querySelector('#my-carousel');
await customElements.whenDefined('bento-base-carousel');
const api = await carousel.getApi();
// programatically advance to next slide
api.next();
})();
</script><bento-accordion id="my-accordion">
<section>
<h2>Section 1</h2>
<p>Content in section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<p>Content in section 2.</p>
</section>
<section>
<h2>Section 3</h2>
<p>Content in section 3.</p>
</section>
</bento-accordion>
<script>
(async () => {
await customElements.whenDefined('bento-accordion');
const api = await accordion.getApi();
const accordion = document.querySelector('#my-accordion');
})();
</script><bento-sidebar id="sidebar1" side="right" hidden>
<h2>Navigation Sidebar</h2>
<ul>
<li>Nav item A</li>
<li>Nav item B</li>
<li>Nav item C</li>
<li>Nav item D</li>
</ul>
</bento-sidebar>
<div class="buttons">
<button id="open-sidebar">Open sidebar</button>
</div>
<script>
(async () => {
await customElements.whenDefined('bento-sidebar');
const api = await sidebar.getApi();
const sidebar = document.querySelector('#sidebar1');
document.querySelector('#open-sidebar').onclick = () => api.open();
})();
</script><bento-social-share
id="my-share"
type="twitter"
aria-label="Share on Twitter"
></bento-social-share>
<button id="change-share">Change share button</button>
<script>
(async () => {
const socialShare = document.querySelector('#my-share');
const changeShareButton = document.querySelector('#change-share');
changeShareButton.onclick = () => {
socialShare.setAttribute('type', 'linkedin');
socialShare.setAttribute('aria-label', 'Share on LinkedIn');
};
})();
</script>