UnisysUI

A comprehensive React UI component library with modern design and Material UI inspired styling. UnisysUI provides a complete set of reusable components for building beautiful web applications.

🚀 Features

• 20+ Components: Buttons, Inputs, Tables, Menus, Modals, and more
• Material UI Inspired: Clean, modern design following Material Design principles
• TypeScript Ready: Full TypeScript support with type definitions
• Styled Components: CSS-in-JS styling with theme support
• Tree Shaking: Import only what you need
• Responsive: Mobile-first responsive design
• Accessible: ARIA compliant and keyboard navigation support
• Customizable: Extensive theming and customization options

📦 Installation

1npm install unisysui styled-components

Peer Dependencies

Make sure you have these peer dependencies installed:

1npm install react react-dom styled-components

🎯 Quick Start

1import React from 'react';
2import { Button, Input, Table, ToasterProvider, Toaster } from 'unisysui';
3
4function App() {
5  return (
6    <ToasterProvider>
7      <div>
8        <Button variant="primary">Click me!</Button>
9        <Input label="Your name" placeholder="Enter your name" />
10        <Toaster />
11      </div>
12    </ToasterProvider>
13  );
14}
15
16export default App;

📚 Components

🔘 Form Components

• Button - Multiple variants (primary, secondary, tertiary) and sizes
• Input - Text input with validation and icons
• Textarea - Multi-line text input
• Checkbox - Styled checkbox with custom designs
• RadioButton - Radio button groups
• ToggleSwitch - Modern toggle switches
• Dropdown - Select dropdown with search
• MultiSelect - Multi-selection dropdown with checkboxes
• NumericInput - Number input with increment/decrement controls
• LookupField - Multi-select with chips and search functionality

📊 Data Display

• Table - Advanced data table with sorting, filtering, pagination
• Avatar - User avatars with automatic color generation
• StarRating - Interactive star rating component
• Pagination - Page navigation component

🧭 Navigation

• ListBox - Transfer component for moving items between lists

📋 Layout & Feedback

• Accordion - Collapsible content sections
• Tooltip - Contextual information tooltips
• Toaster - Toast notifications with multiple types
• Loader - Loading indicators and progress bars

🎛️ Interactive

• Slider - Range and value sliders
• HybridSlider - Advanced slider with multiple handles

📅 Date & Time

• DatePicker - Date selection with calendar interface

💻 Component Examples

Button Component

1import React from 'react';
2import { Button } from 'unisysui';
3
4const ButtonExample = () => {
5  return (
6    <div style={{ display: 'flex', gap: '12px' }}>
7      <Button variant="primary" onClick={() => alert('Primary clicked!')}>
8        Primary
9      </Button>
10      <Button variant="secondary" size="lg">
11        Secondary Large
12      </Button>
13      <Button variant="tertiary" disabled>
14        Disabled
15      </Button>
16    </div>
17  );
18};

Input Component

1import React, { useState } from 'react';
2import { Input } from 'unisysui';
3
4const InputExample = () => {
5  const [name, setName] = useState('');
6  const [email, setEmail] = useState('');
7  
8  return (
9    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
10      <Input
11        label="Full Name"
12        placeholder="Enter your name"
13        value={name}
14        onChange={(e) => setName(e.target.value)}
15        fullWidth
16      />
17      <Input
18        label="Email"
19        type="email"
20        placeholder="Enter your email"
21        value={email}
22        onChange={(e) => setEmail(e.target.value)}
23        error={!email.includes('@') && email ? 'Invalid email' : ''}
24        fullWidth
25      />
26    </div>
27  );
28};

Checkbox Component

1import React, { useState } from 'react';
2import { Checkbox } from 'unisysui';
3
4const CheckboxExample = () => {
5  const [checked, setChecked] = useState(false);
6  const [indeterminate, setIndeterminate] = useState(true);
7  
8  return (
9    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
10      <Checkbox
11        label="Accept terms and conditions"
12        checked={checked}
13        onChange={setChecked}
14      />
15      <Checkbox
16        label="Indeterminate state"
17        indeterminate={indeterminate}
18        onChange={() => setIndeterminate(!indeterminate)}
19      />
20      <Checkbox
21        label="Disabled checkbox"
22        disabled
23      />
24    </div>
25  );
26};

Table Component

1import React, { useState } from 'react';
2import { Table } from 'unisysui';
3
4const TableExample = () => {
5  const columns = [
6    { key: 'name', title: 'Name', sortable: true },
7    { key: 'email', title: 'Email' },
8    { key: 'role', title: 'Role' }
9  ];
10
11  const data = [
12    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Developer' },
13    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Designer' },
14    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Manager' }
15  ];
16
17  return (
18    <Table
19      columns={columns}
20      data={data}
21      selectable
22      showPagination
23      pageSize={10}
24      onRowSelect={(selected) => console.log('Selected:', selected)}
25    />
26  );
27};

Toast Notifications

1import React from 'react';
2import { ToasterProvider, Toaster, useToaster, Button } from 'unisysui';
3
4const ToastExample = () => {
5  const { addToast } = useToaster();
6
7  const showSuccessToast = () => {
8    addToast({
9      type: 'success',
10      title: 'Success!',
11      message: 'Operation completed successfully.',
12      duration: 5000
13    });
14  };
15
16  const showErrorToast = () => {
17    addToast({
18      type: 'failed',
19      title: 'Error!',
20      message: 'Something went wrong.',
21      duration: 5000
22    });
23  };
24
25  return (
26    <div style={{ display: 'flex', gap: '12px' }}>
27      <Button onClick={showSuccessToast}>Success Toast</Button>
28      <Button onClick={showErrorToast}>Error Toast</Button>
29    </div>
30  );
31};
32
33// Wrap your app with ToasterProvider
34const App = () => (
35  <ToasterProvider>
36    <ToastExample />
37    <Toaster />
38  </ToasterProvider>
39);

DatePicker Component

1import React, { useState } from 'react';
2import { DatePicker, LocalizationProvider, AdapterNativeDate } from 'unisysui';
3
4const DatePickerExample = () => {
5  const [selectedDate, setSelectedDate] = useState(new Date());
6
7  return (
8    <LocalizationProvider dateAdapter={AdapterNativeDate}>
9      <DatePicker
10        selected={selectedDate}
11        onChange={setSelectedDate}
12        placeholder="Select a date"
13      />
14    </LocalizationProvider>
15  );
16};

Dropdown Component

1import React, { useState } from 'react';
2import { Dropdown } from 'unisysui';
3
4const DropdownExample = () => {
5  const [selectedValue, setSelectedValue] = useState('');
6  
7  const options = [
8    { value: 'react', label: 'React' },
9    { value: 'vue', label: 'Vue.js' },
10    { value: 'angular', label: 'Angular' }
11  ];
12
13  return (
14    <Dropdown
15      label="Select Framework"
16      placeholder="Choose a framework"
17      options={options}
18      value={selectedValue}
19      onChange={setSelectedValue}
20      width="300px"
21    />
22  );
23};

Accordion Component

1import React from 'react';
2import { Accordion } from 'unisysui';
3
4const AccordionExample = () => {
5  return (
6    <div style={{ maxWidth: '600px' }}>
7      <Accordion title="What is UnisysUI?" defaultExpanded>
8        UnisysUI is a comprehensive React component library designed for 
9        enterprise applications.
10      </Accordion>
11      
12      <Accordion title="Installation">
13        Install with: npm install unisysui styled-components
14      </Accordion>
15      
16      <Accordion title="Features">
17        <ul>
18          <li>20+ Components</li>
19          <li>TypeScript Support</li>
20          <li>Material Design Inspired</li>
21        </ul>
22      </Accordion>
23    </div>
24  );
25};

🎨 Theming

All components support theming through styled-components ThemeProvider:

1import React from 'react';
2import { ThemeProvider } from 'styled-components';
3import { theme, Button } from 'unisysui';
4
5const customTheme = {
6  ...theme,
7  colors: {
8    ...theme.colors,
9    primary: '#003134',
10    accent: '#00D084',
11  },
12};
13
14function App() {
15  return (
16    <ThemeProvider theme={customTheme}>
17      <Button variant="primary">Themed Button</Button>
18    </ThemeProvider>
19  );
20}

🔧 Advanced Usage

Individual Component Imports

For better tree-shaking, you can import components individually:

1import Button from 'unisysui/components/Button';
2import Input from 'unisysui/components/Input';

Custom Styling

1import styled from 'styled-components';
2import { Button } from 'unisysui';
3
4const CustomButton = styled(Button)`
5  background: linear-gradient(45deg, #003134 30%, #00D084 90%);
6  border-radius: 8px;
7  padding: 12px 24px;
8`;

🎯 Toast Types & Colors

The Toaster component supports 4 types with specific colors:

• Success: #A6F5D6 - For successful operations
• Failed: #FAADAC - For error messages
• Attention: #FFEBAD - For warnings
• Info: #CCFFFF - For informational messages

📱 Required Providers

Some components require specific providers:

ToasterProvider (Required for Toaster)

1import { ToasterProvider, Toaster } from 'unisysui';
2
3function App() {
4  return (
5    <ToasterProvider>
6      {/* Your app */}
7      <Toaster />
8    </ToasterProvider>
9  );
10}

LocalizationProvider (Required for DatePicker)

1import { LocalizationProvider, AdapterNativeDate, DatePicker } from 'unisysui';
2
3function App() {
4  return (
5    <LocalizationProvider dateAdapter={AdapterNativeDate}>
6      <DatePicker />
7    </LocalizationProvider>
8  );
9}

🌟 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Internet Explorer 11+

📖 API Reference

Button Props

1interface ButtonProps {
2  variant?: 'primary' | 'secondary' | 'tertiary';
3  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
4  disabled?: boolean;
5  onClick?: () => void;
6  children: React.ReactNode;
7}

Input Props

1interface InputProps {
2  label?: string;
3  placeholder?: string;
4  value?: string;
5  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
6  type?: string;
7  disabled?: boolean;
8  error?: string | boolean;
9  helperText?: string;
10  fullWidth?: boolean;
11  startIcon?: React.ReactNode;
12  endIcon?: React.ReactNode;
13}

Checkbox Props

1interface CheckboxProps {
2  checked?: boolean;
3  indeterminate?: boolean;
4  disabled?: boolean;
5  label?: string;
6  onChange?: (checked: boolean) => void;
7  error?: boolean;
8}

🚀 Getting Started Templates

Basic Form

1import React, { useState } from 'react';
2import { 
3  Input, 
4  Button, 
5  Checkbox, 
6  Dropdown, 
7  ToasterProvider, 
8  Toaster, 
9  useToaster 
10} from 'unisysui';
11
12const ContactForm = () => {
13  const { addToast } = useToaster();
14  const [formData, setFormData] = useState({
15    name: '',
16    email: '',
17    message: '',
18    subscribe: false,
19    category: ''
20  });
21
22  const categories = [
23    { value: 'support', label: 'Support' },
24    { value: 'sales', label: 'Sales' },
25    { value: 'feedback', label: 'Feedback' }
26  ];
27
28  const handleSubmit = () => {
29    if (!formData.name || !formData.email) {
30      addToast({
31        type: 'failed',
32        title: 'Validation Error',
33        message: 'Please fill in all required fields.',
34        duration: 5000
35      });
36      return;
37    }
38
39    addToast({
40      type: 'success',
41      title: 'Form Submitted!',
42      message: 'Thank you for your message.',
43      duration: 5000
44    });
45  };
46
47  return (
48    <div style={{ maxWidth: '500px', margin: '0 auto', padding: '20px' }}>
49      <h2>Contact Us</h2>
50      
51      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
52        <Input
53          label="Full Name *"
54          placeholder="Enter your name"
55          value={formData.name}
56          onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
57          fullWidth
58        />
59        
60        <Input
61          label="Email Address *"
62          type="email"
63          placeholder="Enter your email"
64          value={formData.email}
65          onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
66          fullWidth
67        />
68        
69        <Dropdown
70          label="Category"
71          placeholder="Select a category"
72          options={categories}
73          value={formData.category}
74          onChange={(category) => setFormData(prev => ({ ...prev, category }))}
75          width="100%"
76        />
77        
78        <Checkbox
79          label="Subscribe to newsletter"
80          checked={formData.subscribe}
81          onChange={(subscribe) => setFormData(prev => ({ ...prev, subscribe }))}
82        />
83        
84        <Button variant="primary" onClick={handleSubmit}>
85          Submit Form
86        </Button>
87      </div>
88    </div>
89  );
90};
91
92function App() {
93  return (
94    <ToasterProvider>
95      <ContactForm />
96      <Toaster />
97    </ToasterProvider>
98  );
99}
100
101export default App;

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © UnisysUI Team

📞 Support

• NPM Package: https://www.npmjs.com/package/unisysui
• GitHub Issues: Report bugs or request features
• Documentation: Full component documentation
• Email: team@unisysui.dev

---

Made with ❤️ by the UnisysUI team