Introduction
One design layer across every Simal product — tokens, cross-platform components, and the rules that keep them consistent.
One design layer across every Simal product — apps, the SaaS starter, and the marketing site. Tokens, cross-platform React Native components, and a Storybook workbench, shipped as one package.
Simal UI is a versioned system rather than a copy-paste collection. The public contract is shared; platform-specific implementations are encouraged when they provide better native behavior. Start with the principles, then use the component specification when adding or promoting a primitive.
The package is private and consumed as a git dependency, pinned by tag. It is never published to npm.
"@simal/ui": "git+ssh://git@github.com/rara-ventures/simal-ui.git#semver:^0.1.0"Entry points
Five, each with a different audience. Picking the wrong one is the most common way to end up with a duplicate uniwind instance, or a React Native import in a static site.
| Import | What it is | For |
|---|---|---|
@simal/ui | Primitives — composed, opinionated components | React Native / RN Web |
@simal/ui/nativewindui | The NativeWindUI tree. A parallel public surface, not internal | React Native / RN Web |
@simal/ui/tokens | Design tokens as TypeScript: palette, semantic tokens, withOpacity | Anything |
@simal/ui/styles.css | The Tailwind + uniwind entry | Metro / Storybook |
@simal/ui/tokens.css | The same tokens as plain custom properties, no Tailwind or uniwind | Web, no RN |
@simal/ui/fonts.css | Self-hosted @font-face declarations | Web, no RN |
styles.css, tokens.css and tokens.json are all generated from
src/theme/tokens.ts by pnpm theme:css, so they cannot drift from each other.
Three rules worth knowing first
A colour utility needs a matching --color-* variable
Without one the class compiles and silently does nothing. This is how
destructive stayed a no-op across ~126 usages in the source app for months.
Adding a colour means adding it to src/theme/tokens.ts and to
SEMANTIC_CSS in scripts/gen-theme-css.ts.
tailwind.config.js is dead code
Tailwind v4 is CSS-first. A colour's presence in that file is not evidence that it exists.
uniwind must be a peer dependency
A second instance anywhere in the tree breaks style resolution with no error at all — the build stays green and the components render unstyled.
Related repositories
| Repo | Role |
|---|---|
rara-ventures/simal-saas-starter | First consumer; uses this package from its first commit |
rara-ventures/simal-erp | Existing ERP app. Keeps its own copy (one-way fork) |
rara-ventures/simal-marketing | Astro marketing site; a tokens-only consumer |