Yuverse UI Library

A reusable React component library with customizable UI components using Tailwind CSS.

Installation

# Using npm
npm install yuverse-ui-library

# Using yarn
yarn add yuverse-ui-library

Usage

import React, { useState } from 'react';
import { 
  ModernDropdown, 
  Card, 
  Button, 
  LoadingSpinner,
  ContentSkeleton,
  MultiFilter,
  useTheme 
} from 'yuverse-ui-library';
import 'yuverse-ui-library/styles.css';

Components

ModernDropdown

A customizable dropdown component with various themes and sizes.

function DropdownExample() {
  const [selectedValue, setSelectedValue] = useState('');
  
  const options = [
    { label: 'Select an option', value: '' },
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' }
  ];
  
  return (
    <ModernDropdown
      id="default-dropdown"
      value={selectedValue}
      onChange={setSelectedValue}
      options={options}
      label="Default Dropdown"
      description="This is a default dropdown component"
      theme="primary" // default, primary, success, warning, danger
      size="md" // sm, md, lg
    />
  );
}

Sidebar

A customizable, collapsible sidebar navigation component.

function SidebarExample() {
  const [isExpanded, setIsExpanded] = useState(true);
  
  const navItems = [
    {
      path: '/dashboard',
      label: 'Dashboard',
      isActive: true,
      icon: <DashboardIcon />
    },
    {
      path: '/upload',
      label: 'Upload Files',
      icon: <UploadIcon />
    }
  ];
  
  return (
    <div className="flex h-screen">
      <Sidebar
        isExpanded={isExpanded}
        setIsExpanded={setIsExpanded}
        navItems={navItems}
        activeColor="#3b82f6"
        expandOnHover={true}
        expandedWidth={200}
        collapsedWidth={70}
      />
      
      <main className="flex-1" style={{ 
        marginLeft: isExpanded ? '200px' : '70px',
        transition: 'margin-left 0.3s'
      }}>
        {/* Your content here */}
      </main>
    </div>
  );
}

Card

A versatile card component with various styles and hover effects.

function CardExample() {
  return (
    <Card 
      variant="elevated" // default, elevated, glass, gradient, outlined
      padding="md" // none, xs, sm, md, lg, xl
      hover={true}
      glow={true}
      onClick={() => console.log('Card clicked')}
    >
      <h3 className="text-lg font-medium">Card Title</h3>
      <p className="mt-2">This is a card with hover and glow effects.</p>
    </Card>
  );
}

LoadingSpinner

A customizable loading spinner with different variants.

function LoadingExample() {
  return (
    <div className="space-y-8">
      <LoadingSpinner 
        size="md" // xs, sm, md, lg, xl
        variant="default" // default, gradient, dots, pulse, glow
        text="Loading..."
      />
      
      <LoadingSpinner 
        size="lg"
        variant="gradient"
        text="Processing..."
      />
      
      <LoadingSpinner 
        size="xl"
        variant="dots"
        fullScreen={false}
      />
    </div>
  );
}

ContentSkeleton

Skeleton loaders for various content types.

function SkeletonExample() {
  return (
    <div className="space-y-8">
      <ContentSkeleton 
        type="card" // card, panel, table, list
        rows={3}
        withHeader={true}
        withImage={true}
        withFooter={true}
      />
      
      <ContentSkeleton 
        type="table"
        rows={5}
      />
      
      <ContentSkeleton 
        type="list"
        rows={3}
        withImage={true}
      />
    </div>
  );
}

Button

A customizable button component with various styles.

function ButtonExample() {
  return (
    <div className="space-x-4">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="danger">Danger</Button>
      <Button size="lg" fullWidth={false} disabled={false}>Large Button</Button>
    </div>
  );
}

MultiFilter

A component for filtering data with multiple criteria.

function FilterExample() {
  const handleFiltersChange = (filters) => {
    console.log('Filters changed:', filters);
  };
  
  // Optional custom filter options
  const customFilterOptions = {
    status: [
      { value: 'active', label: 'Active' },
      { value: 'inactive', label: 'Inactive' }
    ],
    priority: [
      { value: 'high', label: 'High' },
      { value: 'medium', label: 'Medium' },
      { value: 'low', label: 'Low' }
    ]
  };
  
  return (
    <MultiFilter 
      onFiltersChange={handleFiltersChange}
      initialFilters={{ status: 'active' }}
      filterOptions={customFilterOptions} // Optional, uses uiConfig.filters by default
    />
  );
}

useTheme Hook

A hook to access theme values and detect dark mode.

function ThemedComponent() {
  const { theme, isDark, setIsDark } = useTheme();
  
  return (
    <div style={{ color: theme.text.primary, backgroundColor: theme.background }}>
      <h2>Current theme: {isDark ? 'Dark' : 'Light'}</h2>
      <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
      <p style={{ color: theme.primary }}>This text uses the primary color</p>
    </div>
  );
}

Component Props

ModernDropdown

| Prop | Type | Default | Description | |------|------|---------|-------------| | id | string | required | Unique identifier for the dropdown | | value | string|number | required | Currently selected value | | onChange | function | required | Function called when selection changes | | options | array | required | Array of options [{label: string, value: string\|number}] | | label | string | undefined | Label text for the dropdown | | description | string | undefined | Description text displayed below the label | | className | string | '' | Additional CSS classes | | theme | string | 'default' | Theme for the dropdown ('default', 'primary', 'success', 'warning', 'danger') | | size | string | 'md' | Size of the dropdown ('sm', 'md', 'lg') | | isFilter | boolean | false | Whether this dropdown is being used as a filter | | fullWidth | boolean | false | Whether the dropdown should take full width | | dropdownPosition | string | 'bottom' | Position of the dropdown ('bottom', 'top') | | customStyles | object | {} | Custom styles for different parts of the dropdown |

Card

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | required | Card content | | className | string | '' | Additional CSS classes | | padding | string | 'md' | Padding size ('none', 'xs', 'sm', 'md', 'lg', 'xl') | | border | boolean | true | Whether to show a border | | variant | string | 'default' | Card style variant ('default', 'elevated', 'glass', 'gradient', 'outlined') | | hover | boolean | false | Whether to apply hover effects | | glow | boolean | false | Whether to apply a glow effect on hover | | onClick | function | undefined | Click handler |

LoadingSpinner

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | string | 'md' | Size of the spinner ('xs', 'sm', 'md', 'lg', 'xl') | | variant | string | 'default' | Spinner style variant ('default', 'gradient', 'dots', 'pulse', 'glow') | | text | string | '' | Optional text to display below the spinner | | fullScreen | boolean | false | Whether the spinner should be displayed full screen with overlay |

ContentSkeleton

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | string | 'card' | Type of skeleton ('card', 'panel', 'table', 'list') | | rows | number | 3 | Number of rows to display | | withHeader | boolean | true | Whether to include a header | | withImage | boolean | false | Whether to include an image placeholder | | withFooter | boolean | false | Whether to include a footer | | className | string | '' | Additional CSS classes | | animate | boolean | true | Whether to animate the skeleton |

Button

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | required | Button content | | variant | string | 'primary' | Button style variant ('primary', 'secondary', 'outline', 'ghost', 'danger') | | size | string | 'md' | Button size ('xs', 'sm', 'md', 'lg', 'xl') | | fullWidth | boolean | false | Whether the button should take full width | | disabled | boolean | false | Whether the button is disabled | | onClick | function | undefined | Click handler | | className | string | '' | Additional CSS classes |

MultiFilter

| Prop | Type | Default | Description | |------|------|---------|-------------| | onFiltersChange | function | required | Callback when filters change | | initialFilters | object | {} | Initial filter values | | filterOptions | object | uiConfig.filters | Custom filter options | | className | string | '' | Additional CSS classes |

Sidebar

| Prop | Type | Default | Description | |------|------|---------|-------------| | isExpanded | boolean | - | Control the expanded state externally | | setIsExpanded | function | - | Function to set expanded state externally | | navItems | array | [] | Navigation items array | | resourceItems | array | [] | Resource items array | | logo | object | { icon: null, title: 'Logo', subtitle: 'Subtitle' } | Logo configuration object | | backgroundColor | string | - | Background color of the sidebar | | textColor | string | - | Text color of the sidebar items | | activeColor | string | - | Color for active navigation items | | hoverColor | string | - | Background color on hover | | borderColor | string | - | Color for borders | | expandedWidth | number | 180 | Width of sidebar when expanded (in pixels) | | collapsedWidth | number | 70 | Width of sidebar when collapsed (in pixels) | | expandOnHover | boolean | true | Whether to expand sidebar on hover | | className | string | '' | Additional CSS classes | | renderNavLink | function | null | Custom renderer for navigation items |

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

License

MIT