Skip to main content

BlendX UI Component Library

A comprehensive React component library for building modern, accessible, and responsive user interfaces.

Installation​

npm install @blendx-ui --save

Basic Usage​

import React from 'react';
import { Button, Modal } from '@blendx-ui';

function App() {
  const [showModal, setShowModal] = useState(false);
  
  return (
    <div>
      <Button 
        variant="primary" 
        onClick={() => setShowModal(true)}
      >
        Open Modal
      </Button>
      
      <Modal
        show={showModal}
        onHide={() => setShowModal(false)}
      >
        <Modal.Header closeButton>
          <Modal.Title>Example Modal</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          This is a BlendX UI Modal!
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowModal(false)}>
            Close
          </Button>
          <Button variant="primary" onClick={handleSave}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

Component Documentation​

Each component has its own documentation with detailed props, examples, and usage patterns. Below is a list of the main components in the library:

Basic Components​

  • Alert - Provide contextual feedback messages
  • Button - Interactive elements for actions and navigation
  • IconButton - Button with icon support and tooltip
  • CloseButton - Button for closing elements
  • Dropdown - Toggleable menu for selecting values
  • Nav - Basic navigation component
  • Navbar - Responsive navigation header
  • Pagination - Navigation for paginated content
  • TabMenu - Tab-based navigation
  • Tabs - Tabbed interface component

Form Components​

Overlay Components​

  • Modal - Dialog windows for user interaction
  • Popover - Content that appears on hover/click
  • Tooltip - Brief helpful text on hover
  • Toast - Lightweight notifications

Layout Components​

  • Container - Content container with responsive behavior
  • Layout - Grid system with rows and columns
  • Card - Flexible content container
  • Stack - Vertical or horizontal stacking of elements

Feedback Components​

Additional Components​

  • Table - Enhanced table component
  • DataTable - Advanced data table with sorting, filtering
  • Carousel - Slideshow component

Hooks​

The library also includes several custom hooks:

Accessibility​

BlendX UI is built with accessibility in mind. All components:

  • Follow WAI-ARIA guidelines
  • Support keyboard navigation
  • Include proper labeling and ARIA attributes
  • Have appropriate color contrast
  • Support screen readers

Browser Support​

BlendX UI supports all modern browsers:

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Opera (latest)

Contributing​

For information on contributing to BlendX UI, please see the Contributing Guide.

License​

This project is licensed under the MIT License.