Plan 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.

Dos planes

Tres planes

import React from "react";
import { PlanDisplay } from "@nimbus-ds/patterns";
import { CheckIcon, CloseIcon } from "@nimbus-ds/icons";
import { Box, Title, Text, Button } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <PlanDisplay minWidth={{ xs: "150px", md: "500px" }} mx="4">
    <PlanDisplay.Card>
      <PlanDisplay.Header
        subtitle="Punto de venta"
        title={
          <Box display="flex" gap="1">
            <Title as="h3" color="neutral-textLow">
              Plan
            </Title>
            <Title as="h3" color="neutral-textHigh">
              Básico
            </Title>
          </Box>
        }
      >
        <Title as="h5">Suscripción gratuita</Title>
        <Text fontWeight="bold" fontSize="highlight">
          1.5% costo por transacción
        </Text>
      </PlanDisplay.Header>
      <PlanDisplay.Content>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Descuentos personalizados
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Registro de clientes
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Búsqueda de clientes
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Venta con envío
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Venta sin stock
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Registro de medio de pago
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Escaneo de producto
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Gestión de caja
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Asignación de vendedor
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Creación de productos durante la venta
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Guardar carritos
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CloseIcon />} disabled>
          Atajos de teclado
        </PlanDisplay.Bullet>
      </PlanDisplay.Content>
    </PlanDisplay.Card>
    <PlanDisplay.Card highlighted>
      <PlanDisplay.Header
        subtitle="Punto de venta"
        title={
          <Box display="flex" gap="1">
            <Title as="h3" color="neutral-textLow">
              Plan
            </Title>
            <Title as="h3" color="neutral-textHigh">
              Avanzado
            </Title>
          </Box>
        }
      >
        <Title as="h5">$14.999 / mes</Title>
        <Text fontWeight="bold" fontSize="highlight">
          0.15% costo por transacción
        </Text>
      </PlanDisplay.Header>
      <PlanDisplay.Content>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Descuentos personalizados
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Registro de clientes
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Búsqueda de clientes
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Venta con envío
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Venta sin stock
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Registro de medio de pago
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Escaneo de producto
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Gestión de caja
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Asignación de vendedor
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Creación de productos durante la venta
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Guardar carritos
        </PlanDisplay.Bullet>
        <PlanDisplay.Bullet icon={<CheckIcon />}>
          Atajos de teclado
        </PlanDisplay.Bullet>
      </PlanDisplay.Content>
      <PlanDisplay.Footer>
        <Box
          display="flex"
          flexDirection="column"
          justifyContent="center"
          alignItems="center"
          width="100%"
          gap="2"
        >
          <Button appearance="primary">
            <Text fontSize="base" color="currentColor">
              Comenzar gratis*
            </Text>
          </Button>
          <Text fontSize="caption">
            *Al finalizar la prueba podrás elegir cancelar, continuar o cambiar
            de plan
          </Text>
        </Box>
      </PlanDisplay.Footer>
    </PlanDisplay.Card>
  </PlanDisplay>
);

export default Example;

Implementación

Instala el componente via terminal.

npm install @nimbus-ds/plan-display

Props

Se pueden pasar propiedades adicionales al componente <PlanDisplay>. Revisa la documentación del div para ver la lista de props aceptadas por el componente <PlanDisplay>.