React web installation

Use web components in a React application without Next.js.

kivoraWe provide the pieces.
The idea is still yours.

React web without Next.js

For a React application rendered in the browser, use @kivora/nextjs. Its peer dependencies require React and React DOM 18+. Use a bundler that can import CSS, such as the one in your existing React project.

@kivora/init 0.1.1 has no React/Vite option: do not select nextjs if your project does not use that framework. This integration is manual. You do not need @kivora/native for browser rendering.

Terminal

1npm install @kivora/nextjs

Import styles and mount the provider

Import CSS once at your application's entry point and wrap App in KivoraProvider. Preserve existing providers. The example assumes index.html contains an element with id="root".

styles.css includes library utilities and tokens: you do not need Tailwind for these components. Add your styles after Kivora CSS. A client-only application does not need the use client directive.

src/main.tsx

1import { createRoot } from "react-dom/client";
2import { KivoraProvider } from "@kivora/nextjs";
3import "@kivora/nextjs/styles.css";
4import App from "./App";
5
6createRoot(document.getElementById("root")!).render(
7  <KivoraProvider colorMode="system">
8    <App />
9  </KivoraProvider>
10);

Your first web component

src/App.tsx

1import { Button } from "@kivora/nextjs";
2
3export default function App() {
4  return <Button onClick={() => console.log("Create project")}>Create project</Button>;
5}

If you already use Tailwind

If your bundler already compiles Tailwind 4.1+, use @kivora/nextjs/tailwind.css instead of styles.css. Keep your bundler's compiler configuration. Do not import both stylesheets or copy next.config.ts into an application that does not use Next.js.

src/styles.css

1@import "@kivora/nextjs/tailwind.css";

Continue with Button or explore the web component catalog.