kimjusnu/miseui

Mise UI

UI que se explica sozinha. Cada componente vem com o princípio por trás de sua forma e uma regra para quando não usá-lo. Mantenha ambos ao instalar ou adaptar um.

Quando usar

• O projeto é React + Tailwind CSS v4 com um components.json no estilo shadcn
• A tela tem uma etapa de IA: uma espera por um modelo, texto transmitido, chamadas de ferramentas, raciocínio, entrada de voz
• Você precisa de um kit base (botão, diálogo, select…) cuja lógica possa ser citada em uma revisão de design

Instalar

1. Tema, uma vez por projeto: npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/theme.json
2. Cada componente: npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/<nome>.json (as dependências instalam automaticamente)
3. Leia references/<nome>.md antes de usar um componente pela primeira vez

Regras

1. Respeite prefers-reduced-motion. Todo componente Mise já faz isso; mantenha isso ao editar um.
2. Um acento mise por tela. Ele marca a ação principal ou atividade de IA ao vivo, nunca decoração.
3. Nomeie a espera. Qualquer chamada de modelo que dure mais de cerca de um segundo ganha um thinking-indicator cujo rótulo diz o que está acontecendo.
4. Sem padrões escuros: sem contagens regressivas falsas, cancelamento oculto, consentimento pré-marcado. A linha Não use em cada referência é vinculante.
5. Mantenha os atributos data-slot; testes e hooks de estilização dependem deles.

Sintoma → componente

Quando você vê	Use
O usuário espera por uma chamada de modelo por mais de cerca de um segundo	thinking-indicator
Tokens chegam um a um e devem parecer digitação, não um bloco congelado	streaming-text
Um agente executou uma ferramenta e o usuário deve poder confiar no resultado	tool-call-card
Um plano de várias etapas que o usuário pode querer inspecionar, mas não deve ser forçado a ler	reasoning-steps
O microfone está ativo e o usuário precisa saber disso	voice-wave
O conteúdo está carregando e o layout final é conhecido	skeleton
Uma ação importa mais que o resto da tela	button
Muitas opções em um só lugar	select
Uma lista curta de ações atrás de um único gatilho	dropdown-menu
O usuário precisa decidir antes de fazer qualquer outra coisa	dialog
Detalhe extra que só alguns usuários precisam	tooltip
Controles relacionados que pertencem juntos	card

Estados de IA

• Reasoning Steps (reasoning-steps): Linha do tempo recolhida das etapas do modelo; o cabeçalho nomeia a atual, o corpo mostra todas. — Divulgação progressiva · referência
• Streaming Text (streaming-text): Revela o texto que chega caractere por caractere na velocidade de leitura, com um cursor que marca onde a próxima palavra cai. — Latência percebida · referência
• Thinking Indicator (thinking-indicator): Três pontos pulsantes e um rótulo ao vivo que informam ao usuário que o modelo está trabalhando e em quê. — Visibilidade do status do sistema · ilusão do trabalho · referência
• Tool Call Card (tool-call-card): Registro recolhível de uma chamada de ferramenta: nome, status, duração e a entrada e saída exatas sob demanda. — Transparência gera confiança · referência
• Voice Wave (voice-wave): Barras que sobem com o nível do microfone para que o usuário veja que está sendo ouvido e veja quando não está. — Visibilidade do status do sistema · referência

Componentes principais

• Badge (badge): Chip de status pequeno em cinco variantes; a variante quente mise é reservada para o único item que deve se destacar. — Efeito Von Restorff · referência
• Button (button): Alvo de pressão com um assentamento de 150 ms e um recuo de 2% para que o clique pareça reconhecido. — Limiar de Doherty · referência
• Card (card): Superfície com borda, com slots de cabeçalho, conteúdo e rodapé que se lê como uma região antes de alguém ler o texto. — Lei da região comum · referência
• Checkbox (checkbox): Alternador quadrado que preenche e desenha sua marca dentro de 150 ms após o pressionamento e anuncia a mudança via aria-checked. — Feedback imediato · referência
• Dialog (dialog): Superfície modal que escurece todo o resto e mantém o foco até que o usuário responda a uma pergunta. — Funil de atenção · referência
• Dropdown Menu (dropdown-menu): Menu compacto de ações que abre a partir de um botão e fecha ao escolher, com navegação por teclas de seta e uma variante destrutiva. — Lei de Hick · referência
• Input (input): Campo de texto de linha única, 36 px de altura para combinar com Botão, que move o estado inválido para sua borda e anel. — Lei de Fitts · referência
• Label (label): Legenda vinculada a um controle: clicar nela foca o campo e ela escurece quando o campo está desabilitado. — Lei da proximidade · referência
• Popover (popover): Painel flutuante pequeno ancorado ao controle que o abriu, para um formulário ou detalhe que não precisa de um diálogo completo. — Memória espacial · referência
• Select (select): Menu suspenso para uma escolha de uma lista, com placeholder, grupos, uma marca na linha escolhida e suporte completo de teclado. — Efeito padrão · referência
• Skeleton (skeleton): Placeholder pulsante em forma do conteúdo que está carregando, para que a espera pareça mais curta que um spinner. — Performance percebida · referência
• Switch (switch): Controle deslizante liga/desliga cujo polegar viaja 16 px em 150 ms, espelhando o alternador físico que imita. — Affordance · referência
• Tabs (tabs): Controle segmentado que troca um painel por outro no mesmo lugar, para que visualizações relacionadas compartilhem um único ponto na tela. — Agrupamento · referência
• Textarea (textarea): Campo de texto multilinha que começa com 64 px e cresce com seu conteúdo, para que a resposta nunca fique escondida atrás de uma barra de rolagem. — Agrupamento · referência
• Tooltip (tooltip): Dica de uma linha que aparece ao passar o mouse ou ao focar sem atraso e sai com o ponteiro, para detalhes que não merecem espaço na tela. — Divulgação progressiva · referência

Fonte e issues: https://github.com/kimjusnu/miseui