Getting Started

Choose your class name style

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

Short style

Simple names like .button and .link.

Prefixed style

Prefixed names like .sui-button and .sui-link, which help avoid naming conflicts.

Installation

Use the CSS files (download or CDN)

Download the bundled CSS file the bundled CSS file(sui-prefixed) and default theme CSS , then put them in your project.
Or you can use the CDN links directly.

<!-- Download CSS files and include them in your project -->
<link rel="stylesheet" href="path/to/downloaded/bundle.css">
<link rel="stylesheet" href="path/to/downloaded/default.theme.css">

<!-- or use via JSDELIVR CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sashimi-ui@1.0.0/dist/css/bundle.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sashimi-ui@1.0.0/dist/css/default.theme.css">

<!-- or use via UNPKG CDN -->
<link rel="stylesheet" href="https://unpkg.com/sashimi-ui@1.0.0/dist/css/bundle.css">
<link rel="stylesheet" href="https://unpkg.com/sashimi-ui@1.0.0/dist/css/default.theme.css">

<!-- usage -->
<button class="button primary">Your first button</button>

<!-- Download CSS files and include them in your project -->
<link rel="stylesheet" href="path/to/downloaded/sui-bundle.css">
<link rel="stylesheet" href="path/to/downloaded/default.theme.css">

<!-- or use via JSDELIVR CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sashimi-ui@1.0.0/dist/css/sui-bundle.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sashimi-ui@1.0.0/dist/css/default.theme.css">

<!-- or use via UNPKG CDN -->
<link rel="stylesheet" href="https://unpkg.com/sashimi-ui@1.0.0/dist/css/sui-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/sashimi-ui@1.0.0/dist/css/default.theme.css">

<!-- usage -->
<button class="sui-button sui-primary">Your first button</button>

Install via npm

Recommended when using the React components.
Install it with:

npm install sashimi-ui

Then import the CSS files via import.

// 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>