ricebag

ricebag is a React component library with custom property theming.

Installation

npm install ricebag

Usage

Import the components and the stylesheet:

import { Button, Modal, Tooltip, toast } from 'ricebag'
import 'ricebag/styles.css'

The stylesheet includes both component styles and default theme values. Import it once at the root of your app.

Components

Component	Description
Box	Container with optional background image and icon
Button	Button with built-in async loading state
Dropdown	Popover-based dropdown menu
Icon	Lightweight image-based icon
IconButton	Button variant with an icon
Loading	Animated loading indicator
Panel	Styled panel container
Popover	Smart-positioned popover with open/close animations
Select	Dropdown-based select input
Tooltip	Hover tooltip with directional positioning
Modal / ModalBox	Global modal system
Toast / ToastBox	Global toast notification system

Theming

All visual properties are driven by CSS custom properties. The defaults shipped in ricebag/styles.css are:

:root {
  --color-main: #141414;       /* component backgrounds */
  --color-accent: #444444;     /* borders, hover states */
  --color-bright: #f0f0f0;     /* primary text, glow effects */
  --color-dim: #888888;        /* muted/disabled text */
  --color-danger: rgba(255, 133, 133, 0.16);  /* danger state border */
  --color-backdrop: rgba(0, 0, 0, 0.3);       /* modal overlay */

  --z-box-content: 100;
  --z-popover: 1000;
  --z-modal: 9999;
  --z-tooltip: 99999;
  --z-toast: 999999;

  --transition-fast: 0.1s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

To override any variable, redefine it in your own global CSS after importing ricebag/styles.css:

:root {
  --color-main: #1a1a2e;
  --color-accent: #2a2a4a;
  --color-bright: #ffffff;
}

You can also scope overrides to a specific part of your app:

.sidebar {
  --color-main: #0d0d0d;
}

Browser Requirements

ricebag uses the Web Animations API and the HTML Popover API. No polyfills are included.

Minimum supported browsers: Chrome 114+, Safari 17+, Firefox 125+.

License

Copyright 2026 Rio

Licensed under the GNU Lesser General Public License v3.0 or later. See LICENSE for details.