SHIUI
SHIUI is a reusable UI component kit in a flat 2D style, using only three colors, 1.5px strokes, and no shadows — components can be tried directly on the page and their source code copied.
About SHIUI
SHIUI is a reusable UI component kit with a visual style inspired by flat, poster-like 2D design reminiscent of the Japanese flag: it uses only three colors (paper white #e5e3dc, ink black #2a2926, vermilion red #e14d2a), consistent 1.5px strokes, and no shadows anywhere. The website states it currently includes 111 interactive elements and 24 blocks, and these elements are genuinely functional on the showcase page — they can be clicked, flipped, closed, and more. Every card also supports directly copying the corresponding import statement or full source code. It also provides design tokens (a color system) that can be copied with one click, making it easy to adopt directly in your projects.
Best for
Best use cases
Build a flat, restrained visual system for English-language interfaces by directly copying component source code
Copy the three-color design tokens as a project foundation when you need unified color and stroke guidelines
Try out interactions like clicking, flipping, and closing on the website's cards before choosing a component
Features
Interactive component catalog
The website states it includes 111 interactive elements and 24 blocks, and every card can actually be clicked, flipped, or closed on the page.
One-click copy of imports or source code
Every component card lets you directly copy the corresponding import statement or full source code, making it easy to use in your project.
Three-color design tokens
Provides Paper, Sumi, and Shu color tokens that can be copied with one click from the website, keeping the use of colors, strokes, and accent colors consistent across your interface.
Flat, poster-style visual aesthetic
A visual system based on flat 2D design, consistent 1.5px strokes, and no shadows, showcased on the website in component form.
Pros
- Components are showcased on the website in genuinely interactive form — what you see is what you get
- Supports directly copying imports or full source code, keeping integration costs low
- Provides copyable three-color design tokens for a unified style
Cons
- The component kit is designed for English-language interfaces, with UI copy laid out primarily for English text