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) 2024-2026 SIPE, Inc. See LICENSE for details.