Onyx UI Components 💎

✨ Live Demo & Documentation ✨

Onyx UI is a high-fidelity React component library and Server-Driven UI (SDUI) ecosystem. It is focused on premium design, physics-based micro-interactions (using Framer Motion), and a modern aesthetic built around a "Dark Mode First" and Glassmorphism approach.

Crafted for developers and designers who aren't satisfied with basic interfaces and seek the "WOW" factor for their projects.

✨ Features

• 🎨 Premium Design: Modern aesthetic, focused on dark backgrounds (Zinc/Onyx), translucent borders, and emerald green accents.
• 🚀 Realistic Physics: All animations are powered by Framer Motion's Spring system. No static CSS transitions.
• 🧩 Highly Customizable: Built natively with Tailwind CSS v4 and tailwind-merge for absolute flexibility.
• 🏗️ Server-Driven UI Ready: Includes a robust E-commerce ecosystem with a dynamic PageBuilder to orchestrate layouts from JSON data.
• 📦 Plug & Play: Ready-to-use components for your React or Next.js projects with zero headache.

🧩 The Ecosystem

Onyx UI is divided into two main architectures that work in perfect harmony:

1. Core Components (The Foundation)

Highly reusable, pure UI components that are isolated from business logic. They render the data they receive through props with impeccable animations and accessibility. Examples: OnyxMagneticButton, OnyxBentoGrid, OnyxAnimatedTabs, OnyxSpotlightCard.

2. Server-Driven UI (E-commerce Engine)

An advanced module built in layers (L1 to L4) designed for modern E-commerce applications:

• L1 (Atoms): Pure formatting blocks (e.g., OnyxPriceTag, OnyxRatingStars).
• L2 (Molecules): Visual domain components (e.g., OnyxProductCard, OnyxCookieBanner).
• L3 (Organisms): Large layout sections (e.g., OnyxNavbar, OnyxFooter, OnyxCategoryGrid).
• L4 (Ecosystem): The OnyxPageBuilder acts as the orchestrator, reading JSON structures (from a CMS or Backend) and dynamically rendering the appropriate L3 blocks to form a complete, interactive page.

📦 Installation

You can install the library by running the following command in your terminal:

npm install onyx-ui-components

Note: Onyx UI uses framer-motion, lucide-react, and tailwindcss under the hood. Make sure you have Tailwind configured in your project.

🚀 Usage

Using the components is extremely simple. Just import the desired component and the global styles file (if needed in your setup).

Example: Magnetic Button

import { OnyxMagneticButton } from "onyx-ui-components";
import { Send } from "lucide-react";

export function App() {
  return (
    <div className="flex items-center justify-center h-screen bg-zinc-950">
      <OnyxMagneticButton pullStrength={0.4}>
        Send Message <Send className="w-4 h-4 ml-2 text-emerald-400" />
      </OnyxMagneticButton>
    </div>
  );
}

✂️ Copy & Paste Model (shadcn/ui style)

If you prefer to have absolute control over the source code (to change the base color, adjust the spring physics, or modify the logic), you can skip the NPM installation. Simply open the Storybook documentation, copy the component's source code, and paste it directly into your project!

📚 Available Components

Onyx UI comes with an arsenal of advanced components:

Core Components

• OnyxMagneticButton: A button with physical attraction to the cursor.
• OnyxSpotlightCard: A card with dynamic lighting that follows the mouse.
• OnyxBentoGrid: A flexible grid system inspired by Apple's aesthetic.
• OnyxAnimatedTabs: Tabs with a sliding background and smooth transitions.
• OnyxNumberTicker: A numeric odometer for statistics and values.
• OnyxDock: A macOS-style navigation menu with a magnifying glass effect.
• OnyxWindow: A floating window modeled after a desktop operating system.
• And much more...

E-commerce & SDUI

• OnyxPageBuilder: Dynamic JSON-to-UI engine.
• OnyxNavbar & OnyxFooter: Premium sticky headers and multi-column footers.
• OnyxCartSidebar: Animated slide-out cart.
• OnyxProductQuickView: Modal gallery with zoom and variants.
• OnyxCountdownTimer: Spring-based flip clock for flash sales.
• OnyxMarqueeBanner: Infinite auto-scrolling brand strips.

⚙️ Built With

• React 19
• TypeScript
• Tailwind CSS v4
• Framer Motion
• Lucide React (Icons)
• Vite & Storybook (For development and documentation)

📄 License

Distributed under the MIT License. Crafted with passion for the community.