OnboardingChecklist
Card de ativação dispensável com passos e barra de progresso.
OnboardingChecklist é o card que vive no topo do dashboard logo depois do signup, com a lista de passos para completar a primeira semana. Cada passo é um OnboardingChecklist.Step, com completed controlado pelo consumer e um action? opcional. A barra de progresso é calculada automaticamente a partir dos children.
Comece por aqui
Faltam 2 passos para você usar 100% do workspace.
- Concluído:
Conecte o seu repositório
Importe o seu repo do GitHub ou GitLab para sincronizar issues e PRs.
- Pendente:
Convide o time
Adicione colegas para colaborar em projetos e revisar mudanças.
- Pendente:
Faça o primeiro deploy
Suba o app para produção em 1 clique e dispare o pipeline.
'use client';
import { OnboardingChecklist } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';
export default function OnboardingChecklistDefault() {
return (
<OnboardingChecklist
title="Comece por aqui"
description="Faltam 2 passos para você usar 100% do workspace."
onDismiss={() => {}}
className="w-full max-w-md"
>
<OnboardingChecklist.Step
title="Conecte o seu repositório"
description="Importe o seu repo do GitHub ou GitLab para sincronizar issues e PRs."
completed
/>
<OnboardingChecklist.Step
title="Convide o time"
description="Adicione colegas para colaborar em projetos e revisar mudanças."
completed={false}
action={
<Button size="sm" variant="outline">
Convidar
</Button>
}
/>
<OnboardingChecklist.Step
title="Faça o primeiro deploy"
description="Suba o app para produção em 1 clique e dispare o pipeline."
completed={false}
action={<Button size="sm">Deploy</Button>}
/>
</OnboardingChecklist>
);
}
Uso
import { OnboardingChecklist } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';
<OnboardingChecklist
title="Comece por aqui"
description="Faltam 2 passos para você usar 100% do app."
onDismiss={() => savePreference('onboarding-dismissed', true)}
>
<OnboardingChecklist.Step title="Conectar repositório" completed />
<OnboardingChecklist.Step
title="Convidar time"
completed={false}
action={<Button size="sm">Convidar</Button>}
/>
<OnboardingChecklist.Step
title="Fazer o primeiro deploy"
completed={false}
action={<Button size="sm">Deploy</Button>}
/>
</OnboardingChecklist>Props
title/description— copy do header.onDismiss— exibe o botão "X" no canto. Persistir o estado é responsabilidade do consumer.
Subcomponentes
OnboardingChecklist.Step—<li>comtitle,description?,completed,action?. Oactioné ocultado quandocompleted.
Acessibilidade
O progresso usa o Progress primitive com aria-label informando "X de Y passos concluídos". O label sr-only antes de cada step anuncia o status para leitores de tela.