UI System

A composable toolkit for building React UI systems.

UI System is not a component library. It's a set of composable packages for building your own — with responsive props, multi-dimensional theming, type-safe chainable APIs, and auto-generated Storybook stories.

Architecture

                     core
                   /      \
               attrs      unistyle      hooks
              /    \        |    \        |
       rocketstyle  \   elements  coolgrid  kinetic
            |        \                       |
       rocketstories  \              kinetic-presets

Packages

Styling & Layout

Package	Description
@vitus-labs/core	Shared utilities, styling engine bridge, theme context
@vitus-labs/styler	Lightweight CSS-in-JS engine (4.82 KB gz) — drop-in styled-components replacement
@vitus-labs/attrs	Immutable chainable default-props factory for React components
@vitus-labs/elements	Layout primitives — Element, Text, List, Overlay, Portal
@vitus-labs/unistyle	Responsive CSS engine — media queries, unit conversion, style processing
@vitus-labs/coolgrid	Bootstrap-inspired responsive grid with context-cascading config
@vitus-labs/hooks	28 React hooks — useHover, useBreakpoint, useFocusTrap, and more
@vitus-labs/rocketstyle	Multi-dimensional styling system with type-safe chains
@vitus-labs/rocketstories	Auto-generated Storybook stories from rocketstyle components

Animation

Package	Size (gzip)	Description
@vitus-labs/kinetic	3.4 KB	CSS-first animation — enter/exit, stagger, collapse, list reconciliation
@vitus-labs/kinetic-presets	3.7 KB	123 presets, 5 factories, 5 composition utilities for kinetic

Connectors

Package	Description
@vitus-labs/connector-styler	Connector for @vitus-labs/styler (recommended)
@vitus-labs/connector-emotion	Connector for Emotion
@vitus-labs/connector-styled-components	Connector for styled-components
@vitus-labs/connector-native	Connector for React Native

Quick Start

npm install @vitus-labs/core @vitus-labs/styler @vitus-labs/connector-styler @vitus-labs/elements @vitus-labs/rocketstyle

Initialize the CSS-in-JS engine at your app entry point:

import { init } from '@vitus-labs/core'
import connector from '@vitus-labs/connector-styler'

init({ ...connector, component: 'div', textComponent: 'span' })

Create a styled button using rocketstyle:

import rocketstyle from '@vitus-labs/rocketstyle'
import { Element } from '@vitus-labs/elements'

const Button = rocketstyle()({
  name: 'Button',
  component: Element,
})
  .attrs({ tag: 'button' })
  .theme({
    fontSize: 16,
    paddingX: 16,
    paddingY: 8,
    borderRadius: 4,
    color: '#fff',
    backgroundColor: '#0d6efd',
  })
  .states({
    danger: { backgroundColor: '#dc3545' },
    success: { backgroundColor: '#198754' },
  })
  .sizes({
    sm: { fontSize: 14, paddingX: 12, paddingY: 6 },
    lg: { fontSize: 18, paddingX: 20, paddingY: 10 },
  })

<Button label="Submit" />
<Button state="danger" size="lg" label="Delete" />

Design Philosophy

• Composition over inheritance — factory patterns and chainable APIs instead of class hierarchies
• Responsive-first — every layout prop accepts a single value, mobile-first array, or breakpoint object
• Type-safe chains — full TypeScript inference through .attrs(), .theme(), .states(), and other chain methods
• Zero-config defaults — sensible defaults everywhere, override only what you need

React Native

For React Native support, use @vitus-labs/connector-native instead of connector-styler:

npm install @vitus-labs/core @vitus-labs/connector-native @vitus-labs/elements @vitus-labs/rocketstyle

import { init } from '@vitus-labs/core'
import { View, Text } from 'react-native'
import { css, styled, provider, useTheme, createMediaQueries } from '@vitus-labs/connector-native'

init({ css, styled, provider, useTheme, component: View, textComponent: Text, createMediaQueries })

Requirements

• React >= 19
• TypeScript >= 5 (recommended)

License

MIT