SHIUI
SHIUI é um pacote reutilizável de componentes de UI em estilo flat 2D, usando apenas três cores, linhas de 1.5px e sem sombras; os componentes podem ser experimentados diretamente na página e o código-fonte copiado.
Sobre SHIUI
SHIUI é um pacote reutilizável de componentes de UI com estilo visual flat 2D inspirado em pôsteres no estilo da bandeira do Japão: usa apenas três cores (branco papel #e5e3dc, tinta #2a2926 e vermelho escarlate #e14d2a), linhas uniformes de 1.5px e nenhuma sombra em todo o design. Segundo o site oficial, atualmente inclui 111 elementos interativos e 24 blocos, que são realmente funcionais na página de demonstração — podem ser clicados, virados, fechados etc., e cada cartão permite copiar diretamente a instrução de import correspondente ou o código-fonte completo. Também oferece design tokens (sistema de cores) que podem ser copiados com um clique, sendo ideal para uso direto em projetos.
Ideal para
Melhores casos de uso
Construir um sistema visual flat e contido para interfaces em inglês, copiando diretamente o código-fonte dos componentes para uso
Ao precisar padronizar cores e linhas, copiar os design tokens em três cores como base do projeto
Antes de escolher um componente, experimentar as interações — clicar, virar, fechar etc. — nos cartões do site oficial
Funcionalidades
Catálogo de componentes interativos
O site oficial informa que inclui 111 elementos interativos e 24 blocos; cada cartão pode ser realmente clicado, virado ou fechado na página.
Cópia com um clique da instrução de import ou do código-fonte
Cada cartão de componente permite copiar diretamente a instrução de import correspondente ou o código-fonte completo, facilitando o uso em projetos.
Design tokens em três cores
Oferece tokens nas três cores Paper, Sumi e Shu, copiáveis com um clique no site oficial, para uniformizar o uso de cores, linhas e tons de destaque na interface.
Estilo visual flat em formato de pôster
Adota um sistema visual flat 2D, com linhas uniformes de 1.5px e sem uso de sombras, exibido no site oficial na forma de componentes.
Vantagens
- Os componentes são exibidos no site oficial em forma realmente interativa — o que se vê é o que se obtém
- Permite copiar diretamente a instrução de import ou o código-fonte completo, com baixo custo de integração
- Fornece design tokens em três cores que podem ser copiados, garantindo um estilo uniforme
Limitações
- O pacote de componentes é voltado para interfaces em inglês; os textos da interface são projetados principalmente com layout em inglês