Web Components by rtCamp

A collection of reusable, accessible, and customizable web components built with TypeScript, designed to simplify UI development across projects. This package is developed and maintained by the team at rtCamp and is publicly available for anyone to use and contribute.

✨ Why Use This Package?

Modern front-end development often involves repeated creation of the same UI patterns like accordions, sliders, tabs, modals, etc. This package offers a centralized solution:

• ✅ Reusable: Write once, use across multiple projects.
• 🧩 Modular: Use only the components you need.
• ⚙️ Framework-Agnostic: Native web components that work with any JavaScript framework.
• 💡 Developer-Friendly: Built with TypeScript and thoughtfully documented.
• 🌍 Public & Open Source: Available on npm and GitHub for transparency, collaboration, and contribution.

📦 Installation

npm install @rtcamp/web-components

🚀 Usage

Importing Components

// Import a specific component (e.g., Accordion)
import '@rtcamp/web-components/build/accordion';

// Import global styles
import '@rtcamp/web-components/build/style.css';

// TypeScript usage
import { Accordion } from '@rtcamp/web-components';

You can now use the component as a custom HTML tag:

<rt-accordion></rt-accordion>

🧩 Available Components

We are continually expanding our collection. Current components include:

• Accordion
• Slider
• Tabs
• Modal
• Lightbox
• ...and more

Each component is designed with accessibility and customizability in mind.

📂 Component Structure

Each component is organized with the following conventions:

• 📄 Each component folder contains a README.md file that explains:
  • Component usage
  • Code examples
  • Component's Attributes, Events and Methods
• 🧪 A index.html file is included to demonstrate the working demo of the component.
• 🧱 If a component has multiple elements, those are stored inside an elements/ subfolder for clarity and modularity.
• 🧩 Each component folder has its own index.ts file, which should define and register custom elements via customElements.define(...).

🧩 Creating a New Component

If you're building a new component, please follow these steps:

1. Export the main component class in the root index file:
   src/index.ts

2. Import your component-specific styles into the main stylesheet:
   src/style.scss

3. Test thoroughly to ensure it works across use cases and devices.

4. Keep styles minimal: The component should only include styles essential for functionality (like layout, visibility toggles, etc.). Avoid opinionated visual styles, as each project may override styles to match its design system.

5. Test thoroughly to ensure the component behaves correctly and is accessible across browsers and screen sizes.

6. Once verified, contact a team member to publish the updated package so it's available for all users.

If in doubt, reach out to our team members actively working on this project for guidance.

🛠️ Local Development

Want to contribute or customize the components?

Getting Started

1. Clone the repository:

   git clone https://github.com/rtCamp/web-components.git
   cd web-components

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build for production:

   npm run build

5. Preview any component using a local server. Example:

   php -S localhost:3000
   # Now open http://localhost:3000/src/slider

🤝 Contributing

We welcome community contributions!

How to Contribute

• 🐞 Report issues or suggest features via GitHub Issues.
• 🛠️ Submit a pull request if you'd like to add or improve a component.

Contribution Guidelines

• Follow existing coding conventions and folder structure.
• Include TypeScript types and JSDoc comments.
• Make sure the component works across browsers and is accessible.
• Test before submitting a pull request.

📄 License

This project is licensed under the GPL-3.0-or-later. See LICENSE for more details.

💼 BTW, We're Hiring!