RenderLoom (renderloom)

A premium, state-of-the-art React component library centered around a modern, lightweight glassmorphic design system styled with Tailwind CSS v4 and styled in responsive Outfit typography.

🎨 Core Design Aesthetics

• Frosted Glass (Glassmorphism): Backdrop blur-driven elements, translucent overlays, and premium border rules.
• Deep Moss Green Color Palette: Sleek charcoal backgrounds for Dark Mode paired with soft organic moss cream and charcoal tones for Light Mode.
• Tactile Transitions: Micro-interactions, hover slides, and interactive tap scales powered by Framer Motion.

🚀 Quickstart Guide

1. Installation

npm install renderloom

Make sure your project has React 18 or 19 installed.

2. Import Stylesheet

Add the compiled CSS bundle in your application's entrypoint (e.g. main.jsx or index.js):

import 'renderloom/dist/renderloom.css';

3. Usage Example

Wrap your application in ThemeProvider and ToastProvider to unlock theme switching and system alerts:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider, ToastProvider, Button, Card, Input } from 'renderloom';
import 'renderloom/dist/renderloom.css';

function App() {
  return (
    <Card className="max-w-md mx-auto mt-12">
      <h2 className="text-xl font-bold mb-4 text-liquid">Welcome to RenderLoom</h2>
      <Input label="Email Address" placeholder="[email protected]" className="mb-4" />
      <Button variant="primary">Proceed</Button>
    </Card>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <ThemeProvider>
    <ToastProvider>
      <App />
      <SyncProgressHUD />
    </ToastProvider>
  </ThemeProvider>
);

📦 Built-in Components (29 Components)

1. Layout & Scaffolding

• Sidebar / SidebarItem: Scaffolding collapsible left-hand navigation panel supporting chevron toggles, active indicator highlights, custom counts/badges, and profile footer regions.
• Card: Translucent frosted panels with custom glass border rules and responsive padding scales.
• Modal: Decoupled overlay frame rendering high-blur glass drop backdrops.
• ConfirmationModal: Specialized safety alert drawer for destructive/critical executions.
• Accordion: Slide-expanding container drawer powered by Framer Motion height animations.
• Timeline / TimelineItem: Elegant vertical event trails or step-by-step operation pipelines complete with connecting vertical tracks and pulsing status beacons.

2. Full Authentication Suites

• AuthPage: Dynamic drop-in authorization dashboard that facilitates smooth Framer Motion cross-fades between Login, Registration, and ForgotPassword screens with full async loading behaviors.

3. Actions & Navigation

• Button: Interactive action pills supporting interactive tap scales, variants (primary, secondary, outline, ghost, glass, destructive), and custom loading spinners.
• Tabs: State-driven navigation headers featuring sliding spring highlights (layoutId="active-tab-highlight").
• Pagination: Glass numerical footer blocks for datatable index transitions.

4. Form Controls & Selectors

• Input: Frosted text entry fields supporting validation notifications, focus rings, and custom labels.
• Dropdown: Fully-featured Select drawer with staggered option exits and outside-click dismiss captures.
• Switch: Smooth sliding checkbox track powered by Framer Motion toggle positions.
• Checkbox: Custom rectangular check box showcasing spring-pop Lucide checks.
• Radio: Round glass indicator rendering spring-expanding central moss dots.
• Slider: Tactile drag-range inputs with dynamic gradient track paints.
• TagInput: Pill tag keyword selector featuring interactive keyboard bindings (Enter, Comma, Backspace) and scaling slide-ins.
• Dropzone: Drag-and-drop file uploader supporting drag hover glows, file format validations, and animated file staging queues.

5. Gauges & Indicators

• StatsCard: Metric block container displaying a bold numeric figure, a sub-description, an icon block, and a floating green/red trend arrow badge.
• Badge: Floating compact status chips (success, warning, danger, primary).
• Avatar: Profile circles with status rings (online, offline, busy, syncing) and monogram fallbacks.
• ProgressCircle: Radial circular progress gauge rendering animated SVG strokes.
• Spinner: Multi-size standalone spinner loader indicators.
• PortalTooltip: Portal-rendered tooltip overlays detached from DOM container bounds to avoid parent clippings.
• Alert: Explicitly colored context notifications (success, info, warning, error) supporting dismiss transitions.
• NotificationCenter: Right-sliding drawer console panel rendering detailed notification lists, pulsing unread beacons, dismiss controls, and clear-all actions.

6. Advanced Telemetry Services

• SyncProgressHUD: Real-time minimized or full task progress log queue dashboard.
• ToastProvider / useToast: Dynamic multi-toast stacked notify service.
• SyncProvider / useSync: Global async bulk queue execution contexts.
• ThemeProvider / useTheme: Shared application Light/Dark CSS-variable switcher.