Introduction

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.

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"

Extra

Button