SHIUI icon

SHIUI

SHIUI is a flat ink UI kit inspired by Hinomaru Japanese posters, featuring paper, sumi and vermilion treatments with no shadows for editorial, catalogue and commerce interfaces.

SHIUI

Flat ink components for poster-inspired interfaces

SHIUI is a flat ink UI kit for building interfaces with the visual character of Hinomaru Japanese posters. Its stated palette centers on paper, sumi, and vermilion, and its design direction explicitly uses zero shadows. The catalogue presents live examples rather than a purely static list, allowing readers to inspect interaction states in context.

The kit is organized around practical interface building blocks: actions, labels and seals, forms, navigation, feedback, and progress. It is suited to teams or individuals shaping an editorial, catalogue, archive, commerce, or process-oriented interface that needs a consistent print-inspired treatment. The available site content shows copy-import and source actions, but does not document a framework, installation method, package format, integrations, pricing, or licensing terms.

Key features

Broad component catalogue

The catalogue groups 111 live elements into 24 blocks, covering common controls and interface states rather than only static visual samples.

Action hierarchy

Buttons include primary, secondary, outline, ghost, ink, destructive, loading, arrow, split, small, large, and icon variants, with documented use guidance for different action priorities.

Stateful form controls

The kit includes text inputs, textareas, selects, checkboxes, radio controls, toggles, switches, sliders, search, password, file, date, OTP, and quantity controls, along with labels, hints, and errors.

Navigation patterns

Tabs, breadcrumbs, pagination, steps, sidebars, menu lists, links, page dots, back-to-top controls, and section rails support catalogue, process, and multi-step navigation patterns.

Feedback and progress states

Alerts, toasts, banners, progress bars, progress rings, and an enso spinner represent notices, completion, work in progress, and operational states; several examples are dismissible or interactive.

Hinomaru-inspired visual language

The visual system is built around flat paper, sumi, and vermilion treatments, with ink-focused borders and states instead of shadows. The examples include hover wipes, brush underlines, seals, numerals, and editorial labels.

Potential use cases

  • Editorial catalogues and archives

    Use the action variants, tags, seals, labels, and navigation rails to give a gallery, archive, or exhibition catalogue a consistent print-led interface language.

  • Print and edition commerce

    Combine product-oriented tags, price stamps, quantity controls, checkout-style large buttons, shipping fields, and progress steps for a small edition or print commerce flow.

  • Submission and intake forms

    Use the field controls, validation messages, OTP input, file upload, and date fields as a starting point for commissions, submissions, registration, or artwork intake workflows.

  • Structured content navigation

    Apply tabs, breadcrumbs, pagination, sidebars, menu lists, and section rails when an information-rich site needs clear movement between collections, process pages, and reference sections.

  • Production and status dashboards

    Use alerts, toasts, banners, loading states, drying/progress indicators, and status pills to communicate operational updates in a studio, publishing, or production-oriented interface.

Pros and Cons

Pros

  • Large catalogue with 111 live elements organized into 24 blocks.
  • Covers both visual primitives and practical interaction states, including loading, error, selected, dismissible, and progress states.
  • Provides several action priorities and form-control variants, which can help establish a consistent interface hierarchy.
  • The catalogue includes interactive examples and copy-import/source actions for evaluation and handoff.

Cons

  • Framework, package, installation, and integration details are not documented in the available content.
  • Pricing and licensing terms are unavailable; the pricing page returns a not-found response.
  • The visual direction is deliberately specific, so it may require adaptation for products that do not suit a flat, poster-inspired aesthetic.

FAQ

What is SHIUI?

SHIUI is a flat ink UI kit inspired by Hinomaru Japanese posters. Its examples use paper, sumi, and vermilion as the primary visual language and avoid drop shadows.

What does the kit include?

The catalogue presents 111 live elements across 24 blocks. The documented examples include buttons, badges and seals, form controls, navigation, alerts, toasts, progress indicators, and other interface states.

How can the components be evaluated?

The examples are interactive: buttons demonstrate hover behavior, controls expose selected or pressed states, and components such as sliders, toggles, password fields, and dismissible notices can be tried directly in the catalogue.

What implementation or framework support is documented?

The site shows component examples and copy import/source actions, but the collected material does not specify a framework, package format, installation process, or integrations.

Where can pricing and licensing details be found?

Pricing and licensing terms are not stated in the available product content. The site's pricing path currently returns a not-found page, so purchase or usage conditions should be confirmed separately.

Quick Facts

Category
Design Tool / UI Kit
Catalogue
111 live elements in 24 blocks
Visual system
Paper, sumi, and vermilion; zero shadows
Primary patterns
Actions, forms, navigation, feedback, and progress
Evaluation workflow
Try live examples, then use copy-import or source actions
Pricing and licensing
Not stated in the available site content