FreeVisit Website
Tracked since2026
The Bottom Line
Entry price
Free, no paid tier
Biggest pro
Unique and cohesive Japanese ink aesthetic that stands out
Biggest con
Limited to a single design theme, may not suit all projects
TL;DR - SHIUI
- Over 100 UI components and 24 blocks with a Japanese ink-inspired design
- Components include buttons, forms, navigation, seals, tags, and more with multiple variants
- Ready-to-use code snippets with copy import/source for easy integration
Pricing: Free forever
Best for: Individuals & startups
What is SHIUI?
SHIUI is a UI kit that provides over 100 reusable interface elements and 24 pre-built blocks, all styled with a distinctive Japanese ink (sumi-e) aesthetic. It includes a wide range of components such as buttons, form inputs, navigation elements, seals, tags, and more, each with multiple variants. The kit is designed for developers and designers who want to quickly build interfaces with a unique, handcrafted look. Components are available as copy-paste code snippets with import and source options, making integration straightforward. The design system uses a 44px base grid and features a color palette centered on shu (vermillion) and sumi (ink black), with subtle animations like ink wipes and arrow slides.
Pros & Cons
Pros
- Unique and cohesive Japanese ink aesthetic that stands out
- Comprehensive set of components covering most common UI needs
- Easy to integrate with copy-paste code snippets
Cons
- Limited to a single design theme, may not suit all projects
- No explicit information about responsiveness or accessibility
Key Features
111 UI elements across 24 blocksButton variants: Primary, Secondary, Outline, Ghost, Ink, Destructive, Small, Large, Icon, Loading, WithArrow, SplitButtonForm inputs: Text, Textarea, Select, Checkbox, Radio, Toggle, Switch, Range, Search, Password, File, Date, OTP, Addon, Icon, Label, Hint, Error, QuantityStepperNavigation components: Tabs (Underline, Boxed), and more (page content cut off but likely includes breadcrumbs, dots, steps)Seals, tags, and eyebrow elements: BadgeCount, BadgeDot, TagChip, TagOutline, HankoSeal, HankoRound, KickerLabel, StatusPill, NumeralSeal, PriceStampCopy import/source buttons for each component to easily use in projects
Pricing
Free
SHIUI is completely free to use with no hidden costs.
Reviews
$99Free with your review
Write a reviewReview SHIUI, get a free AI guide
Share your experience and we will send you Improve Your Thinking Patterns Using ChatGPT, free.
Best SHIUI Alternatives
Top alternatives based on features, pricing, and user needs.
Ant DesignFree
Enterprise-grade React UI components for admin panels and dashboards
PaperFreemium
Unify design, code, and data on a single canvas
Tailgrids 3.0Freemium
Accelerate web development with a comprehensive React UI component library and design system.
Chakra UIFree
Build beautiful, accessible React interfaces with composable components
shadcn/uiFree
Beautifully designed, customizable UI components for your design system.
Magic UIFree
150+ free and open-source animated components and effects for React and Tailwind CSS.
PrimeVueFreemium
The next-gen UI suite for Vue.js, offering a comprehensive and customizable component library.
Still deciding?
Most buyers shortlist 2 or 3 tools before committing. Pull a side-by-side comparison or browse the full alternatives shortlist below.
Explore More
SHIUI FAQ
How do I use a component from SHIUI?
Each component on the page has a 'Copy import' and 'Copy source' button. Clicking 'Copy import' copies the import statement for the component, and 'Copy source' copies the full JSX code. You can paste these directly into your project.
What design tokens does SHIUI use?
The kit uses a 44px base grid and a color palette centered on 'shu' (vermillion) and 'sumi' (ink black). Components also feature subtle animations like ink wipes and arrow slides on hover.
Is SHIUI a Figma kit or a code library?
SHIUI is a code-based UI kit. The page provides import and source code snippets (likely React components) that you can copy directly into your codebase. There is no mention of a Figma or design file.
Can I customize the colors and styles of SHIUI components?
The components are provided as code, so you can modify the CSS or styling variables to fit your brand. However, the kit is designed around a specific aesthetic, so extensive customization may require overriding the default theme.
What frameworks or libraries does SHIUI support?
The page does not specify a framework, but the code snippets appear to be React components (JSX). It is likely built for React, but you may adapt the HTML/CSS for other frameworks.
Does SHIUI include any JavaScript logic or just styling?
Components like buttons with loading states, split buttons with dropdowns, and input validations include JavaScript logic. For example, the ButtonLoading component has an enso spinner and disabled state, and the SplitButton includes a live dropdown.
Are the components responsive and mobile-friendly?
The page does not explicitly mention responsiveness, but the components use a 44px base grid and include mobile-friendly elements like the SmallButton (32px) for dense UIs. You may need to test responsiveness in your own project.
What is the meaning of 'shu' and 'sumi' in the design?
'Shu' refers to vermillion red, a traditional Japanese color often used in stamps and seals. 'Sumi' is ink black, used in calligraphy. These two colors form the core palette of the UI kit, giving it a handcrafted, ink-inspired feel.
Source: shi-ui.vercel.app