Patterns
Los patterns en Nimbus son combinaciones predefinidas de componentes atómicos y compuestos que resuelven problemas comunes de diseño e interacción. Estos patterns son implementaciones probadas y validadas por nuestro equipo para ayudar a los usuarios a implementar soluciones de diseño eficientes y consistentes.
App Shell
The AppShell component is the main outer frame of an application. It provides the basic architecture to build an application inside of our admin.
Leer documentaciónCalendar
The Calendar component allows the user to select a date or range of dates in a simple, straitforward and flexible UI thats based off of ReactDayPicker. It extends the properties of the ReactDayPicker component. Refer to the documentation site for a complete reference of the component's API.
Leer documentaciónCallout Card
This component is used to provide the user with useful information, tips, tutorials or shortcuts to other parts of the product. It is a visual component specially designed to be used in contexts such as integration, tutorials or dashboards, where we need to show different relevant information in the same space.
Leer documentaciónData List
DataList is a flexible list-style component that enables the organization of customizable row elements in a vertical manner, with visual separators between rows.
Leer documentaciónData Table
DataTable is a highly versatile component used to organize large quantities of tabular data. It supports pagination to help navigate through the data easily and efficiently, and also allows the user to sort and filter the data by columns. Additionally, it offers the ability to select one or multiple rows using checkboxes, which can be useful for performing batch actions or manipulating the data in other ways.
Leer documentaciónEditor
The Editor component was built using the Lexical API and was developed to be used in rich text fields.
Leer documentaciónEmpty Message
The Empty Message component can be used in multiple scenarios. To communicate whenever a search returns no results, if a page has no content, or if there is an error loading data. It can include an icon or illustration to support the written content, as well as a title and additional content text, and an optional node with actions that can be provided to the user so as to engage in next steps if there is an error on the page.
Leer documentaciónForm Field
The FormField component allows the user to enter or edit information in text format. Additionally, it provides a label, and a conditional help text that can be used to provide additional context on a validation scenario.
Leer documentaciónHelp Link
Help Link component is intended for adding helpful links with tutorials or educational content on the UI.
Leer documentaciónInitial Screen
El componente Initial Screen es un patrón que ayuda a los usuarios a entender qué deben hacer o qué debe suceder para comenzar a usar una funcionalidad o servicio. Combina componentes clave de la interfaz de usuario, como call to action, imágenes y texto informativo para guiar a los usuarios hacia una interacción específica. Se recomienda para el onboarding a un nuevo producto o servicio donde aún no hay información, y el usuario necesita realizar una acción o simplemente esperar a que se cumpla una condición.
Leer documentaciónInteractive List
Interactive List allows users to build lists with multiple options that have some kind of interaction. It can be, and is not limited to, checkboxes, radios, toggles and buttons. This component is built on top of the DataList component that allows the creation of scrollable lists with multiple entries of different kinds of data.
Leer documentaciónLayout
The Layout component is intended for building single or multi-column layouts using predefined typologies.
Leer documentaciónMenu Button
The Menu Button component allows the user to create in-app menu-buttons that navigate through different sections of an application.
Leer documentaciónMenu
The Menu component allows the user to create in-app menus that navigate through different sections of an application.
Leer documentaciónNav Tabs
The NavTabs component represents the main navigation dock for an application on a mobile device, including up to 5 tabs or buttons for different sections. The component has a fixed position on the bottom of the screen.
Leer documentaciónPage
Page component allows the user to build application pages with all the necessary attributes for constructing a variety of layouts.
Leer documentaciónPlan Display
El componente PlanDisplay es un diseño de interfaz reutilizable y flexible, diseñado para mostrar múltiples planes u opciones uno al lado del otro. Organiza los planes de una manera visualmente atractiva, con cada plan conteniendo un encabezado (por ejemplo, título o nombre) y contenido (por ejemplo, características, beneficios o detalles). El componente admite un sistema de diseño para controlar la disposición de los planes (por ejemplo, en fila o en cuadrícula) y es ideal para mostrar niveles de precios, opciones de suscripción o cualquier dato comparativo. Su estructura modular permite una fácil personalización y escalabilidad.
Leer documentaciónProduct Data List
El patrón Product Data List permite ver y gestionar listas resumidas de productos. Está diseñado para facilitar la selección, organización y priorización de productos relacionados mediante drag & drop y acciones de edición rápidas.
Leer documentaciónProduct Updates
ProductUpdates component allows the user to showcase new features or updates in a non-distractive way by displaying the information in a floating popover with a high-contrast setting that catches the eye of the user.
Leer documentaciónSide Modal
Sidemodal navigation provides access to the parts within its application. The side sections have the supplementary content that is linked on the left or right side of the screen.
Leer documentaciónThumbnail With Action
The Thumbnail With Action pattern allows you to add interactive elements to image thumbnails. By overlaying custom content onto a thumbnail component in one of the four corners, you can embed atomic components such as buttons, icons, or links that enable users to perform specific actions related to the image.
Leer documentación