SHIUI
SHIUI est une suite réutilisable de composants UI au style 2D plat : trois couleurs, des traits de 1.5px, sans ombre, avec des composants essayables directement sur la page et un code source copiable.
À propos de SHIUI
SHIUI est une suite réutilisable de composants UI dont le style visuel s'inspire d'un design 2D plat façon affiche reprenant le drapeau japonais : uniquement trois couleurs (blanc papier #e5e3dc, encre #2a2926, rouge vermillon #e14d2a), des traits uniformes de 1.5px et aucune ombre. Le site officiel indique que la suite compte actuellement 111 éléments interactifs et 24 blocs, réellement utilisables sur la page de démonstration — cliquer, retourner, fermer, etc. — et chaque carte permet de copier directement l'instruction import ou le code source complet du composant. Elle propose également des design tokens (système de couleurs) copiables en un clic, faciles à intégrer directement dans un projet.
Idéal pour
Meilleurs cas d'utilisation
Construire un système visuel plat et sobre pour des interfaces en anglais, en copiant directement le code source des composants
Copier les trois design tokens comme base de projet lorsque vous devez harmoniser les couleurs et les traits
Tester les interactions sur les cartes du site officiel — cliquer, retourner, fermer, etc. — avant de choisir un composant
Fonctionnalités
Catalogue de composants interactifs
Le site officiel indique que la suite comprend 111 éléments interactifs et 24 blocs ; chaque carte peut être cliquée, retournée ou fermée directement sur la page.
Copie en un clic de l'import ou du code source
Chaque carte de composant permet de copier directement l'instruction import ou le code source complet correspondant, ce qui facilite l'utilisation dans vos projets.
Design tokens en trois couleurs
Des tokens en trois couleurs — Paper, Sumi et Shu — copiables en un clic depuis le site officiel, pour harmoniser les couleurs, les traits et les touches d'accent de l'interface.
Style visuel plat, façon affiche
Un système visuel 2D plat, avec des traits uniformes de 1.5px et sans ombre, présenté sous forme de composants sur le site officiel.
Avantages
- Les composants sont présentés sous forme réellement interactive sur le site officiel : ce que vous voyez est ce que vous obtenez
- Copie directe de l'import ou du code source complet, pour une intégration à faible coût
- Design tokens en trois couleurs copiables, pour un style cohérent
Limites
- La suite de composants est conçue pour des interfaces en anglais : les textes d'interface sont principalement conçus pour une mise en page anglaise