react-components-lib

A personal proof-of-concept project showcasing reusable, professional React UI components.
Build beautiful, responsive, and accessible user interfaces quickly with a consistent design system.

🚀 Live Demo & Docs

• Component Showcase: Live Demo
• Full Documentation (Storybook): Storybook Library

📦 Installation

npm install react-components-lib.eaa
# or
yarn add react-components-lib.eaa

🛠 Usage

Import and use components directly in your React app:

import { Button } from 'react-components-lib.eaa';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
    </div>
  );
}

✨ Key Features

• Reusable & Customizable – Designed for flexibility across apps
• Responsive & Accessible – Works seamlessly across devices
• Atomic Design Structure – Atoms, Molecules, Organisms for scalability
• Easy Theming & Styling – Integrates with your existing design system
• Comprehensive Docs – Storybook examples for every component
• Developer-Friendly – Built with TypeScript for type safety

📖 Components

Atoms

• Badge – Status indicators & categorization
• Button – Multiple variants, sizes, and states
• FormControl – Flexible form input wrapper
• Grid – Responsive layout system
• Icon – Vector-based icons
• Loader – Inline/fullscreen loading indicators
• Tooltip – Hover tooltips with accessibility

Molecules

• Accordion – Expand/collapse sections
• Alert – User feedback messages
• DatePicker – Date selection
• Dropdown – Single/multi-select menu with filtering
• Panel – Group and highlight content

Organisms

• Modal – Dialog overlays for content
• Tabs – Tabbed navigation for multiple views
• DataTable – Sort, filter, paginate, and validate large datasets

🗓 Changelog

See the full Changelog for detailed updates.

🎨 Design Philosophy

This library embraces Atomic Design principles:

• Atoms → Small, independent UI units
• Molecules → Compositions of atoms
• Organisms → Complex, reusable sections

This ensures consistency, scalability, and maintainability across projects.

📬 Support

For inquiries or contributions, reach out at:
[email protected]

📄 License

This is a personal project. All rights reserved.

This project was created exclusively for Standard Chartered Bank. All rights are reserved.

The source code, documentation, and all related materials are intended solely for internal use by Standard Chartered Bank and its authorized personnel. Any reproduction, distribution, modification, or use outside of Standard Chartered Bank is strictly prohibited without prior written consent.