This project contains a library of reusable UI components designed to ensure visual consistency, accessibility, and efficiency in the development of the CIPSA web application.

Table of Contents

1. Overview
2. Requirements
3. Getting Started
4. Release
5. Credits

Overview

This project contains a library of reusable UI components designed to ensure visual consistency, accessibility, and efficiency in the development of the CIPSA web application.

Requirements

• Node Js Version: 22.15.0
• NPM Version: 10.9.2
• TypeScript: >= 5.x
• Operating System: Linux / macOS / Windows
• Package Manager: NPM (or Yarn / PNPM if preferred)
• rimraf: for clean scripts

Getting Started

Follow these steps to run the project locally:

1. Use the library:

╰─❯ npm install cipsa-web-library
or
╰─❯ npm install [email protected]

2. Use a component:

// global.css
@import 'cipsa-web-library/styles';

//your-component.ts
import {UICard} from 'cipsa-web-library';

<UICard></UICard>

3. Set and add props

<UICard color={#0000}></UICard>

Release

🚀 Version 0.1.0-beta – First UI Components Available for BETA users!

We’re excited to announce the first public beta of cipsa-web-library (v0.1.0) — a growing collection of reusable UI components tailored for the CIPSA web platform.

✨ What’s New in v0.1.0-beta

This initial version introduces the following core components:

• <ui-card> A versatile card layout component with support for headers, footers, and dynamic content. Perfect for showcasing information in a clean, modular format.

• <ui-carousel> A responsive image/content carousel component with swipe support, pagination controls, and smooth transitions for an enhanced user experience.

• <ui-button> A customizable button component with multiple variants (primary, secondary, ghost, etc.), built with accessibility and responsiveness in mind.

🎨 Visual & Theming Improvements

This release also includes a color palette optimization, aligning all components with the CIPSA design system. Key improvements:

• Updated CSS variables for consistent theming
• Enhanced contrast for better accessibility
• Reduced custom overrides for easier integration

🚀 How to Install BETA Version

╰─❯ npm install [email protected].[version]

📦 How to Install

╰─❯ npm install cipsa-web-library

📚 Documentation

Each component comes with usage examples and props documentation. You can preview or check the usage instructions in the Experimentality ~ GitHub enterprise repository.

Credits

Developed and maintained by:
Santiago Arango Gutierrez
Email: [email protected]

All rights reserved © Experimentality Labs