Advanced

React components

sashimi UI is built around plain HTML by design.
However, if you are using React, you can take advantage of dedicated components to make the most of it.

sashimi UI React components add useful behaviors to standard HTML elements.
They always render a single HTML element.

Usage

Just import components from sashimi-ui/react or sashimi-ui/react/sui-prefixed.

For example, <Dialog/> adds declarative visibility, anchored positioning, and click-away handling while rendering only a single native <dialog/> element.

import { Dialog } from "sashimi-ui/react";

// Or when you need `.sui-` prefixed class names
// import { Dialog } from "sashimi-ui/react/sui-prefixed";

// inside your component
<button ref={buttonRef} className="button" type="button" onClick={() => setOpen(true)}>
  Menu
</button>
<Dialog mode="popover" open={open} anchor={buttonRef.current} onClickAway={() => { setOpen(false); }}>
  <ul style={{ listStyle: "none", padding: 0 }}>
    {/* Menu items */}    
  </ul>
</Dialog>

Requirements

React components require React and React DOM 19:

react >=19.0.0 <20.0.0
react-dom >=19.0.0 <20.0.0

These dependencies are optional when using only the CSS.

Available components