Initial Screen

1.0.3

Este patrón proporciona un diseño consistente para mostrar una pantalla de inicio o bienvenida. Presenta al usuario una funcionalidad o servicio, ofreciendo opciones para obtener más información o continuar.

Hero

Cards

Feature

Sections

import React from "react";
import { InitialScreen } from "@nimbus-ds/patterns";
import { BagIcon, FireIcon, TagIcon, TiendanubeIcon } from "@nimbus-ds/icons";
import { Button } from "@nimbus-ds/components";
import { mockInitialScreenBullets as bullets } from "lib/mocks/mock-labels";

const Example: React.FC = () => (
  <InitialScreen>
    <InitialScreen.Hero
      subtitle="META"
      title="¡Vendé más con Instagram y Facebook!"
      bullets={bullets.map(({ icon: NimbusIcon, description }, index) => (
        <InitialScreen.Bullet key={index} icon={<NimbusIcon />} text={description} />
      ))}
      actions={<Button appearance="primary">Conectar cuenta</Button>}
      image={
        <img
          src="/images/initial-screen.png"
          alt="Two people giving high five"
          width="100%"
        />
      }
    />
  </InitialScreen>
);

export default Example;

Implementación

Instala el componente via terminal.

npm install @nimbus-ds/initial-screen

Cuándo usar

Guiar al usuario en el onboarding de un nuevo producto o servicio sin contenido disponible.
Introducir una experiencia que requiere cumplir condiciones previas (validaciones, procesos en background).
Presentar una acción principal clara para comenzar (conectar cuenta, iniciar configuración, cargar información).

Cuándo no usar

Ya existe contenido disponible que mostrar.
El usuario ya completó el onboarding o configuración inicial.

Criterios de usabilidad y productividad

Enfocar en la acción principal: Usar un CTA claro y visible para guiar la acción principal.
Preselección inteligente: Sugerir acciones recurrentes (como integrar apps) si son relevantes para el contexto.

Buenas prácticas de accesibilidad

Navegación con teclado: Todos los elementos deben ser accesibles con Tab y Enter.
Contraste suficiente (WCAG AA): Asegurar legibilidad de todos los textos y elementos gráficos.
Manejo del foco: Colocar foco en el primer elemento relevante al ingresar.

Anatomía

Un Initial Screen puede contener:

Image
Subtitle
Title
Text o Bullet list
Buttons (opcional)
App Module (opcional)
Help Link (opcional)

Combinaciones válidas:

Image + Subtitle + Title + Text
Image + Subtitle + Title + Bullet
Image + Subtitle + Title + Text + Button + App Module
Image + Subtitle + Title + Text + Button + Help Link

Dependencias

Este patrón utiliza: #text, #title, #bullet, #button, #appmodule, #helplink

Variantes

Informativo

Cuando no hay contenido por una condición externa no cumplida. No requiere acción del usuario, no incluye botones.

Acción requerida

Se requiere una acción explícita para generar contenido. Incluye un botón primario.

Do and Don'ts

✅ Do:

Textos directos, claros y breves.
Título orientado a la acción/contexto (máx. 1 línea en desktop, 2 en mobile).
Bajada anticipando contenido o valor (máx. 3 líneas en desktop, 5 en mobile).
Subtítulo con nombre de dominio o función (máx. 3 palabras).
CTA principal coherente y breve (máx. 3 palabras).
Combinar botón primario y secundario si aplica.
Usar bullets para destacar atributos clave.
Incluir Help Link con wording claro ("Más sobre [acción/concepto]").
Incluir App Module cuando sea relevante.

❌ Don't:

Evitar lenguaje genérico o vago ("No hay nada aquí").
No sobrecargar con texto.
No usar variantes de botón fuera de primary/secondary.
No mezclar bajada de texto y bullets.
No mostrar CTAs sin funcionalidad activa.
No incluir imágenes decorativas o irrelevantes.

Aplicación

Desktop

Mobile

Template relacionado

#LadingInitialScreen

Props

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

InitialScreen

Name	Type	Default	Description
children*	React.ReactNode		Content of the InitialScreen component.

InitialScreen.Bullet

Name	Type	Default	Description
icon
text*	string

InitialScreen.Card

Name	Type	Default	Description
icon
title*	string
description*	string

InitialScreen.CardLayout

Name	Type	Default	Description
children

InitialScreen.Feature

Name	Type	Default	Description
content
image

InitialScreen.FeatureItem

Name	Type	Default	Description
title*	string
description*	string
children

InitialScreen.FeatureItemSpacing

Name	Type	Default	Description

InitialScreen.Hero

Name	Type	Default	Description
title	string
subtitle	string
actions
image
description
bullets

InitialScreen.Module

Name	Type	Default	Description
title*	string
description*	string

InitialScreen.Section

Name	Type	Default	Description
title*	string