Frameworks (React, Vue, Svelte, Solid)

This page shows how to use BaroCSS in popular frameworks. The goal is minimal setup and real-time styling without build steps.

Common Setup

For a plain HTML page without a bundler, load the published 0.11.2 browser module from the CDN. Place the script after the page body exists:

<script type="module">
  import { baroStart } from 'https://cdn.jsdelivr.net/npm/@barocss/browser@0.11.2/dist/cdn/barocss.js';
  baroStart();
</script>

For the framework examples below, install @barocss/browser@0.11.2 in the application so its package import resolves:

pnpm add @barocss/browser@0.11.2

React

import { useEffect } from 'react'
import { BrowserRuntime } from '@barocss/browser'

export default function App() {
  useEffect(() => {
    const rt = new BrowserRuntime()
    rt.observe(document.body, { scan: true })
    return () => rt.destroy?.()
  }, [])

  return (
    <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
      Hello
    </button>
  )
}

Vue

<script setup>
import { onMounted } from 'vue'
import { BrowserRuntime } from '@barocss/browser'

onMounted(() => {
  const rt = new BrowserRuntime()
  rt.observe(document.body, { scan: true })
})
</script>

<template>
  <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
    Hello
  </button>
</template>

Svelte

<script>
  import { onMount } from 'svelte'
  import { BrowserRuntime } from '@barocss/browser'
  onMount(() => {
    const rt = new BrowserRuntime()
    rt.observe(document.body, { scan: true })
  })
</script>

<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
  Hello
</button>

Solid

import { onMount } from 'solid-js'
import { BrowserRuntime } from '@barocss/browser'

export default function App() {
  onMount(() => {
    const rt = new BrowserRuntime()
    rt.observe(document.body, { scan: true })
  })
  return (
    <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Hello</button>
  )
}

That's it. Use utility classes directly; BaroCSS generates CSS on demand in all frameworks above.