# React web installation

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

## 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.


```bash
npm 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.


```tsx
import { createRoot } from "react-dom/client";
import { KivoraProvider } from "@kivora/nextjs";
import "@kivora/nextjs/styles.css";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <KivoraProvider colorMode="system">
    <App />
  </KivoraProvider>
);
```


## Your first web component


```tsx
import { Button } from "@kivora/nextjs";

export default function App() {
  return <Button onClick={() => console.log("Create project")}>Create project</Button>;
}
```


## 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.

- [Installation with Next.js](https://kivora.pro/docs/instalacion)

- [Web package on npm](https://www.npmjs.com/package/@kivora/nextjs)


```tsx
@import "@kivora/nextjs/tailwind.css";
```


Source: https://kivora.pro/docs/instalacion-react