DOCSEARCHbyAlgolia
Submit Docs

Bento Design System

website·Indexed 32 days ago

https://developer.bento-ds.com/

A React-based design system providing a comprehensive library of components including form fields, charts, and layout utilities. It utilizes Atomic CSS principles, integrates react-aria for SSR support, and offers customization through the makeGlobalBentoTheme utility and BentoProvider.

Tokens
18.8K
Snippets
90
Records
139
Agent score
51%

What's inside Bento

  1. Overview of Bento Design System for React

    Bento is a configurable and extensible Design System for React designed to serve as a foundation for a project's own Design System. It provides a set of components and resources to accelerate UI development.

  2. Use the ContentWithSidebar component for layout

    The ContentWithSidebar component renders a main content area and a sidebar. To ensure a logical tab and focus order for accessibility, the component is designed to always render the main content before the sidebar in the DOM.

  3. Customize Bento components using theming, configuration, and atoms augmentation

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

    1. Theming: Modify the design tokens that Bento is based on to customize design system foundations such as colors, typography, and spacing.
    2. Configuration: Use the specific configuration options provided by each component to alter its basic appearance and behavior.
    3. Atoms Augmentation: Add additional design tokens and atomic CSS classes to define project-specific components.

  4. Use the Box component for atomic styling

    The Box component is the primary building block of the Bento design system. It serves as a type-safe JSX equivalent to the sprinkles function, acting as a drop-in replacement for div (though the rendered HTML element can be changed using the as prop). By default, it uses the standard bentoSprinkles configuration.

  6. Create component variants using withBentoConfig

    Use the withBentoConfig utility to create multiple variants of a single component with different configurations. This is useful when you need the same component to behave differently in different contexts (e.g., a square chip vs. a pill-shaped chip) without changing the global provider configuration.
    import { Chip, withBentoConfig } from "@buildo/bento-design-system";

export const { Chip: SquaredChip } = withBentoConfig(
  {
    chip: { radius: 0 },
  },
  Chip
);

export const { Chip: PillChip } = withBentoConfig(
  {
    chip: { radius: "circledX" },
  },
  Chip
);

  8. Use AreaLoader to create a loading overlay

    The AreaLoader (referred to as Loader in some contexts) renders an animated indefinite loader centered within its parent container. Because it is absolutely positioned, it will cover the closest ancestor element that has position: relative.
    <Card padding="24">
  <Box position="relative">
    {cardContent}
    {isLoading && <AreaLoader />}
  </Box>
</Card>

  9. Contribute to Bento as an external developer

    While Bento is primarily maintained by an internal team at buildo, external pull requests are welcome. To increase the likelihood of a merge, developers should first discuss their intention to contribute within a relevant GitHub issue to receive guidance on the preferred approach.

  10. Define a global theme using makeGlobalBentoTheme

    The makeGlobalBentoTheme utility allows you to create a global CSS theme file. It is a wrapper around Vanilla Extract's createGlobalTheme and requires Vanilla Extract to be set up in your project. You can define a subset of design tokens; any tokens not explicitly set will fall back to the Bento default theme. The resulting theme.css file should be imported in your app in place of defaultTheme.css.
    // my-project/design-system/src/theme.css.ts
import { makeGlobalBentoTheme } from "@buildo/bento-design-system";

makeGlobalBentoTheme({
  fontFamily: {
    default: "Arial",
  },
});

  11. Handle validation errors in FileUploaderField

    Validation issues are managed via the issues prop (a non-empty array of errors) and the renderIssue prop. renderIssue is a required function (issue: E | ErrorCode, file?: File) => Children that defines how user-friendly error messages are displayed under the field.

  12. Trigger Toasts using the useToast hook

    The Toast component is not intended to be used directly as a JSX element. Instead, developers should use the showToast function provided by the useToast hook to programmatically trigger toast notifications.