Soul Refiner Design System

A centralized, reusable design system used across all Soul Refiner web applications to maintain visual consistency, streamline development, and speed up feature delivery.

Package Info

• Name: @soul-refiner/design-system
• Version: 2.14.18
• License: MIT
• Registry: npmjs.org

What’s Included

This design system is built using modern, flexible libraries, making it easy to compose and extend UI components:

Frameworks & Libraries

| Purpose | Technology | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Component Library | React, Styled-Components, MUI, Radix UI | | Utility Styling | TailwindCSS, tailwind-merge, tailwindcss-animate | | Rich Text | Slate.js, Plate Editor | | Media Support | react-player, react-h5-audio-player | | Tooling & Build | Rollup, Storybook, Prettier, Husky, Chromatic | | Emoji Support | Emoji Mart | | Drag-and-Drop | react-dnd, react-dnd-html5-backend |

Features

• Reusable UI components (inputs, buttons, tooltips, date pickers, etc.)
• Theme consistency across apps
• Built with Radix UI and MUI for accessibility and interactivity
• TypeScript support with full typings
• Easy integration with apps using next, react, styled-components
• Visual testing with Storybook and Chromatic
• Documentation and live examples via Storybook

Development Setup

Requirements

• Node.js 22.x
• Yarn package manager

Install dependencies

yarn install

Build the component library

yarn build

Run Storybook locally

yarn storybook

Format code

yarn format

Getting Started - Adding the design system to your application

1. Install via npm

npm install @soul-refiner/design-system

or using yarn

yarn add @soul-refiner/design-system

To test changes in your design system locally in another app(for example: app-front React/nextjs app) before publishing to NPM or pushing to remote registry

1. Link the design system package:

   cd pkg-design-system
   yarn link

2. Link the design system in your app:

   cd path/to/your/app
   yarn link @soul-refiner/design-system

Important to note: Issues with Storybook and Fixes

• Clickup Doc