rr-react-ui-library

A comprehensive React UI component library featuring forms, layouts, navigation, and UI elements, built with TypeScript, Tailwind CSS, and documented with Storybook.

Installation

npm install rr-react-ui-library

Peer Dependencies

This library requires the following peer dependencies:

• react: ^19.2.0
• react-dom: ^19.2.0
• react-router: ^7.11.0

Usage

First, import the global styles in App.tsx / main.tsx:

import 'rr-react-ui-library/style.css';

Then, import and use components:

import {
  Row,
  Card,
  Input,
  Select,
  Button,
  CardBody,
  CardFooter,
  CardHeader,
} from 'rr-react-ui-library';

import 'rr-react-ui-library/style.css';

function App() {
  return (
    <Card>
      <CardHeader>
        <div className="text-2xl font-bold my-2">Card header</div>
      </CardHeader>
      <CardBody className="my-4">
        <Row cols={2}>
          <Input
            value=""
            label="Input text"
            onChange={() => {}}
            placeholder="Enter text"
          />
          <Select
            value=""
            label="Select"
            onChange={() => {}}
            placeholder="Please Select"
            options={[{ value: 'option1', label: 'Option 1' }]}
          />
        </Row>
      </CardBody>
      <CardFooter>
        <div className="flex justify-end my-3">
          <Button>Click me</Button>
        </div>
      </CardFooter>
    </Card>
  );
}

Components

Forms

• Input
• Switch
• Select
• Checkbox
• Textarea
• RadioGroup
• MultiSelect

Layouts

• Container
• AdminLayout

Navigation

• TopNavbar
• SideNavbar

UI Elements

• Card
• Modal
• Badge
• Table
• Button
• Tooltip
• Pagination
• ActivityFeed
• ActivityItem
• GlobalLoader
• InlineLoader
• ThemeSwitcher

Pages

• LoginPage

Development

Prerequisites

• Node.js (v20 or higher)
• npm or yarn

Setup

1. Clone the repository
2. Install dependencies: npm install
3. Start development server: npm run dev
4. Run Storybook: npm run storybook

Scripts

• npm run dev - Start Vite dev server
• npm run lint - Run ESLint
• npm run preview - Preview the build
• npm run build - Build the project (TypeScript + Vite)
• npm run format - Format code with Prettier
• npm run storybook - Start Storybook
• npm run build:storybook - Build Storybook for production
• npm run test - Run tests
• npm run build:lib - Build the library

Project Structure

rr-react-ui-library/
├── src/
│   ├── components/     # UI components
│   ├── hooks/          # Custom hooks
│   ├── utils/          # Utility functions
│   ├── context/        # React contexts
│   ├── types/          # TypeScript types
├── .storybook/         # Storybook configuration
├── public/             # Static assets
└── dist/               # Build output

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add stories for new components
5. Run tests
6. Submit a pull request

License

MIT

Author

Hari Narayan

Repository

https://github.com/Hari-Narayan/rr-react-ui-library.git

Bugs

https://github.com/Hari-Narayan/rr-react-ui-library/issues

Keywords

react, ui, component