Bento

Getting started with Bento

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.

Start using Bento Components in your site by following these easy steps:

1.

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.

2.

Choose a component that fits your needs and install or import it.

3.

Use the component’s API to customize functionality.

4.

Sit back, relax, and enjoy your out-of-the-box component!

React and Preact

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 <BentoFitText> in regular build.

And that’s it!

All bento components
npm install @bentoproject/bento-fit-text
import React from "react";
import { BentoFitText } from "@bentoproject/bento-fit-text/react";
import "@bentoproject/bento-fit-text/styles.css";

function App() {
return (
<BentoFitText>
Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
inermis reprehendunt.
</BentoFitText>
);
}

Web Components

There are two options to integrate Bento components into an HTML document:

1. Install and import the element using npm. 2. Include the component <script> in the head of your document.

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.

All bento components

Install `bento-fit-text` via npm

npm install @bentoproject/bento-fit-text
import '@bentoproject/bento-fit-text';

Use `bento-fit-text`via CDN

<!DOCTYPE html>
<html>
<head>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<script
async
type="module"
src="https://cdn.ampproject.org/bento.mjs"
>
</script>
<script
async
nomodule
src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
>
</script>
<script
async
type="module"
src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs"
>
</script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
/>

</head>
<body>
<bento-fit-text style="width: 400px; height: 300px">
Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
inermis reprehendunt.
</bento-fit-text>
</body>
</html>

Browser Support

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.

Browser Support
OpenJS

Contribute to Bento

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!

Discover all available Bento components inside the documentation.

Discover the documentation
More details