Installation
pnpm i @sayaww/nomi-mono"
Usage
Set up styles and fonts in your root file:
import '@sayaww/nomi-mono/style';
import '@fontsource/inter/400.css'; // optional
import '@fontsource/inter/500.css'; // optional
import '@fontsource/inter/700.css'; // optional
Import components:
import { Button } from '@sayaww/nomi-mono';
With storybook
import '../src/style.css';
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/700.css';
Development
turbo dev
#http://localhost:6006
Import themes
- In Tokens Studio in Figma, select
light
theme - Export from Figma, choose Tools > Export > single file
- Uncheck
all token set
- check
include parent key
- save as
Light.json
and put intofigma-output
folder, then repeat for dark theme - put all files into figma-output folder
- run
turbo build-token
- Access theme in
src/themes/tokens.json
- Migrate tokens manually to
tailwind.config.cjs
- See
/tokens/tokens-transformed-[dark | light].json
- See
Developing UI
Adding a new component
Use shadcn/ui to add components you want.
Or
- Duplicate from "Template" folder in
src/components
with the component name. - Add the component name to
src/components/index.tsx
.
Working on UI + your own project
If you are developing UI and other preoject at the same time, you'll need to let Tailwind knows when to compile your new class names.
tailwind.config
content: [
"./index.html",
"./*.mdx",
"./src/components/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"../perp-onboarding/app/**/*.{js,ts,jsx,tsx,mdx}",
"../otc-maker-ui/app/**/*.{js,ts,jsx,tsx,mdx}",
// add new files to watch here
],
package.json
"dev": "tsup src/components/index.tsx --format esm,cjs --dts --watch src --watch ../perp-onboarding/app --watch <your path> & storybook dev -p 6006",
Publish
turbo ship
Publish storybook to Chromatic
turbo chromatic
Embed Story in website
Get url
from the top right corner of a story.