Serbitone Design System Installer

🚀 Serbitone Design System Installer is a CLI tool that helps you quickly set up the Serbitone Design System in your project. You can choose between the Default Theme (bundled CSS) or a Custom Theme (CSS excluded, fully customizable).

Features

• Install Default Theme with bundled CSS in one command.
• Install Custom Theme and copy the root.css into your project for full customization.
• Guided CLI to choose your preferred setup.
• Step-by-step console instructions for using the design system in your app.

Installation

1. Add the installer to your project

npm install serbitone-design-system-installer --save-dev

The installer can also be run via npx without globally installing:

npx serbitone-design-system

Usage

Run the guided installer:

npx serbitone-design-system

You will be prompted to choose a theme mode:

? Choose theme mode:
❯ default
  custom

2 Ways to Install the Design System

1️⃣ Default Theme (Bundled CSS)

• Automatically installs the prebuilt CSS.
• Quick setup for projects that don’t need theme customization.

Installation command:

npm install serbitone-design-system-default

Import in your main app file:

import "serbitone-design-system-default/dist/index.css";

CLI confirmation example:

✅ Default theme installed with bundled CSS!
🎨 Your Serbitone Design System is ready to use!
📖 Next steps:
1️⃣ Import the bundled CSS in your main app file.
2️⃣ Start using design system components.
3️⃣ Customize theme later if needed.

2️⃣ Custom Theme (CSS Excluded)

• Installs the design system without CSS.
• Allows you to customize the theme by editing root.css.

Installation command:

npm install serbitone-design-system-custom

Copy CSS into your project:

The installer will ask for the folder where you want to inject the theme:

? Input dir for design system css theme injection: /src/domains/Theme/

It will copy:

designSystemRoot.css

Import in your app file:

import "./src/domains/Theme/designSystemRoot.css";

CLI confirmation example:

✅ Custom theme installed (CSS excluded)
🎨 Custom root.css copied to /src/domains/Theme/designSystemRoot.css
📖 Next steps:
1️⃣ Import root.css in your main app file.
2️⃣ Start using components with your custom theme.

CLI Commands

npx serbitone-design-system Run the guided installer. npm install serbitone-design-system-installer Install the installer as a dev dependency. |

Docs & References

• GitHub: https://github.com/folkers-club/design-system-installer
• For full component documentation and customization, refer to the design system repo.

Notes

• Default theme is faster to setup and includes CSS automatically.
• Custom theme requires manual import of root.css but allows full design token customization.
• Always run the guided installer in the root folder of your project to ensure correct paths.