Getting Started

Learn how to install and start using Rohit UI in your React projects.

Installation

Install Rohit UI using npm or yarn:

# Using npm
npm install rohit-ui

# Using yarn
yarn add rohit-ui

Setup

Wrap your application with the RohitUIProvider to enable themes:

import React from 'react';
import { RohitUIProvider } from 'rohit-ui';

function App() {
  return (
    <RohitUIProvider theme="windows98">
      /* Your app components */
    </RohitUIProvider>
  );
}

export default App;

Basic Usage

Import and use any component from Rohit UI:

import React from 'react';
import { Button, Window, TextField } from 'rohit-ui';

function MyComponent() {
  return (
    <Window title="My First Rohit UI App">
      <TextField label="Enter your name" placeholder="Type here..." />
      <Button onClick={() => alert('Hello from Rohit UI!')}>
        Click Me
      </Button>
    </Window>
  );
}

Enabling Rohit Mode

Each component has a special "Rohit Mode" that can be enabled with the rohitMode prop:

<Button rohitMode>Unnecessarily Complicated Button</Button>

// You can also enable Rohit Mode globally
<RohitUIProvider theme="windows98" globalRohitMode>
  /* All components will now have Rohit Mode enabled */
</RohitUIProvider>

Theming

Rohit UI comes with two built-in themes:

windows98: The classic Windows 98 look
rohitSpecial: A funky, colorful variation

You can switch between themes:

// Windows 98 theme (default)
<RohitUIProvider theme="windows98">
  /* Your app */
</RohitUIProvider>

// Rohit Special theme
<RohitUIProvider theme="rohitSpecial">
  /* Your app */
</RohitUIProvider>

See the Themes page for more details on customizing themes.