DOCSEARCHbyAlgolia
Submit Docs

Bento Design System

website·Indexed 33 days ago

https://bento.buildo.io

A comprehensive design system featuring a wide array of UI components including form fields, data visualization charts, and layout utilities. The system encourages the use of Atomic CSS (Functional or Utility-first CSS) and provides detailed technical documentation for components such as Table, Modal, and various input fields.

Tokens
18.7K
Snippets
90
Records
142
Agent score
56%

What's inside Bento

  1. Overview of Bento Design System for React

    Bento is a configurable and extensible Design System built for React. It is designed to be used as a foundational layer that developers can extend to create their own project-specific Design System. Key resources for implementation include a Quick Start guide for integration, Zeroheight for design resources, Playroom for interactive component testing, and Storybook for comprehensive component examples.

  2. Overview of Bento's Atomic CSS and Box component

    Bento uses Atomic CSS principles where 'atomic properties' correspond to single-purpose CSS classes. These are implemented using Vanilla Extract's Sprinkles API. The Box component serves as the JSX equivalent of the sprinkles function, acting as a type-safe replacement for div (though the rendered element can be changed using the as prop). By default, Box uses the standard bentoSprinkles configuration.

  3. Customize Bento components using themes, configuration, and atoms

    Bento components can be customized to meet project-specific needs through three primary methods:

    1. Theming: Modify design tokens to customize design system foundations, including colors, typography, and spacing.
    2. Configuration: Use component-specific configuration settings to alter the basic appearance and behavior of individual components.
    3. Atoms Augmentation: Add additional design tokens and atomic CSS classes to define project-specific components.

  4. Understand Bento typography type scale roles

    Bento organizes typography styles into five semantic roles based on their purpose:

    • Display: Reserved for short, important text or numerals; optimized for large screens.
    • Headline: High-emphasis text for primary passages or important content regions.
    • Title: Used to divide secondary text passages or content regions.
    • Body: Used for longer passages of text and paragraphs.
    • Label: Utilitarian styles for text inside components or small supporting text (e.g., captions).

  5. Use the Feedback component to display status or custom icons

    The Feedback component is used to render feedback messages. It can be configured to show a predefined feedback status (using the status prop) or a custom icon (using the icon prop).

  6. Use the ContentWithSidebar component for layout

    The ContentWithSidebar component is used to render a main content area and a sidebar. To ensure accessibility and a logical tab/focus order, the component is designed so that the main content is always rendered before the sidebar in the DOM.

  7. Use the DisclosureGroup component

    The DisclosureGroup component (also known as an Accordion in other UI libraries) is used to create a group of collapsible content sections. It is related to the Disclosure component.

  8. Use the Disclosure component to create collapsible content

    The Disclosure component (also known as a CollapsiblePanel in other libraries) is used to toggle the visibility of content. It supports different levels of nesting and configurable icon positions.

  9. Add submit and secondary buttons to a Form

    The Form component provides built-in utilities to render a standard submit button. Additionally, a secondary button can be placed next to the submit button for alternative actions.

  10. Trigger Toasts using the useToast hook

    The Toast component is not intended to be instantiated directly in your JSX. Instead, you should use the showToast function provided by the useToast hook to trigger toast notifications.

  11. Extend Bento atomic properties with custom tokens

    To add custom tokens (e.g., a new background color) to Bento's atomic system, you must extend the default sprinkles. This involves installing Vanilla Extract dependencies, defining a custom theme variable, creating a new sprinkles function that merges Bento's default properties with your custom ones, and providing this function to a BentoProvider.
    pnpm add -D @vanilla-extract/css @vanilla-extract/sprinkles

  12. Set up Bento Design System in a React application

    To use Bento components, you must import the required stylesheets and wrap your application in the BentoProvider.

    1. Import Styles: Import index.css (required for core functionality) and defaultTheme.css (optional, provides the standard look). These should be imported once, typically at the root of the application.
    2. BentoProvider: Wrap your app with BentoProvider. This context provider is mandatory for Bento components to function.
    3. Localization: Pass defaultMessages to the BentoProvider to provide standard text for repetitive UI elements (like 'Close' or 'Loading...') across components.
    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>
  );
}