Sipe Design System

Sipe Design System is a monorepo-based component library built to modernize and standardize the official Sipe website. Drawing inspiration from our existing design patterns, we're creating a robust, type-safe, and accessible component system that can be used across all Sipe projects.

This design system is built with:

• 📦 Monorepo structure for better package management
• 🎨 Consistent design tokens and patterns
• 💪 TypeScript for type safety
• 📚 Storybook for component documentation
• 🧪 Vitest for testing
• 🛠️ Modern build tooling

Quick Start

For local development, we use mise to unify the Node.js and pnpm versions.

mise install

If you see a trust warning, run this once and retry:

mise trust

Run this only for repositories you trust.

Add the activation command for your shell:

zsh:

echo 'eval "$(mise activate zsh)"' >> ~/.zshrc
source ~/.zshrc

bash:

echo 'eval "$(mise activate bash)"' >> ~/.bashrc
source ~/.bashrc

PowerShell:

echo 'mise activate pwsh | Out-String | Invoke-Expression' >> ~/.config/powershell/Microsoft.PowerShell_profile.ps1

Then install dependencies:

pnpm install

If you use VS Code or Cursor, we recommend these extensions:

• hverlin.mise-vscode for mise integration
• tombi-toml.tombi for mise.toml syntax highlighting and completion

Contributing

We maintain our component development roadmap in our GitHub Project Board. Before contributing, please check:

We warmly welcome contributions from the community, whether you're a Sipe team member or not! Your input helps make this design system better for everyone please read contributing guidelines for more details.

Contributors

License

Copyright (c) 2026 SIPE, Inc. See LICENSE for details.