RC Sciens UI - Comprehensive React Component Library

A modern, accessible, and customizable React component library. This library provides a comprehensive collection of UI components designed for building beautiful and functional web applications with plain CSS (no Tailwind required).

🚀 Features

• 200+ Components - Extensive collection covering all UI needs
• TypeScript Ready - Full TypeScript support with proper types
• Zero Tailwind requirement - Works out of the box with plain CSS
• Accessible - WCAG compliant components
• Customizable - Easy to customize and extend
• Responsive - Mobile-first responsive design
• Dark Mode - Built-in dark mode support
• Interactive - Comprehensive showcase and examples

📦 Installation

npm install rc-sciens-ui
# or
yarn add rc-sciens-ui

🔧 Setup

Styles

Import the library stylesheet once in your app entry (no Tailwind needed):

// main.jsx or App.jsx
import 'rc-sciens-ui/dist/style.css';

📚 Component Categories

🔘 Form Components (15+ components)

Comprehensive form inputs and controls for all data entry needs.

Text Inputs

• Input - Basic text input with variants (success, error, warning)
• Textarea - Multi-line text input with character count
• Search Box - Search input with clear functionality
• Number Input - Numeric input with validation
• URL Input - URL input with validation
• Email Input - Email input with validation
• Password Input - Secure password input

Selection Controls

• Checkbox - Single and multiple selection
• Radio Button - Single choice selection
• Switch/Toggle - On/off toggle control
• Select - Dropdown selection
• Multi-Select - Multiple choice selection
• Autocomplete - Typeahead with suggestions

Advanced Inputs

• Date Picker - Calendar date selection
• Time Picker - Time selection
• DateTime Picker - Combined date and time
• Color Picker - Color selection with palette
• File Upload - File upload with drag & drop
• OTP Input - One-time password input
• Rich Text Editor - WYSIWYG content editor

🔘 Button Components (10+ variants)

Versatile button components for all interaction needs.

Button Variants

• Primary - Main action buttons
• Secondary - Secondary actions
• Outline - Bordered buttons
• Ghost - Minimal buttons
• Link - Link-style buttons
• Gradient - Gradient background buttons
• Glass - Glassmorphism effect
• Neon - Glowing effect buttons

Button Types

• Icon Button - Icon-only buttons
• Floating Action Button (FAB) - Circular action buttons
• Button Group - Connected button groups
• Split Button - Primary action with dropdown
• Toggle Button - State-changing buttons
• Loading Button - Buttons with loading states

Button Sizes

• Extra Small (xs) - 24px height
• Small (sm) - 32px height
• Medium (md) - 40px height (default)
• Large (lg) - 48px height
• Extra Large (xl) - 56px height

📊 Data Display Components (12+ components)

Components for presenting and organizing data effectively.

Basic Display

• Avatar - User profile images with status
• Avatar Group - Multiple avatars with overflow
• Badge - Status indicators and labels
• Card - Content containers
• List - Ordered and unordered lists
• Table - Data tables with sorting/filtering

Advanced Display

• Data Grid - Advanced tables with pagination
• Timeline - Chronological event display
• Tree View - Hierarchical data display
• Accordion - Collapsible content sections
• Skeleton - Loading placeholders
• Statistic - Key metrics display

Data Visualization

• Progress Bar - Linear and circular progress
• Skeleton Loader - Content loading states
• Empty State - No data scenarios

🧭 Navigation Components (8+ components)

Navigation and wayfinding components for app structure.

Main Navigation

• Navbar - Top navigation bar
• Sidebar - Side navigation panel
• Breadcrumb - Page location indicator
• Tabs - Content organization tabs
• Pagination - Page navigation
• Stepper - Multi-step process indicator

Advanced Navigation

• Dropdown Menu - Contextual menus
• Mega Menu - Large navigation menus
• Anchor Links - Page section navigation
• Scrollspy - Scroll-based navigation

💬 Feedback Components (6+ components)

Components for user feedback and system communication.

Notifications

• Alert - Important information display
• Toast - Temporary notifications
• Snackbar - Action feedback
• Modal - Overlay dialogs
• Popover - Contextual information
• Tooltip - Hover information

Status Indicators

• Loading Spinner - Activity indicators
• Progress Indicator - Task progress
• Status Badge - State indicators

📐 Layout Components (8+ components)

Structural components for page organization.

Containers

• Container - Content width control
• Box - Basic layout container
• Grid - CSS Grid layout
• Flex - Flexbox utilities
• Stack - Vertical spacing
• Cluster - Horizontal spacing

Structure

• Header - Page header section
• Footer - Page footer section
• Divider - Content separation
• Spacer - Space management

🖼️ Media Components (6+ components)

Components for displaying media content.

Images

• Image - Responsive image display
• Image Gallery - Multiple image viewer
• Avatar - Profile image display
• Icon - SVG icon system

Media Players

• Video Player - Video content player
• Audio Player - Audio content player
• Carousel - Image slideshow

⚙️ Widget Components (10+ components)

Specialized components for specific functionality.

Data Widgets

• Calendar - Date and event management
• Kanban Board - Task management
• File Manager - File organization
• Chat Interface - Messaging components
• Notification Center - Centralized notifications

Utility Widgets

• Command Palette - Quick actions
• Search Widget - Advanced search
• Filter Widget - Data filtering
• Sort Widget - Data sorting

📈 Chart Components (8+ components)

Data visualization and analytics components.

Basic Charts

• Line Chart - Trend visualization
• Bar Chart - Category comparison
• Pie Chart - Proportion display
• Area Chart - Filled trend areas

Advanced Charts

• Scatter Plot - Correlation display
• Heatmap - Matrix visualization
• Radar Chart - Multi-dimensional data
• Gauge - Progress indicators

🎨 Usage Examples

Basic Button

import { Button } from 'rc-sciens-ui';

function App() {
  return (
    <Button variant="primary" size="lg">
      Click Me
    </Button>
  );
}

Form with Validation

import { Input, Button, Form } from 'rc-sciens-ui';

function LoginForm() {
  return (
    <Form onSubmit={handleSubmit}>
      <Input
        type="email"
        placeholder="Enter email"
        required
        variant="default"
      />
      <Input
        type="password"
        placeholder="Enter password"
        required
        variant="default"
      />
      <Button type="submit" variant="primary">
        Login
      </Button>
    </Form>
  );
}

Data Table

import { DataGrid } from 'rc-sciens-ui';

const columns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true },
  { key: 'role', label: 'Role' }
];

const data = [
  { id: 1, name: 'John Doe', email: '[email protected]', role: 'Admin' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', role: 'User' }
];

function UserTable() {
  return (
    <DataGrid
      data={data}
      columns={columns}
      sortable
      searchable
      pagination
      itemsPerPage={10}
    />
  );
}

Navigation

import { Navbar, Sidebar } from 'rc-sciens-ui';

function App() {
  return (
    <div className="flex h-screen">
      <Sidebar
        menuItems={[
          { label: 'Dashboard', href: '/', icon: '📊' },
          { label: 'Users', href: '/users', icon: '👥' },
          { label: 'Settings', href: '/settings', icon: '⚙️' }
        ]}
      />
      <div className="flex-1">
        <Navbar
          logo="My App"
          menuItems={[
            { label: 'Home', href: '/' },
            { label: 'About', href: '/about' }
          ]}
        />
        <main className="p-6">
          {/* Your content here */}
        </main>
      </div>
    </div>
  );
}

🎯 Component Showcase

The library includes a comprehensive showcase application that demonstrates all components with:

• Live Examples - Interactive component demonstrations
• Code Snippets - Copy-paste ready code examples
• Variants - All available component variants
• Props Documentation - Complete prop reference
• Responsive Testing - Mobile and desktop testing

To run the showcase:

npm run dev
# or
yarn dev

Then open http://localhost:5173 in your browser.

🔧 Customization

Theme Tokens

Components use CSS variables you can override globally. Example:

:root {
  --border-color: #e5e7eb;
}

📱 Responsive Design

All components are built with mobile-first responsive design:

• Mobile (sm) - 640px and up
• Tablet (md) - 768px and up
• Desktop (lg) - 1024px and up
• Large Desktop (xl) - 1280px and up

🌙 Dark Mode

Built-in dark mode support with automatic theme switching:

import { ThemeProvider } from 'rc-sciens-ui';

function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
    </ThemeProvider>
  );
}

♿ Accessibility

All components follow WCAG 2.1 guidelines:

• Keyboard Navigation - Full keyboard support
• Screen Reader - ARIA labels and descriptions
• Focus Management - Proper focus handling
• Color Contrast - Sufficient contrast ratios
• Semantic HTML - Proper HTML structure

🧪 Testing

# Run unit tests
npm run test

# Run component tests
npm run test:components

# Run accessibility tests
npm run test:a11y

📖 Documentation

• Component API - Complete prop reference
• Examples - Real-world usage examples
• Best Practices - Component usage guidelines
• Migration Guide - Version upgrade instructions

🤝 Contributing

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

Development Setup

git clone https://github.com/your-org/rc-sciens-ui.git
cd rc-sciens-ui
npm install
npm run dev

Component Development

1. Create component in appropriate directory
2. Add TypeScript types
3. Include accessibility features
4. Add comprehensive tests
5. Update documentation
6. Submit pull request

📄 License

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

🙏 Acknowledgments

• Tailwind CSS - Utility-first CSS framework
• React - UI library
• TypeScript - Type safety
• Community - Contributors and users

📞 Support

• Documentation - docs.rc-sciens-ui.com
• Issues - GitHub Issues
• Discussions - GitHub Discussions
• Email - [email protected]

Built with ❤️ by the RC Sciens UI team