Human-centered (or UX-first) components based on React + Bootstrap
npm install sapusSAPUS is a set of universal design components based on react-bootstrap and bootstrap-icons. It implements context-based data controls such as icon button, dropdown with multiple keys, item slider and date selector.
It empowers you to build rich frontend components which require better user experiences to display various bussiness logics
(transactions, invoices, statics, etc.) on your web applications.
The components contained in the framework are inspired by, and aim to focus on achieving the Human-Centered Design.
For component-level documentation, see stories.
``shell`
npm install sapus
or
`shell``
yarn add sapus
React >= 19.0.0
Emphasize universal design icons and their associated action with IconControl! You can also create a button to open toolbox with IconToolbox to select an additional option or a submenu.
SAPUS provides two date selector components DateSelector and DateSlider. Both of them are designed to be stress-free implementations of date selection, rather than OS-default (or browser default) date pickers and they are suitable for all generation.
!Flexible data representation in table
The DataTable component realizes replaceable table elements. It exposes data properties so you can import/export table data for your business logic. See implementation example and try it on your own.
Selected values are always displayed on CategoryDropdown. You can use MultiCatetoryDropdown for the selection of cross conditions. Make confusion-free UI to assist users to make more precise and easy works.
You can also set the action for a Picture. However it provides built-in animation on tapping/clicking, you can define the hook function which fires on the touch. The PictureGrid example provides image picker by the component. Check it!
WIP
Sorry, accessibility support is not provided yet.
Nomura Suzume