Catálogo

As 91 peças, numa tela

87 delas com exemplo que roda na própria página. A primeira frase de cada documento apresenta a peça; o resto mora a um clique.

Fundação1

RivoProviderRaiz obrigatória. Sem ele nada tem estilo.

Ações6

ButtonAção. Sai como <button> nativo, e vira <a> com render={<a href="..." />}.ButtonGroupBotões que agem sobre a mesma coisa, encostados um no outro.ClipboardCopiar um dado para levar a outro lugar.ToggleBotão que fica apertado. Vive dentro de um ToggleGroup.ToggleGroupBarra de botões que ficam apertados, para escolha que muda a vista na hora:ToolbarBarra de ferramentas: os controles ficam numa parada de tabulacao só, e as

Formulário30

AutocompleteCampo que sugere enquanto se digita, e aceita o que não esta na lista.Calendar+1 partesO mes cru, para quem quer o calendário na própria tela.CheckboxCaixa de marcar.CheckboxGroupGrupo de caixas de marcar que compartilham um valor em lista.ColorPickerEscolha de uma cor: a de marca de um cliente, num construtor de tema.Combobox+9 partesEscolha em lista longa, com busca.DatePickerCampo de data: da para digitar e da para escolher no calendário.DateRangePickerPeriodo, para filtro de relatório e de listagem.EditableEdição no lugar: o texto vira campo ao ser clicado, e volta a ser texto ao ser Field+3 partesRaiz do campo de formulário. Liga rótulo, ajuda e erro por acessibilidade.FieldsetAgrupa campos que respondem a mesma pergunta: endereco, dados do cliente,FileUploadA área de anexar: clique abre o seletor, arrastar acende, soltar valida.Form+1 partesO <form> e o contexto do React Hook Form numa peça só, para o FormField InputControle de texto. Vive dentro de Field.InputGroup+3 partesMoldura que encosta texto ou botão no campo: R$ antes, .com.br depois, lupa MaskedInputCampo com mascara guiada por molde: 9 e digito, A e letra, * e os dois, e NumberFieldCampo de número com mais e menos.OTPFieldCódigo de verificacao, uma casa por digito.PasswordInputCampo de senha com o olho que revela.RadioGroup+1 partesAgrupa os Radio e cuida da escolha única e da navegação por setas. Passe SearchInputO campo de busca com a lupa no lugar: o arranjo que toda listagem montava na Select+6 partesEscolha única em lista.SliderEscolha de valor numa faixa: desconto, prazo, tolerancia.SwitchChave de liga e desliga, para o que muda na hora.TagsInputLista de marcadores que a pessoa escreve: etiquetas de uma nota, palavras de um TextareaCampo de várias linhas. Passa pelo Field.Control da Base UI como o Input,TimeFieldCampo de hora digitável, em 24 horas.TimePickerO TimeField com o painel de escolher a hora.TreeA arvore sozinha, sem campo nem painel. Serve para navegador de pastas e para TreeSelectEscolha dentro de uma arvore: setor e equipe, categoria e subcategoria, conta e

Estrutura17

AccordionSanfona, para perguntas frequentes e para secoes longas de formulário.AspectRatioSegura a proporção de uma caixa antes do conteúdo dela chegar.Avatar+1 partesFoto de pessoa, com a inicial por trás.Card+5 partesSuperfície que agrupa conteúdo relacionado.CollapsibleEsconde e mostra um bloco.DataTableTabela com os três estados que toda listagem tem e quase nenhuma trata:DescriptionListPares de rótulo e valor, na marcação que já existe para isso: <dl>.FilterBarA fileira dos filtros aplicados, o botão de limpar e a contagem: as três FilterChipUm filtro aplicado: o campo, o valor e o xis que o tira.Item+5 partesA linha de lista: alguma coisa a esquerda, texto no meio, ação a direita.PageHeaderO topo que toda rota reescreve um pouco diferente: trilha, título, descrição ScrollAreaÁrea de rolagem com barra própria.SeparatorLinha que separa, com role="separator".SplitterDuas áreas com uma divisória que se arrasta: lista à esquerda e detalhe à StatO número de painel: rótulo, valor, variação e tendência, na hierarquia que todo Table+7 partesTabela semântica, com <table> de verdade.VirtualListLista longa que desenha só o que cabe na moldura.

Navegação9

BreadcrumbO caminho até onde a pessoa esta.CommandA paleta de comandos: um campo, uma lista e o teclado.Menu+10 partesMenu de ações, típico dos três pontinhos de uma linha de tabela.Menubar+1 partesA barra de menus de aplicativo: Arquivo, Editar, Exibir.NavigationMenuA navegação de topo de site, com painel por secao.PaginationNavegação entre páginas de uma listagem.SidebarA barra lateral de uma tela de operação. Não é só um menu: é provedor de estado,StepsA regua de passos de um formulário longo. Anda junto com o useWizard().Tabs+3 partesAlterna paineis irmaos na mesma página.

Sobreposição8

AlertDialog+6 partesA confirmacao de coisa que não volta atrás: excluir, cancelar nota, sair sem ContextMenuO menu do botão direito.Dialog+6 partesJanela modal, para decisão que não pode continuar em segundo plano.PopconfirmA confirmação que nasce colada no botão que a disparou: excluir uma linha sem Popover+5 partesPainel ancorado de conteúdo livre. A peça entre o Tooltip, que só mostra texto PreviewCardO cartao que aparece ao pousar sobre um link: quem e o cliente, o que é aquela Sheet+6 partesFolha que desliza da borda da tela, com gesto de arrastar.Tooltip+2 partesDica curta, para botão que só tem ícone.

Feedback11

Alert+2 partesAviso que fica na tela.BadgeSelo de estado, sempre em pilula, sempre curto.EmptyStateEstado vazio, com saída.IndicatorA contagem por cima de outra coisa: avisos no sino, itens na aba, mensagens no KbdA tecla de um atalho, desenhada como tecla.MeterMedida de quanto de uma capacidade esta em uso: espaço, cota, limite.ProgressBarra de progresso de tarefa com fim conhecido: enviar arquivo, gerar relatório.QueryBoundaryOs quatro finais de uma consulta (carregando, erro, vazio e dados) em volta de SkeletonMarca de lugar enquanto o dado não chegou.SpinnerGiro de espera sem fim previsto.ToastViewportA área onde os avisos aparecem. Ela já vem montada dentro do RivoProvider,

Gráfico4

ChartContainer+2 partesA moldura de todo gráfico, sobre a Recharts. Vive em @rivocode/ui/chart.ChartDonutRosca com o total no meio.ChartRadialO arco de uma medida só: meta batida, uso de cota, taxa de conversão.SparklineA linha miúda que cabe dentro de um número.

Dados5

Code+1 partesCódigo dentro de uma frase: nome de arquivo, comando de terminal, chave de um EventCalendarO calendário de compromissos: o que acontece, quando, e por quanto tempo.RelativeTime"há 2 minutos", "em 3 dias".TimelineO que aconteceu com uma coisa, em ordem.TrackerA faixa de quadradinhos por período: as últimas 90 emissões, a disponibilidade