Master Components React TypeScript

A comprehensive React TypeScript component library featuring modern, accessible, and customizable UI components for building professional web applications.

🚀 Features

• 20+ Production-Ready Components - From basic inputs to complex data tables
• TypeScript Support - Full type safety with comprehensive type definitions
• Modern Design System - Consistent styling with SCSS modules
• Accessibility First - Built with accessibility best practices
• Highly Customizable - Extensive styling and behavior customization options
• Tree Shakeable - Import only what you need
• React 18+ Compatible - Built for modern React applications

📦 Installation

npm install master-components-react-ts

🎯 Quick Start

import React from 'react'
import { MainButton, FormInput, Table, DatePicker } from 'master-components-react-ts'
import 'master-components-react-ts/style.css'

function App() {
  return (
    <div>
      <FormInput label="Email" placeholder="Enter your email" type="email" required />
      <MainButton label="Submit" buttonType="primary" onClick={() => console.log('Clicked!')} />
    </div>
  )
}

🧩 Components

Form Components

• FormInput - Text input with validation states, slots, and multiple types
• Textarea - Multi-line text input with character counting
• Checkbox - Customizable checkbox with different styles
• Radio - Radio button groups with custom styling
• Toggle - Switch/toggle component with multiple sizes
• Dropdown - Advanced dropdown with search, multiselect, and tree support
• DatePicker - Date selection with range and dual picker modes
• TimePicker - Time selection with range support
• Slider - Range slider with single and dual handle support
• FileUploader - Drag & drop file upload component

Layout & Navigation

• Table - Feature-rich data table with sorting, pagination, and row actions
• TreeNode - Hierarchical tree component with checkboxes
• Tabs - Tab navigation component
• Popup - Modal and drawer popup system
• ActionDropdown - Context menu dropdown for actions

Feedback & Status

• MainButton - Primary button component with loading states
• InlineLoading - Loading indicators with success/error states
• Skeleton - Content loading placeholders
• NotificationToast - Toast notification system
• Tooltip - Contextual help tooltips

Advanced Components

• FilterWithTags - Advanced filtering interface with multiple input types
• DropdownPill - Pill-style dropdown selector

📚 Documentation

For detailed documentation, examples, and API references, visit our documentation website:

🌐 components.nebi.com

The documentation includes:

• Interactive component playground
• Complete API documentation
• Usage examples and best practices
• Customization guides
• Accessibility guidelines

🎨 Styling

The library uses SCSS modules for styling. Import the main CSS file to get started:

import 'master-components-react-ts/style.css'

Customization

Components support extensive customization through props:

<MainButton label="Custom Button" size="lg" colorType="positive" buttonType="secondary" leftSlot={<Icon />} buttonStyle={{ borderRadius: '8px' }} />

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import { FormInputProps, TableProps, DropdownItemType, ColumnType } from 'master-components-react-ts'

interface MyComponentProps {
  inputProps: FormInputProps
  tableData: ColumnType[]
}

📋 Component Examples

Advanced Table with Actions

import { Table, ColumnType } from 'master-components-react-ts'

const columns: ColumnType[] = [
  { key: 'name', label: 'Name', visible: true },
  { key: 'email', label: 'Email', visible: true },
  {
    key: 'status',
    label: 'Status',
    visible: true,
    render: (row) => (
      <span className={`status-${row.status}`}>
        {row.status}
      </span>
    )
  }
]

<Table
  uniqueKey="id"
  columns={columns}
  data={userData}
  withSortIcons
  showPagination
  withSelectAll
  actionButtons={[
    { text: 'Delete', onClick: handleDelete },
    { text: 'Edit', onClick: handleEdit }
  ]}
  onRowClick={handleRowClick}
/>

Form with Validation

import { FormInput, MainButton, Checkbox } from 'master-components-react-ts'

<FormInput
  label="Email Address"
  placeholder="Enter your email"
  type="email"
  required
  helperText="We'll never share your email"
  inputState={{ error: hasError }}
  onChange={setEmail}
/>

<Checkbox
  checked={agreeToTerms}
  change={setAgreeToTerms}
  label="I agree to the terms and conditions"
/>

<MainButton
  label="Submit"
  buttonType="primary"
  loading={isSubmitting}
  disabled={!isFormValid}
  onClick={handleSubmit}
/>

Advanced Dropdown with Search

import { Dropdown, DropdownItemType } from 'master-components-react-ts'

const countryData: DropdownItemType[] = [
  { id: 1, label: 'United States' },
  { id: 2, label: 'Canada' },
  { id: 3, label: 'United Kingdom' }
]

<Dropdown
  label="Select Country"
  placeholder="Choose a country"
  data={countryData}
  withInput
  withMultiselect
  withApply
  onSelect={handleCountrySelect}
  onApply={handleApply}
/>

🎯 Key Features

Table Component

• Sorting - Click headers to sort data
• Pagination - Numbered and simple pagination styles
• Row Selection - Single and multi-row selection
• Row Actions - Custom actions per row
• Column Configuration - Show/hide and reorder columns
• Custom Rendering - Render custom content in cells
• Tooltips - Row-level tooltips for additional information

Form Components

• Validation States - Error, success, and loading states
• Custom Slots - Left, right, and helper slots for icons/content
• Multiple Input Types - Text, email, password, number, etc.
• Accessibility - Full keyboard navigation and screen reader support

Styling System

• SCSS Modules - Scoped styling to prevent conflicts
• CSS Custom Properties - Easy theme customization
• Responsive Design - Mobile-first responsive components
• Dark Mode Ready - Components support dark theme variants

🔄 Migration Guide

If you're upgrading from a previous version, check the migration guide on our documentation site.

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

• Documentation: components.nebi.com
• Issues: Report bugs and request features on our documentation site
• Community: Join our community discussions

Built with ❤️ for the React community. For the latest updates and announcements, visit components.nebi.com.