Quick start
Add the Bento package to your project:
- pnpm
- yarn
- npm
pnpm add @buildo/bento-design-system
yarn add @buildo/bento-design-system
npm install @buildo/bento-design-system
Here's how an hello world looks like:
import "@buildo/bento-design-system/index.css";
import "@buildo/bento-design-system/defaultTheme.css";
import { defaultMessages } from "@buildo/bento-design-system/defaultMessages/en";
import { BentoProvider, Title } from "@buildo/bento-design-system";
function App() {
return (
<BentoProvider defaultMessages={defaultMessages}>
<Title size="large">Hello, World!</Title>
</BentoProvider>
);
}
Let's break this down:
import "@buildo/bento-design-system/index.css";
Here we are importing Bento's own stylesheet. This is required for Bento to work correctly and it must be imported only once in your application, generally near the root of your app.
import "@buildo/bento-design-system/defaultTheme.css";
This imports the default theme. This is the same theme used by the documentation, and it's useful to get started right away. We will see in the next secions how to customize the theme.
import { defaultMessages } from "@buildo/bento-design-system/defaultMessages/en";
Here we're importing the default messages, used by some of Bento components. Bento provides default messages for the English language, so that you can use them for a quick start, but in a localized application you will likely provide your own so to support multiple languages.
What are default messages?
Here are some sample default messages you can use as a starting point, once you're ready to customize them:
import { BentoProvider, Title } from "@buildo/bento-design-system";
In the last import, we're importing some components from Bento:
BentoProvider
is a React context provider that is required for Bento components to work. You must wrap your application with it in order to use Bento.Title
is a typography component which is used for title text.
function App() {
return (
<BentoProvider defaultMessages={defaultMessages}>
<Title size="large">Hello, World!</Title>
</BentoProvider>
);
}
Here we're finally rendering our first Bento component, showing "Hello, World!" on screen.