Frequency Style Guide

Svelte + Storybook + TailwindCSS

Prerequisites

This package is designed to work specifically with Svelte v5 + Tailwind v4 projects.

Installation

When installing this package into your project, follow the steps below.

1. Install the style guide package:

npm i @frequency-chain/style-guide

2. Install and configure Tailwind.

• Skip the step where you add @import "tailwindcss"; to your css file as it has already been imported in the library.

3. Edit your app.css file to import the style guide and set the source.

@import '@frequency-chain/style-guide/styles';

@source '../../node_modules/@frequency-chain/style-guide/**/*.{svelte,js,ts}';

You should now be able to access the Frequency Style Guide Tailwind theme and custom css classes in your Svelte components! (Make sure you update the path to the node_modules if it is different than above.)

---

Development

Storybook Quickstart

To spin up the style guide and see what icons, features, atoms, typography, and colors are included, run the commands below.

npm i
npm run storybook

Package Testing

1. Build the /dist.

npm run build

2. Create pack.

cd dist
npm pack

3. Install local package into a new project.
   • Navigate to a new Svelte project.
   • Follow the installation steps.
   • When installing the package, remember to use the local version you just created!

Dev Notes

• Anything that should be exported for the package should be in src/lib.
• Any components that you wish to export must be exported in index.ts.