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 connector from '@vitus-labs/connector-styler'

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

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