Ritro UI logo

Installation

Get started with Ritro UI in your React project.

Prerequisites

Ritro UI is built for React based Frontend Projects. Make sure you have the following installed:

Installation

Install Ritro UI using your preferred package manager:

My React Project
$npm install @ritro-ui/react@0.0.18

Basic Usage

Import components from Ritro UI in your React application:

TSX
1import { RButton } from '@ritro-ui/react'
2

3  function App() {
4    return (
5      <RButton>Click me</RButton>
6    )
7  }

Component Structure

Ritro UI components are designed to be composable and flexible. Most components accept standard HTML attributes and custom props for customization.

For example, the Button component accepts all standard button attributes plus custom props for styles.

Theme Provider

Wrap your React/Nextjs application with the Ritro UI ThemeProvider to enable theming and dark mode:

Usage with React Project

TSX
1import { createRoot } from "react-dom/client";
2import "./index.css";
3import App from "./App.tsx";
4import { ThemeProvider } from "@ritro-ui/react";
5

6createRoot(document.getElementById("root")!).render(
7  <ThemeProvider attribute="data-theme" defaultTheme="light">
8    <App />
9  </ThemeProvider>
10);

Usage with Next (with App router) Project

TSX
1import type React from "react";
2import { AppThemeProvider } from "@/components/theme-provider";
3import "./globals.css";
4

5  export default function RootLayout({
6    children,
7  }: Readonly<{
8    children: React.ReactNode;
9  }>) {
10    return (
11      <AppThemeProvider>
12        {children}
13      </AppThemeProvider>
14    );
15  }

Next Steps

Now that you have Ritro UI installed, you can start using the components in your application. Check out the documentation for each component to learn more about their props and usage.

IntroductionBrowse Components