📦 @sarawebs/sb-components

A lightweight and modular component library from SaraWebs, starting with a fully reusable Dropdown system and built with flexibility in mind — perfect for client dashboards, internal tools, and modern web apps.

Designed with composition, zero dependencies, and real-world use in mind. More components coming soon 🚀.

✨ Features

• 🧱 Composable Architecture Clean, class-based structure using best practices in reusable JavaScript.

• 🔁 Multiple Instances Easily supports multiple dropdowns per page — all independently controlled.

• 🖱️ Click or Hover Triggers Choose trigger behavior via data-trigger — no code changes required.

• 🧩 Expandable Design Built as a foundation for future UI components like modals, tabs, toasts, and tooltips.

• ⚙️ Zero Dependencies Lightweight and bundler-friendly. No need for jQuery or bulky UI libs.

📚 API Reference

Installation

npm install @sarawebs/sb-components

🧭 Current Component: Dropdown

HTML Example

<div class="dropdown" data-trigger="click">
  <button class="dropdown-toggle">Open Menu</button>
  <ul class="dropdown-menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
  </ul>
</div>

You can switch behavior by using data-trigger="hover" instead.

JS Usage

import "@sarawebs/sb-components/Dropdown/style"; // basic styles
import { Dropdown } from '@sarawebs/sb-components/Dropdown';

document.querySelectorAll('.dropdown').forEach(dropdownEl => {
  new Dropdown(dropdownEl);
});

Class: Dropdown

| Method | Description | | ---------- | -------------------------------------- | | show() | Opens the dropdown programmatically | | hide() | Closes the dropdown | | toggle() | Toggles between open and closed states |

Data Attributes

| Attribute | Values | Description | | -------------- | ---------------------- | ---------------------------------- | | data-trigger | "click" | "hover" | Sets dropdown interaction behavior |

🎨 Styling (Basic)

.dropdown-menu {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  z-index: 1000;
}

.dropdown.show .dropdown-menu {
  display: block;
}

You can style or animate however you like. The module doesn’t enforce design.

🖼️ Component: Carousel

A lightweight, reusable Image Carousel component built with zero dependencies, perfect for showcasing images in client dashboards, landing pages, and web apps.

Designed with a clean class-based architecture following the same composition principles as the Dropdown component.

🎯 Features

• ⬅️➡️ Arrow Controls — Navigate forward and backward through images
• 🔄 Auto Slide — Automatically advances every N milliseconds
• ⚫ Navigation Dots — Visual indicators that are clickable to jump to any slide
• 🧱 Composable & Reusable — Easily instantiate multiple carousels on a page
• 🔧 Dynamic Content — Accepts an array of image URLs to render slides
• ⏱️ Custom Timer — Configure auto-slide delay via constructor
• ⚙️ No Dependencies — Pure vanilla JS with modular class design

📚 Usage

HTML Setup

Only an empty container is required. The component will dynamically populate it.

<div id="carousel-container"></div>

JS Initialization

import "@sarawebs/sb-components/Carousel/style"; // Basic styles
import { Carousel } from "@sarawebs/sb-components/Carousel";

const images = [
  'https://picsum.photos/id/1015/800/300',
  'https://picsum.photos/id/1016/800/300',
  'https://picsum.photos/id/1018/800/300',
];

const container = document.getElementById('carousel-container');

// 5-second timer (default)
new Carousel(container, images);

// OR with a custom interval (e.g., 3 seconds)
new Carousel(container, images, 3000);

⚙️ Class: Carousel

| Parameter | Type | Description | | --------------------------- | --------- | ------------------------------------------ | | root | Element | HTML element to render the carousel inside | | images | string[] | Array of image URLs | | autoSlideDelay (optional) | number | Time in ms between slides (default: 5000) |

| Method | Description | | ------------------ | ----------------------------------------- | | moveToSlide(n) | Moves carousel to the nth slide (0-based) | | startAutoSlide() | Starts the auto-slide loop | | stopAutoSlide() | Stops the auto-slide loop |

💡 Use Cases

• Homepage hero sliders
• Product image galleries
• Testimonials rotators
• Portfolio slideshows
• Embedded widgets in client dashboards

🚀 Integration

This component is built in the same modular style as other SaraWebs UI primitives like Dropdown, Modal, and upcoming tools — enabling consistent development across internal tools, marketing sites, and client-facing applications.

Let me know if you’d like to:

• Add pause/resume buttons
• Support swipe/touch gestures
• Export this as an ES module or NPM package

🛠️ Planned Components

Coming soon:

• ✅ Dropdown
• ⏳ Modal
• ⏳ Tooltip
• ⏳ Toast
• ⏳ Tab Switcher
• ⏳ Collapsible Panels

💡 Use Cases

• Navigation headers
• Action menus (settings, logout, filters)
• Admin panels and CMS UI
• Reusable frontend patterns for small-to-medium apps

🌐 Website

Built with ❤️ by SaraWebs