---
name: "@yukihi"
slug: "yukihi"
description: "An accessible React design system with scoped themes, reusable application patterns, and character icons, built for Tailwind CSS v4."
category: "AI/chat UI"
tags: ["accessibility", "ai", "blocks", "buttons", "cards", "dashboard", "design-system", "forms", "hooks", "icons", "loaders", "media", "mobile", "navigation", "overlays", "pro-available", "tables", "theming"]
framework: "react"
license: "MIT"
author: "yukihito-jokyu"
website: "https://github.com/yukihito-jokyu/design-system"
github: "https://github.com/yukihito-jokyu/design-system"
registry: "https://design.yukihi.tokyo/v1/r/registry.json"
pro: true
pro_url: "https://github.com/enterprise/premium-support"
github_stars: 0
component_count: 112
generated_at: "2026-09-21T01:50:16.753Z"
---

# @yukihi

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

## Links

- Website: https://github.com/yukihito-jokyu/design-system
- GitHub: https://github.com/yukihito-jokyu/design-system
- Registry JSON: https://design.yukihi.tokyo/v1/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/yukihi
- This file: https://sh4dcn.vercel.app/md/yukihi.md
- Pro / pricing: https://github.com/enterprise/premium-support

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://design.yukihi.tokyo/v1/r/registry.json
pnpm dlx shadcn@latest add https://design.yukihi.tokyo/v1/r/registry.json
bunx shadcn@latest add https://design.yukihi.tokyo/v1/r/registry.json
# clone the source repo
git clone https://github.com/yukihito-jokyu/design-system.git
# fetch the raw registry index
curl -s https://design.yukihi.tokyo/v1/r/registry.json
```

## Components (112)

| name | type | description | install |
| --- | --- | --- | --- |
| design-system-styles | registry:style | Token CSS, Tailwind v4 adapter, and shared component styles. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/design-system-styles.json` |
| utils | registry:lib | Class-name utility. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/utils.json` |
| theme-provider | registry:component | Scoped theme and portal color inheritance. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/theme-provider.json` |
| use-mobile | registry:hook | Responsive mobile-state hook. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/use-mobile.json` |
| icon-frame | registry:component | Shared frame for approved SVG artwork. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/icon-frame.json` |
| assembly-document-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-document-feature-icon.json` |
| assembly-history-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-history-feature-icon.json` |
| assembly-idea-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-idea-feature-icon.json` |
| assembly-saved-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-saved-status-icon.json` |
| assembly-success-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-success-character-icon.json` |
| assembly-thinking-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-thinking-character-icon.json` |
| assembly-thinking-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-thinking-status-icon.json` |
| assembly-welcome-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assembly-welcome-character-icon.json` |
| fold-document-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-document-feature-icon.json` |
| fold-history-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-history-feature-icon.json` |
| fold-idea-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-idea-feature-icon.json` |
| fold-saved-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-saved-status-icon.json` |
| fold-success-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-success-character-icon.json` |
| fold-thinking-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-thinking-character-icon.json` |
| fold-thinking-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-thinking-status-icon.json` |
| fold-welcome-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/fold-welcome-character-icon.json` |
| impress-document-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-document-feature-icon.json` |
| impress-history-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-history-feature-icon.json` |
| impress-idea-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-idea-feature-icon.json` |
| impress-saved-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-saved-status-icon.json` |
| impress-success-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-success-character-icon.json` |
| impress-thinking-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-thinking-character-icon.json` |
| impress-thinking-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-thinking-status-icon.json` |
| impress-welcome-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/impress-welcome-character-icon.json` |
| ink-document-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-document-feature-icon.json` |
| ink-history-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-history-feature-icon.json` |
| ink-idea-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-idea-feature-icon.json` |
| ink-saved-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-saved-status-icon.json` |
| ink-success-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-success-character-icon.json` |
| ink-thinking-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-thinking-character-icon.json` |
| ink-thinking-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-thinking-status-icon.json` |
| ink-welcome-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/ink-welcome-character-icon.json` |
| monolith-document-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-document-feature-icon.json` |
| monolith-history-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-history-feature-icon.json` |
| monolith-idea-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-idea-feature-icon.json` |
| monolith-saved-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-saved-status-icon.json` |
| monolith-success-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-success-character-icon.json` |
| monolith-thinking-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-thinking-character-icon.json` |
| monolith-thinking-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-thinking-status-icon.json` |
| monolith-welcome-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/monolith-welcome-character-icon.json` |
| orbit-document-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-document-feature-icon.json` |
| orbit-history-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-history-feature-icon.json` |
| orbit-idea-feature-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-idea-feature-icon.json` |
| orbit-saved-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-saved-status-icon.json` |
| orbit-success-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-success-character-icon.json` |
| orbit-thinking-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-thinking-character-icon.json` |
| orbit-thinking-status-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-thinking-status-icon.json` |
| orbit-welcome-character-icon | registry:component | Approved standalone SVG icon. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/orbit-welcome-character-icon.json` |
| accordion | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/accordion.json` |
| alert-dialog | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/alert-dialog.json` |
| alert | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/alert.json` |
| avatar | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/avatar.json` |
| badge | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/badge.json` |
| breadcrumb | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/breadcrumb.json` |
| button | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/button.json` |
| calendar | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/calendar.json` |
| card | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/card.json` |
| checkbox | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/checkbox.json` |
| collapsible | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/collapsible.json` |
| combobox | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/combobox.json` |
| date-picker | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/date-picker.json` |
| dialog | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/dialog.json` |
| dropdown-menu | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/dropdown-menu.json` |
| file-upload | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/file-upload.json` |
| icon-button | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/icon-button.json` |
| input-group | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/input-group.json` |
| input | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/input.json` |
| label | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/label.json` |
| navigation-menu | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/navigation-menu.json` |
| pagination | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/pagination.json` |
| popover | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/popover.json` |
| progress | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/progress.json` |
| radio-group | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/radio-group.json` |
| select | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/select.json` |
| separator | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/separator.json` |
| sheet | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/sheet.json` |
| sidebar | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/sidebar.json` |
| skeleton | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/skeleton.json` |
| slider | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/slider.json` |
| sonner | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/sonner.json` |
| spinner | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/spinner.json` |
| switch | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/switch.json` |
| table | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/table.json` |
| tabs | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/tabs.json` |
| textarea | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/textarea.json` |
| toast | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/toast.json` |
| toggle-group | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/toggle-group.json` |
| toggle | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/toggle.json` |
| tooltip | registry:ui | Design system ui component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/tooltip.json` |
| assistant-card | registry:component | Design system character component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assistant-card.json` |
| empty-state | registry:component | Design system character component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/empty-state.json` |
| friendly-tooltip | registry:component | Design system character component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/friendly-tooltip.json` |
| message-bubble | registry:component | Design system character component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/message-bubble.json` |
| soft-notice | registry:component | Design system character component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/soft-notice.json` |
| suggestion-chip | registry:component | Design system character component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/suggestion-chip.json` |
| app-shell | registry:component | Design system patterns component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/app-shell.json` |
| assistant-panel | registry:component | Design system patterns component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/assistant-panel.json` |
| data-table | registry:component | Design system patterns component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/data-table.json` |
| error-state | registry:component | Design system patterns component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/error-state.json` |
| form-field | registry:component | Design system patterns component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/form-field.json` |
| loading-state | registry:component | Design system patterns component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/loading-state.json` |
| page-header | registry:component | Design system patterns component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/page-header.json` |
| search-field | registry:component | Design system patterns component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/search-field.json` |
| settings-section | registry:component | Design system patterns component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/settings-section.json` |
| table-toolbar | registry:component | Design system patterns component. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/table-toolbar.json` |
| character-icons | registry: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` |
| design-system | registry:item | All Foundation, Character, Pattern, and approved icon items. | `npx shadcn@latest add https://design.yukihi.tokyo/v1/r/design-system.json` |

## For AI agents

```text
You are adding components from @yukihi to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/yukihi.md) for the component list.
2. Fetch the machine-readable index: https://design.yukihi.tokyo/v1/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: yukihi).
```