Get Started
Installation
pnpm install nomimono
Usage
In your file, import the components you need:
import { Button } from "nomimono";
Initialize css reset in index.tsx
or app.tsx
, where all compoenets can access:
import { reset } from "nomimono";
// css reset
reset();
For dark theme, add stitchesDarkTheme
class to the root element:
See all component usage here at the Workshop (opens in a new tab).
Dark mode
import { stitchesDarkTheme } from "nomimono";
<div className={stitchesDarkTheme}>
{/* Component will display in dark mode */}
</div>;
You'll have to implement your own theme switcher.
Brand Fonts (optional)
Note: You need to buy the fonts yourself. Without the fonts the components works just fine.
Fonts are optional but prioritize Sk-Modernist (opens in a new tab) for heading and Inter for body.
- Buy and install SkModernest (opens in a new tab) in your project's
public/fonts
folder - Install Inter with
pnpm i @fontsource/inter-tight
Initialize brand fonts in your index.tsx
or app.tsx
, where all compoenets can access:
import { brandFonts } from "nomimono";
//set up fonts (optional)
brandFonts();
Inter Tight
Get it from google fonts or install as an NPM package:
pnpm install @fontsource/inter-tight
In your index.tsx
or app.tsx
:
import "@fontsource/inter-tight"