Getting Started

Choose your class name style

sashimi UI provides two class naming styles. Load whichever style you prefer.

Installation

Use the CSS files (CDN or download)

Load default.theme.css Open in new tab and bundle.css Open in new tab sui-bundle.css Open in new tab directly from a CDN.
Alternatively, download the CSS files and add them to your project.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sashimi-ui@2.1.0/dist/css/default.theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sashimi-ui@2.1.0/dist/css/bundle.css">

<!-- You're ready to go! -->
<button class="button">Your first button</button>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sashimi-ui@2.1.0/dist/css/default.theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sashimi-ui@2.1.0/dist/css/sui-bundle.css">

<!-- You're ready to go! -->
<button class="sui-button">Your first button</button>

Install via npm

Recommended when using the advanced React components.

npm install sashimi-ui

Then import the CSS files into your application.

// where you apply global styles
import "sashimi-ui/default.theme.css";
import "sashimi-ui/bundle.css";

// inside your component
<button className="button">Your first button</button>
// where you apply global styles
import "sashimi-ui/default.theme.css";
import "sashimi-ui/sui-bundle.css";

// inside your component
<button className="sui-button">Your first button</button>