@yukihi

An accessible React design system with scoped themes, reusable application patterns, and character icons, built for Tailwind CSS v4.

242 components pro available react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗ pro ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://design.yukihi.tokyo/v1/r/registry.json

pnpm pnpm dlx shadcn@latest add https://design.yukihi.tokyo/v1/r/registry.json

bun bunx shadcn@latest add https://design.yukihi.tokyo/v1/r/registry.json

fetch registry curl -s https://design.yukihi.tokyo/v1/r/registry.json

Components

242 total

Design System Styles style

Design tokens, Tailwind v4 theme mappings, and shared component rules.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/design-system-styles.json

Utilities lib

Class-name utility.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/utils.json

Mobile Hook hook

Responsive mobile-state hook.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/use-mobile.json

accordion ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/accordion.json

alert-dialog ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/alert-dialog.json

alert ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/alert.json

avatar ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/avatar.json

badge ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/badge.json

breadcrumb ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/breadcrumb.json

button ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/button.json

calendar ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/calendar.json

card ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/card.json

checkbox ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/checkbox.json

collapsible ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/collapsible.json

combobox ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/combobox.json

date-picker ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/date-picker.json

dialog ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/dialog.json

dropdown-menu ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/dropdown-menu.json

file-upload ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/file-upload.json

icon-button ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/icon-button.json

input-group ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/input-group.json

input ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/input.json

label ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/label.json

navigation-menu ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/navigation-menu.json

pagination ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/pagination.json

popover ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/popover.json

progress ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/progress.json

radio-group ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/radio-group.json

select ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/select.json

separator ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/separator.json

sheet ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/sheet.json

sidebar ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/sidebar.json

skeleton ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/skeleton.json

slider ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/slider.json

sonner ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/sonner.json

spinner ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/spinner.json

switch ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/switch.json

table ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/table.json

tabs ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/tabs.json

textarea ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/textarea.json

toast ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/toast.json

toggle-group ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/toggle-group.json

toggle ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/toggle.json

tooltip ui

Design system ui component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/tooltip.json

Design Theme Provider component

Scoped theme and portal color inheritance.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/theme-provider.json

assistant-card component

Design system character component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assistant-card.json

empty-state component

Design system character component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/empty-state.json

friendly-tooltip component

Design system character component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/friendly-tooltip.json

message-bubble component

Design system character component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/message-bubble.json

soft-notice component

Design system character component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/soft-notice.json

suggestion-chip component

Design system character component.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/suggestion-chip.json

Dynamic Character Icons component

Dynamic six-direction character/status API and all approved artwork variants.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/character-icons.json

app-shell component

画面共通のナビゲーション枠。単独画面の主目的を表すPatternには使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/app-shell.json

assistant-panel component

AI支援が要件にある画面へ案内領域を加える。AI支援が不要なら使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assistant-panel.json

data-table component

表形式の検索・並べ替え・選択・ページ送り。画面全体の構成にはcollection-pageを使う。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/data-table.json

error-state component

処理失敗の説明と再試行。対象が0件の状態には使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/error-state.json

form-field component

ラベル・説明・入力エラーを結ぶ入力欄。フォーム全体の構成には使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/form-field.json

loading-state component

領域の待機と初回スケルトン。失敗結果の表示には使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/loading-state.json

page-header component

見出し・説明・主操作をまとめる。本文や画面状態の代わりには使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/page-header.json

search-field component

検索語を入力する欄。条件全体の管理にはtable-toolbarを使う。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/search-field.json

settings-section component

設定群の見出し・説明・本文。画面全体にはsettings-pageを使う。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/settings-section.json

table-toolbar component

一覧の検索・条件・件数をまとめる。表本体にはdata-tableを使う。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/table-toolbar.json

dashboard-page component

複数の指標と進行状況を把握し優先作業へ進む画面。単一数値の表示には使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/dashboard-page.json

collection-page component

複数件を探し比較して選ぶ画面。単一対象の閲覧には使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/collection-page.json

detail-page component

1件を閲覧し関連操作へ進む画面。編集と保存が主目的なら使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/detail-page.json

edit-page component

1件を作成・編集して保存する画面。複数の独立した設定群には使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/edit-page.json

settings-page component

複数の設定群を管理する画面。単一項目の変更には使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/settings-page.json

step-form component

順番に入力し確認して送信する画面。独立した複数作業には使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/step-form.json

task-workflow-page component

独立した複数作業の進行を管理する画面。直線的な段階入力には使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/task-workflow-page.json

result-page component

完了結果と次の行動を残す画面。短い通知だけなら使わない。

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/result-page.json

Icon Frame component

Shared frame for approved SVG artwork.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/icon-frame.json

AssemblyDocumentFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-document-feature-icon.json

AssemblyHistoryFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-history-feature-icon.json

AssemblyIdeaFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-idea-feature-icon.json

AssemblySavedStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-saved-status-icon.json

AssemblySuccessCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-success-character-icon.json

AssemblyThinkingCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-thinking-character-icon.json

AssemblyThinkingStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-thinking-status-icon.json

AssemblyWelcomeCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-welcome-character-icon.json

FoldDocumentFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-document-feature-icon.json

FoldHistoryFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-history-feature-icon.json

FoldIdeaFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-idea-feature-icon.json

FoldSavedStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-saved-status-icon.json

FoldSuccessCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-success-character-icon.json

FoldThinkingCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-thinking-character-icon.json

FoldThinkingStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-thinking-status-icon.json

FoldWelcomeCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-welcome-character-icon.json

ImpressDocumentFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-document-feature-icon.json

ImpressHistoryFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-history-feature-icon.json

ImpressIdeaFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-idea-feature-icon.json

ImpressSavedStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-saved-status-icon.json

ImpressSuccessCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-success-character-icon.json

ImpressThinkingCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-thinking-character-icon.json

ImpressThinkingStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-thinking-status-icon.json

ImpressWelcomeCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-welcome-character-icon.json

InkDocumentFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-document-feature-icon.json

InkHistoryFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-history-feature-icon.json

InkIdeaFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-idea-feature-icon.json

InkSavedStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-saved-status-icon.json

InkSuccessCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-success-character-icon.json

InkThinkingCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-thinking-character-icon.json

InkThinkingStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-thinking-status-icon.json

InkWelcomeCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-welcome-character-icon.json

MonolithDocumentFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-document-feature-icon.json

MonolithHistoryFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-history-feature-icon.json

MonolithIdeaFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-idea-feature-icon.json

MonolithSavedStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-saved-status-icon.json

MonolithSuccessCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-success-character-icon.json

MonolithThinkingCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-thinking-character-icon.json

MonolithThinkingStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-thinking-status-icon.json

MonolithWelcomeCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-welcome-character-icon.json

OrbitDocumentFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-document-feature-icon.json

OrbitHistoryFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-history-feature-icon.json

OrbitIdeaFeatureIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-idea-feature-icon.json

OrbitSavedStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-saved-status-icon.json

OrbitSuccessCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-success-character-icon.json

OrbitThinkingCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-thinking-character-icon.json

OrbitThinkingStatusIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-thinking-status-icon.json

OrbitWelcomeCharacterIcon component

Approved standalone SVG icon.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-welcome-character-icon.json

All Approved Icons component

Barrel exports for all approved standalone SVG icons.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/icons.json

Complete Design System base

All Foundation, Character, Pattern, and approved icon items.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/design-system.json

Cobalt Design System Styles style

Canonical cobalt tokens, Noto Sans JP font loading, and shared component rules.

npx shadcn@latest add https://design.yukihi.tokyo/v1/r/cobalt-design-system-styles.json

Cobalt Utilities lib