Stylish

A UI Component Library for Stylo.

Main Commands

• npm i - Run this after cloning the library.
• npm run dev - View the microsite on port 3000.
• npm run storybook - View Storybook on port 6006.
• npm run pack-stylish - Package Stylish so it can be used in other places.
• npm publish - Publish the package to NPM. You will have to update the version number in package.json.

How to import Stylish UI into a project

Stylish exists as a private module under Ask Stylo on NPM. It's very easy to add. Simply run:

npm install @askstylo/stylish-ui

Then import a component, like this:

import { Button } from "@askstylo/stylish-ui"

To ensure the style shows up in a framework like Next.js, import the css file.

import "@askstylo/stylish-ui/dist/stylish.css"

Using Stylish UI Locally

If you want to test Stylish changes without going through the npm publish process, you can add it to your project locally.

1. Run npm run pack-stylish. This will create a folder in the root directory of the stylo-ui folder, called dist. This is the bundled version of Stylish. Drag that into the root folder of your project.
2. To import this local file into your project, just do this:

• import { Button } from "../dist/"
• import "../dist/stylish.css"