Build, style
& ship
React
apps faster.
A modular React ecosystem — UI primitives, a 4.82 KB CSS-in-JS engine (gzipped), declarative animations, responsive layouts, and developer tooling. Shared workspace:* deps so every package in your monorepo stays in sync.
One ecosystem,
15 packages.
Type-safe end to end
Generic inference on dimensions, themes, and prop shapes. Iterator/List narrow per call-site mode; rocketstyle preserves dimension types through chain methods.
Composable by design
Chainable factories — .attrs(), .theme(), .styles(), .compose(). priorityAttrs → attrs → explicit props (last wins). Marker-based detection (IS_ATTRS).
Swap the engine
Same component code runs on built-in Styler (4.82 KB), styled-components, or Emotion via a single connector swap. RN target via connector-native.
Responsive built-in
Layout props accept scalars, arrays, or breakpoint objects. Mobile-first via the unistyle responsive resolver — no media-query boilerplate.
Batteries included
Shared rolldown bundler, vitest config (90% coverage default), biome lint, and storybook 10 preset — published as separate @vitus-labs/tools-* packages.
4.82 KB CSS engine
Static/dynamic split, React 19 <style precedence> SSR, useInsertionEffect injection, FNV-1a class hash, CI-gated competitive perf bench against Emotion + styled-components.
Init in one line.
Compose primitives.
The whole stack in three imports.
Wire @vitus-labs/core with any connector, then compose primitives. The Styler engine caches static templates on a single-entry hot path with a WeakMap fallback.
- Element — base primitive · 170+ CSS props
- Text — typography, polymorphic tag
- List — Iterator with simple/object/children modes
- Rocketstyle — dimensions, theming, light/dark
- Kinetic — Transition · Stagger · TransitionGroup · 123 presets
import { init } from '@vitus-labs/core' import * as connector from '@vitus-labs/connector-styler' import { Element, Text, List } from '@vitus-labs/elements' // One-line setup init({ ...connector, component: 'div', textComponent: 'span' }) function FeatureCard({ icon, title, items }) { return ( <Element tag="article" direction="rows" gap={16} padding={24}> <Element beforeContent={icon} gap={8} alignY="center"> <Text tag="h3">{title}</Text> </Element> <List data={items} gap={4} direction="rows" /> </Element> ) }
15 packages,
built to compose.
Install the engine.
Compose the rest.
Three packages are enough to render: core, a connector, and elements. Add styler-backed adapters and you have a typed component layer on top of a 4.82 KB CSS-in-JS runtime. MIT licensed.
# core + engine + primitives $ npm i @vitus-labs/core \ @vitus-labs/connector-styler \ @vitus-labs/elements # peer: react ^19 ✓ resolved 15 workspace packages