One system for every module
Tourism Suite has two modules today and eight to ten planned. They all install the same
versioned package, @beyul/sulmu-ui, so a button looks and behaves the same everywhere.
Sulmu UI
The Tourism Suite design system. React components built on Ark UI and Panda CSS, mirrored one to one by the Sulmu UI Figma library.
Figma and code agree
Tokens are the Figma variables, and component props are the Figma variant properties:
variant=primary, size=sm means the same thing in both places.
Accessible behaviour
Dialogs, menus, selects, tabs and the rest are built on Ark UI, which handles focus, keyboard interaction and ARIA.
No runtime styling
Styles are compiled to one stylesheet with the su prefix and no reset, so the library can
sit next to existing CSS (and Chakra) during a migration.
Where to go next
Section titled “Where to go next”InstallationAdd the package from GitHub Packages with npm, pnpm or Yarn.
Why Sulmu UIWhy a separate library, and the decisions behind it.
FoundationsColours, typography, spacing, radius, shadows and icons.
GuidesExtend a component, add a new one, release, migrate from Chakra.