Skip to main content

​
Requirements

Before installing Kivora React, ensure you meet the following requirements:
Peer DependencyVersion
react≥ 18
react-dom≥ 18
Kivora React requires React 18 or higher to support concurrent features and improved hooks behavior.

​
Install the Package

Choose your preferred package manager to install Kivora React: 
npm install @kivora/react
This will install @kivora/react along with its internal dependency @kivora/core, which provides the design system and type definitions.

​
Import Global Styles

Kivora React uses CSS design tokens for theming and dark mode support. Import the global stylesheet once at the root of your application: 
import '@kivora/react/styles';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My App',
  description: 'Built with Kivora React',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
Only import the stylesheet once in your application. Importing it multiple times can cause style conflicts and increase bundle size.

​
Optional: Setup Toast Notifications

If you plan to use the toast notification system, wrap your app with the ToastProvider component: 
import { ToastProvider } from '@kivora/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ToastProvider />
        {children}
      </body>
    </html>
  );
}
The ToastProvider uses Sonner under the hood for beautiful, accessible toast notifications.

​
Verify Installation

Create a simple test component to verify everything is working: 
import { Button } from '@kivora/react';

export default function TestPage() {
  return (
    <div>
      <h1>Kivora React is installed!</h1>
      <Button label="Click me" variant="primary" />
    </div>
  );
}
If you see a styled button when you run your app, you’re all set!

​
TypeScript Configuration

Kivora React is built with TypeScript and ships with type definitions. No additional @types packages are needed. If you’re using TypeScript, ensure your tsconfig.json includes: 
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true
  }
}

​
Bundle Optimization

Kivora React is tree-shakeable by default. Modern bundlers like Vite, Webpack 5, and Next.js will automatically remove unused components and hooks from your production bundle.
Import components individually to ensure optimal tree-shaking:
import { Button, Input, Badge } from '@kivora/react';
This is more efficient than importing everything with import *.

​
Next Steps

Quick Start

Build your first component in 5 minutes

Theming Guide

Customize colors and design tokens

Build docs developers (and LLMs) love

Get started for freeTalk to us