Yukihi

Overview

Yukihi is an MIT-licensed React design system by yukihito-jokyu, documented in Japanese and published as a shadcn registry under the @yukihi namespace. The repository manages two reusable systems, new-york and cobalt. Each includes 41 UI components, 7 character icons, 18 application patterns, 48 standalone SVGs, shared styles, a provider and helpers, and an app uses one system or the other.

It targets React apps on Tailwind CSS v4, with tokens and shared CSS added by the shadcn CLI and themes switched through DesignThemeProvider. The registry is built on the Radix base rather than Base UI, so asChild is preserved. Generated output totals 242 indexed items, and CI checks installs, re-installs, CSS sync, type checks and production builds with a locked shadcn CLI version.

Features

• Two systems: new-york and cobalt each ship a complete set of UI, character, pattern and SVG items, installed individually or as one bundle.
• Scoped themes: DesignThemeProvider sets the theme for a subtree, with five color sets in new-york and a motion on/off setting in cobalt.
• Application patterns: 18 approved patterns for recurring app layouts, viewable in Storybook.
• Character icons: Character illustrations plus a dynamic six-option selection API.
• Accessibility rules: Portal components keep theme inheritance and preserve disabled, invalid, loading, IME, focus return and reduced-motion behavior.
• Responsive sizing: Control heights of 36, 44 and 48px, with compact buttons, inputs and cards below 600px.
• Agent skills: Separate AI agent skills for new-york and cobalt with tokens, rules and examples.

Tech stack

• React, TypeScript, Radix UI
• Tailwind CSS v4
• Storybook, Vite
• Noto Sans JP (cobalt)

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @yukihi/component-name