INVINV Design System

Buscar no Design System

Navegue para qualquer seção do INV Design System

v0.1

Loaders

Indicadores de progresso e estado de carregamento — Spinner animado e Skeleton para placeholders de conteúdo.

Spinner

SVG animado com variantes de tamanho e cor.

sm
md
lg
xl

Skeleton — Profile

Avatar + linhas de texto. Padrão oficial do shadcn/ui.

1<div className="flex items-center space-x-4">
2 <Skeleton className="h-12 w-12 rounded-full" />
3 <div className="space-y-2">
4 <Skeleton className="h-4 w-[250px]" />
5 <Skeleton className="h-4 w-[200px]" />
6 </div>
7</div>

Skeleton — Card

Imagem + título + subtítulo. Padrão skeleton-card do shadcn/ui.

1<div className="flex flex-col space-y-3">
2 <Skeleton className="h-[125px] w-[250px] rounded-xl" />
3 <div className="space-y-2">
4 <Skeleton className="h-4 w-[250px]" />
5 <Skeleton className="h-4 w-[200px]" />
6 </div>
7</div>

Skeleton — Dashboard INV

Composição de loading para painel financeiro com métricas e tabela.

1// KPI cards + chart + table rows
2<div className="grid grid-cols-3 gap-4">
3 {[1, 2, 3].map((i) => (
4 <div key={i} className="space-y-2 rounded-lg border border-border p-4">
5 <Skeleton className="h-3 w-24" />
6 <Skeleton className="h-7 w-32" />
7 <Skeleton className="h-3 w-16" />
8 </div>
9 ))}
10</div>
11<Skeleton className="h-[160px] w-full rounded-xl" />
12<div className="space-y-2">
13 {[1, 2, 3].map((i) => (
14 <div key={i} className="flex gap-4">
15 <Skeleton className="h-4 w-14" />
16 <Skeleton className="h-4 w-28" />
17 <Skeleton className="h-4 flex-1" />
18 </div>
19 ))}
20</div>

Uso

1import { Skeleton } from "@/components/ui/skeleton"
1// Qualquer forma com className de tamanho
2<Skeleton className="h-4 w-[200px]" /> // linha de texto
3<Skeleton className="h-12 w-12 rounded-full" /> // avatar
4<Skeleton className="h-[200px] w-full rounded-xl" /> // imagem/card