React Utility Yard (RUY) v2 💎

React Utility Yard is a high-performance, premium React component library designed for building modern web applications with a focus on Glassmorphism, fluid animations, and developer productivity.

Abstracted from real-world AI-powered ecosystems, RUY provides a curated set of components that are both visually stunning and highly functional.

✨ Features

• 🧊 Glassmorphism Core: Built-in support for ultra-modern glass aesthetics.
• 🌓 Dynamic Theming: Seamless dark and light mode support with custom CSS tokens.
• ⚡ Type Safe: First-class TypeScript support with full IntelliSense.
• 🔄 Backward Compatible: v2.x architecture maintains support for legacy props (onclick, editOn, etc.).
• 📦 Zero Config Bundle: Optimized for modern bundlers like Vite, Next.js, and Webpack.

🚀 Installation

npm install react-utility-yard

🛠 Configuration

RUY leverages Tailwind CSS for its styling engine. Add the following to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-utility-yard/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // RUY design system tokens
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

Import the core styles in your main entry file (e.g., main.tsx or _app.tsx):

import 'react-utility-yard/dist/index.css';

🧱 Key Components

🧊 SideBar

A sophisticated, collapsible navigation panel with support for custom layouts and glassmorphic headers.

import { SideBar } from 'react-utility-yard';

<SideBar 
  title="Workspace" 
  sideBar_list={<NavigationItems />}
  width="18rem"
>
  <MainContent />
</SideBar>

🔘 Button

Modern buttons with glass, solid, and ghost variants. Fully compatible with legacy onclick and text props.

import { Button } from 'react-utility-yard';

<Button 
  variant="glass" 
  color="accent" 
  onClick={() => console.log("Clicked!")}
>
  Ignite System
</Button>

🧊 GlassyText

A universal frosted-glass wrapper that ensures content remains visible on any dynamic background. Automatically theme-aware.

import { GlassyText } from 'react-utility-yard';

<GlassyText variant="vibrant" depth="mid" padding="sm" radius="full">
  <span style={{ fontWeight: 800 }}>Status: Active</span>
</GlassyText>

⌨️ Input

Enhanced input fields with built-in "Read-only" toggle support via the editOn prop.

🛠 Development

Local Setup

# Clone the repository
git clone https://github.com/Infinity8sailor/react-utility-yard.git

# Install dependencies
npm install

# Run Storybook
npm run storybook

Build & Release

The project uses tsup for extremely fast bundling.

# Build the library
npm run build

# Publish to NPM (Automated via GitHub Actions)
# Bump version in package.json and push to main

📜 License

MIT © Vaibhav Dasharathe