Custom React Components Library

A production-ready library of 6 reusable React components designed to accelerate UI development and improve developer experience. This project features live, interactive code examples with real-time editing capabilities to enhance documentation and onboarding.

🔗 Live demonstration

Features

• 6 Production-Ready Components: Badge, Banner, Card, Testimonial, Toast, and Tooltip components
• Live Code Editor: Interactive code examples using React Simple Code Editor with syntax highlighting
• Developer-Focused Documentation: Comprehensive examples with live editing capabilities
• Responsive Design: Mobile-first approach with modern CSS
• Modular Architecture: Clean, reusable component structure for easy integration

Technologies Used

• Frontend: JavaScript, React
• Code Editor: React Simple Code Editor, Highlight.js
• Styling: CSS
• Build Tool: Vite

Component Library

The library includes the following components:

1. Badge - Visual indicators for status, notifications, and labels
2. Banner - Attention-grabbing alert and notification banners
3. Card - Flexible content containers with consistent styling
4. Testimonial - Customer feedback and review components
5. Toast - Temporary notification messages with auto-dismiss
6. Tooltip - Contextual information overlays on hover

Run Locally

Install dependencies and start the development server:

npm install
npm run dev

The application will be available at http://localhost:5173

Project Structure

src/
├── components-library/   # Reusable component library
│   ├── badge/
│   ├── banner/
│   ├── card/
│   ├── testimonial/
│   ├── toast/
│   └── tooltip/
├── pages/               # Documentation pages for each component
├── layouts/             # Application layout components
└── styles/              # Component and page styles

Use Cases

• Rapid prototyping and development
• Consistent UI across applications
• Learning resource for React developers
• Component reference and documentation

---

Status: Active