noxel

v1.0.9

Published

8 months ago

Reusable UI components

0High
0Medium
0Low

muhammad_musharaf

azlanbaig

rabeet

ui components banner Card

Noxel

A lightweight, reusable UI component library for React — starting with a beautiful, customizable <Banner /> <FAQs />and <Card /> component.

🚀 Features

⚛️ Works with React 17, 18, and 19
💅 Inline styles, no CSS or external setup needed
🌐 Works in Next.js, CRA, Vite, etc.
📦 Tiny and tree-shakable

📦 Installation

npm install noxel
# or
yarn add noxel

Note: This package uses external CSS. You must manually import the CSS file in your root layout (e.g. _app.tsx or layout.tsx) for styles to apply correctly.

⚛️ 1. Create React App (CRA) – src/index.tsx

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// ✅ Import noxel styles here
import 'noxel/dist/index.css';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

⚡ 2. Vite – src/main.tsx

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

// ✅ Import noxel styles here
import 'noxel/dist/index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

🔥 3. Next.js (App Router) – app/layout.tsx

// app/layout.tsx
import 'noxel/dist/index.css'; // ✅ Import global package CSS
import './globals.css';
import { ReactNode } from 'react';

export const metadata = {
  title: 'My App',
  description: 'Using noxel component library',
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

🔧 Usage

import { Banner } from "noxel";

export default function Home() {
  return (
    <Banner
      title="Limited Time!"
      heading="Welcome to Our Site"
      image="https://example.com/banner.jpg"
    />
  );
}

Note: You Need to install React Player peer dependency to make this component works for you.

🔧 Banner Props

| 🏷️ Prop | 🧠 Type | 📄 Description | | ------------------ | ------------------------------------ | --------------------------------------------------------------------- | | title | string | 🗣️ Main banner title text | | description | string | 🧾 Supporting description text | | mediaUrl | string | 🎬 URL to the background media (image or video) | | mediaType | "video" | "image" | 🖼️ Type of media to show (video or image) (default: "video") | | autoPlay | boolean | ▶️ Should the video autoplay (default: true) | | showControls | boolean | 🎛️ Show native video controls (default: false) | | overlay | boolean | 🌑 Show a semi-transparent overlay (default: true) | | overlayOpacity | number | 🔲 Opacity of the overlay (0–1 range) (default: 0.4) | | titleColor | string | 🎨 Color of the title text (default: #ffffff) | | descriptionColor | string | 🎨 Color of the description text (default: #e5e7eb) | | backgroundColor | string | 🎨 Fallback background gradient (default: dark gradient) | | height | "sm" | "md" | "lg" | "xl" | 📏 Height of the banner (default: "lg") | | alignment | "left" | "center" | "right" | 📐 Text alignment (default: "center") | | className | string | 🧩 Additional CSS classes to apply | | handleCta | () => void | 🖱️ Callback function when the CTA button is clicked | | btnText | string | 🔘 Text to display on the CTA button (default: "Learn More") |


import { Card } from "noxel";

export default function Home() {
  return (
    <Card
      id="123"
      title="Sample Product"
      description="This is a short product description."
      price={29.99}
      category="Electronics"
      imageUrl="https://example.com/product-image.jpg"
    />
  );
}

🔧 Card Props

| 🏷️ Prop | 🧠 Type | 📄 Description | | ------------- | -------- | ---------------------------- | | id | string | 🆔 Product ID | | title | string | 🏷️ Product title | | description | string | 📝 Short product description | | price | number | 💰 Product price | | category | string | 🧩 Product category | | imageUrl | string | 🖼️ Thumbnail image URL |

⚙️ Framework Compatibility

✅ React 17+

✅ Next.js (SSR + App Router supported)

✅ Vite

⚖️ License

This project is licensed under the ISC License.