Initial Screen

1.0.3

Este padrão proporciona um design consistente para mostrar uma tela de início ou boas-vindas. Apresenta ao usuário uma funcionalidade ou serviço, oferecendo opções para obter mais informações ou continuar.

Hero

Cards

Lista e imagem

Seções

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;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/initial-screen

Quando usar

Guiar o usuário no onboarding de um novo produto ou serviço sem conteúdo disponível.
Introduzir uma experiência que requer cumprir condições prévias (validações, processos em background).
Apresentar uma ação principal clara para começar (conectar conta, iniciar configuração, carregar informações).

Quando não usar

Já existe conteúdo disponível para mostrar.
O usuário já completou o onboarding ou configuração inicial.

Critérios de usabilidade e produtividade

Focar na ação principal: Usar um CTA claro e visível para guiar a ação principal.
Pré-seleção inteligente: Sugerir ações recorrentes (como integrar apps) se forem relevantes para o contexto.

Boas práticas de acessibilidade

Navegação com teclado: Todos os elementos devem ser acessíveis com Tab e Enter.
Contraste suficiente (WCAG AA): Assegurar legibilidade de todos os textos e elementos gráficos.
Manejo do foco: Colocar foco no primeiro elemento relevante ao ingressar.

Anatomia

Um Initial Screen pode conter:

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

Combinações válidas:

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

Dependências

Este padrão utiliza: #text, #title, #bullet, #button, #appmodule, #helplink

Variantes

Informativo

Quando não há conteúdo por uma condição externa não cumprida. Não requer ação do usuário, não inclui botões.

Ação requerida

Se requer uma ação explícita para gerar conteúdo. Inclui um botão primário.

Do and Don'ts

✅ Do:

Textos diretos, claros e breves.
Título orientado à ação/contexto (máx. 1 linha em desktop, 2 em mobile).
Descrição antecipando conteúdo ou valor (máx. 3 linhas em desktop, 5 em mobile).
Subtítulo com nome de domínio ou função (máx. 3 palavras).
CTA principal coerente e breve (máx. 3 palavras).
Combinar botão primário e secundário se aplicável.
Usar bullets para destacar atributos chave.
Incluir Help Link com wording claro ("Mais sobre [ação/conceito]").
Incluir App Module quando for relevante.

❌ Don't:

Evitar linguagem genérica ou vaga ("Não há nada aqui").
Não sobrecarregar com texto.
Não usar variantes de botão fora de primary/secondary.
Não misturar descrição de texto e bullets.
Não mostrar CTAs sem funcionalidade ativa.
Não incluir imagens decorativas ou irrelevantes.

Aplicação

Desktop

Mobile

Template relacionado

#LadingInitialScreen

Props

Propriedades adicionais podem ser passadas para o componente <InitialScreen>. Consulte a documentação div para obter a lista de propriedades aceitas pelo componente <InitialScreen>.

InitialScreen

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

InitialScreen.Bullet

Name	Type	Default	Description
icon	React.ReactNode
text*	string

InitialScreen.Card

Name	Type	Default	Description
icon	React.ReactNode
title*	string
description*	string

InitialScreen.CardLayout

Name	Type	Default	Description
children	React.ReactNode

InitialScreen.Feature

Name	Type	Default	Description
content	React.ReactNode
image	React.ReactNode

InitialScreen.FeatureItem

Name	Type	Default	Description
title*	string
description*	string
children	React.ReactNode

InitialScreen.FeatureItemSpacing

Name	Type	Default	Description

InitialScreen.Hero

Name	Type	Default	Description
title	string
subtitle	string
actions	React.ReactNode
image	React.ReactNode
description	React.ReactNode
bullets	React.ReactNode

InitialScreen.Module

Name	Type	Default	Description
title*	string
description*	string

InitialScreen.Section

Name	Type	Default	Description
title*	string