Getting Started

Installation

Install the core packages:

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

Configuration

Initialize the CSS-in-JS engine at the root of your application. This connects the styling engine to all Vitus Labs components.

src/init.ts

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

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

@vitus-labs/connector-styler exposes css, styled, provider, useTheme, keyframes, and createGlobalStyle as named exports (no default export). The namespace import above spreads all of them into init() in one go.

Import this file early in your app entry point (e.g., _app.tsx, layout.tsx, or main.tsx).

Framework Integration

Next.js (App Router)

src/app/layout.tsx

import '@/init' // Initialize vitus-labs

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Vite

src/main.tsx

import './init' // Initialize vitus-labs
import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root')!).render(<App />)

React Native (Expo)

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

src/init.ts

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,
})

App.tsx

import './src/init'
import { Element } from '@vitus-labs/elements'

export default function App() {
  return (
    <Element padding={24}>
      Hello from React Native!
    </Element>
  )
}

Key differences from web setup:

Use connector-native instead of connector-styler
Set component: View and textComponent: Text (RN primitives instead of HTML tags)
Pass createMediaQueries for responsive breakpoint support
No @vitus-labs/styler needed — the native connector handles CSS parsing internally

See the React Native connector docs for details on how CSS template literals are converted to style objects.

Your First Component

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

function Card({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <Element
      tag="article"
      padding={24}
      style={{ borderRadius: 8, border: '1px solid #e0e0e0' }}
    >
      <Element tag="h2" marginBottom={12}>
        {title}
      </Element>
      {children}
    </Element>
  )
}

Try It Live

Edit the code below to see changes in real time:

function Greeting() {
const [name, setName] = React.useState('World')

return (
  <div style={{ fontFamily: 'system-ui', padding: 16 }}>
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Enter your name"
      style={{
        padding: '8px 12px',
        borderRadius: 6,
        border: '1px solid #ccc',
        fontSize: 14,
        marginBottom: 12,
        display: 'block',
        width: '100%',
        boxSizing: 'border-box',
      }}
    />
    <div style={{
      padding: '12px 16px',
      borderRadius: 8,
      background: '#f0f4ff',
      color: '#1a365d',
      fontWeight: 500,
    }}>
      Hello, {name}!
    </div>
  </div>
)
}

render(<Greeting />)

What's Next?

Learn about the styling engine — high-performance CSS-in-JS
Explore Elements — base UI primitives
Build composable components with Rocketstyle
Add animations with Kinetic
Set up React Native support

On this page