Redoc UI-Components

Component library for Redoc web applications

The main objective of creating the various components was to enable their use in both the Redoc web application and the Redocflow application. This facilitates maintenance for developers, enhances usability, and accelerates the development process.

Client

Redoc.mx

Technologies

Svelte Pico CSS

Date

September 2023

Image of the Layout component in mobile mode added to the Redoc web application.
Image of the Layout component in mobile mode added to the Redoc web application.
Image of the Layout component in mobile mode added to the Redoc web application.

The various components were developed with a focus on meeting accessibility standards, web performance, and responsive design. By utilizing tools like Pico CSS, greater design coherence was achieved across web applications. These components were created to provide various functionalities, such as style filtering, application layout design, color selection, modal usage, and more. This enabled efficient web application development and allowed for the separation of service logic from reusable components, providing better control across different projects.

Images of the Card and Layout components in light and dark mode in the Redoc web application.
Images of the Card and Layout components in light and dark mode in the Redoc web application.
Images of the Card and Layout components in light and dark mode in the Redoc web application.
Images of the Modal, Table, and other components in the Redoc web application.
Images of the Modal, Table, and other components in the Redoc web application.
Images of the Modal, Table, and other components in the Redoc web application.

Each component was documented in Markdown, detailing its properties, callbacks, and usage methods. This allowed developers to quickly understand how to implement the components.